change dash-board layout
This commit is contained in:
smanylov
@@ -0,0 +1,266 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user