266 lines
8.4 KiB
TypeScript
266 lines
8.4 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||
|
|
import { Pagination, Autoplay } from 'swiper/modules';
|
||
|
|
import Image from 'next/image';
|
||
|
|
import 'swiper/css';
|
||
|
|
import 'swiper/css/pagination';
|
||
|
|
import testImage from '@/app/src/image-preview.png'
|
||
|
|
import { useRef } from 'react';
|
||
|
|
|
||
|
|
export default function ViolationsCarousel() {
|
||
|
|
const paginationRef = useRef(null);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="content-section">
|
||
|
|
<div className="section-header">
|
||
|
|
<h3 className="section-title">Нарушения</h3>
|
||
|
|
<a href="pages/violations.php" className="view-all-link">Смотреть все →</a>
|
||
|
|
</div>
|
||
|
|
<div className="violations-carousel">
|
||
|
|
<Swiper
|
||
|
|
spaceBetween={50}
|
||
|
|
slidesPerView={1}
|
||
|
|
modules={[Pagination, Autoplay]}
|
||
|
|
pagination={{
|
||
|
|
/* dynamicBullets: true, */
|
||
|
|
/* el: paginationRef.current, */
|
||
|
|
clickable: true,
|
||
|
|
el: '.custon-swiper-pagination'
|
||
|
|
}}
|
||
|
|
loop={true}
|
||
|
|
autoplay={{
|
||
|
|
delay: 3000,
|
||
|
|
disableOnInteraction: false,
|
||
|
|
}}
|
||
|
|
/* width={300} */
|
||
|
|
>
|
||
|
|
<SwiperSlide>
|
||
|
|
<div className="violation-slide">
|
||
|
|
<div className="violation-image-container">
|
||
|
|
<Image src={testImage} alt="Preview" className="violation-image" />
|
||
|
|
<div className="violation-badge">НАРУШЕНИЕ</div>
|
||
|
|
<div className="violation-status-badge">ОБРАБОТАНО</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-content">
|
||
|
|
<div className="violation-title-row">
|
||
|
|
<div className="violation-filename">
|
||
|
|
🖼️banner111.png</div>
|
||
|
|
<div className="violation-type-badge photo">
|
||
|
|
Фото
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-grid">
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">
|
||
|
|
🌍 Регион
|
||
|
|
</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
<span className="region-flag">🇺🇸</span>
|
||
|
|
<span>США</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📅 Обнаружено</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
17.10.2025</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">🌐 Домен</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
m.apkpure.com </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📊 Категория</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
Единичное
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📁 Тип</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
Изображение</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">⚡ Статус</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
✅ Обработано</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-actions-row">
|
||
|
|
<button className="btn-visit-site">
|
||
|
|
🔗 Перейти на сайт
|
||
|
|
</button>
|
||
|
|
<button className="violation-action">
|
||
|
|
🚨 Открыть дело
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SwiperSlide>
|
||
|
|
<SwiperSlide>
|
||
|
|
<div className="violation-slide">
|
||
|
|
<div className="violation-image-container">
|
||
|
|
<Image src={testImage} alt="Preview" className="violation-image" />
|
||
|
|
|
||
|
|
<div className="violation-badge">НАРУШЕНИЕ</div>
|
||
|
|
<div className="violation-status-badge">ОБРАБОТАНО</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-content">
|
||
|
|
<div className="violation-title-row">
|
||
|
|
<div className="violation-filename">
|
||
|
|
🖼️banner111.png</div>
|
||
|
|
<div className="violation-type-badge photo">
|
||
|
|
Фото
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-grid">
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">
|
||
|
|
🌍 Регион
|
||
|
|
</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
<span className="region-flag">🇺🇸</span>
|
||
|
|
<span>США</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📅 Обнаружено</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
17.10.2025</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">🌐 Домен</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
m.apkpure.com </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📊 Категория</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
Единичное
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📁 Тип</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
Изображение</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">⚡ Статус</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
✅ Обработано</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-actions-row">
|
||
|
|
<button className="btn-visit-site">
|
||
|
|
🔗 Перейти на сайт
|
||
|
|
</button>
|
||
|
|
<button className="violation-action">
|
||
|
|
🚨 Открыть дело
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SwiperSlide>
|
||
|
|
<SwiperSlide>
|
||
|
|
<div className="violation-slide">
|
||
|
|
<div className="violation-image-container">
|
||
|
|
<Image src={testImage} alt="Preview" className="violation-image" />
|
||
|
|
|
||
|
|
<div className="violation-badge">НАРУШЕНИЕ</div>
|
||
|
|
<div className="violation-status-badge">ОБРАБОТАНО</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-content">
|
||
|
|
<div className="violation-title-row">
|
||
|
|
<div className="violation-filename">
|
||
|
|
🖼️banner111.png</div>
|
||
|
|
<div className="violation-type-badge photo">
|
||
|
|
Фото
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-grid">
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">
|
||
|
|
🌍 Регион
|
||
|
|
</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
<span className="region-flag">🇺🇸</span>
|
||
|
|
<span>США</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📅 Обнаружено</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
17.10.2025</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">🌐 Домен</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
m.apkpure.com </div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📊 Категория</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
Единичное
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">📁 Тип</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
Изображение</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-info-item">
|
||
|
|
<div className="violation-info-label">⚡ Статус</div>
|
||
|
|
<div className="violation-info-value">
|
||
|
|
✅ Обработано</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="violation-actions-row">
|
||
|
|
<button className="btn-visit-site">
|
||
|
|
🔗 Перейти на сайт
|
||
|
|
</button>
|
||
|
|
<button className="violation-action">
|
||
|
|
🚨 Открыть дело
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</SwiperSlide>
|
||
|
|
</Swiper>
|
||
|
|
<div
|
||
|
|
className="flex justify-center mt-6"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
ref={paginationRef}
|
||
|
|
className="flex justify-center gap-2 custon-swiper-pagination"
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|