mediahub
/
mediahub-fe
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: Commit,adjust spacing and layouting

This commit is contained in:
sabdayagra 2024-12-05 21:56:27 +07:00
parent 54732a59cf
commit a473fb4e0d
15 changed files with 1642 additions and 1009 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
app/[locale]/(public)/indeks/detail/[slug]/page.tsx
View File

@ -1,27 +1,56 @@
"use client";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import React, { useState } from "react";
import { textEllipsis } from "@/utils/globals";
const dummyImage = [
{ id: 1, thumbnail: "/assets/banner-sample.png" },
{ id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
{ id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
{ id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
{ id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
{
id: 1,
title: "Giat Polri",
thumbnail: "/assets/banner-sample.png",
htmlDescription:
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
},
{
id: 2,
title: "Giat Polri",
thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018",
htmlDescription:
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
},
{
id: 3,
title: "Giat Polri",
thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018",
htmlDescription:
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
},
{
id: 4,
thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018",
htmlDescription:
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
},
{
id: 5,
title: "Giat Polri",
thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018",
htmlDescription:
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia ratione qui quidem, saepe blanditiis vero reiciendis commodi adipisci libero voluptatum, nisi eum hic quis dolorem, et aperiam consectetur perspiciatis error optio rem dolores tempore ducimus quos officia! Dicta odio dolorem quam necessitatibus libero mollitia reiciendis? Veniam, fugit incidunt? Quidem, consectetur.",
},
];
const dummyData = {
id: 12312,
title: "ahahah",
title: "TITLE",
createdBy: "Mabes",
createdAt: "21-21-2021",
time: "18:23",
desc: "sdaasd",
desc: "halooo",
htmlDescription:
'<p>Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.</p><p>Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.</p><p>"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.</p><p>Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.</p><p>“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.</p>',
};
@ -32,106 +61,26 @@ const IndeksDetail = () => {
const router = useRouter();
const pathname = usePathname();
const sizes = [
{ label: "XL", value: "3198 x 1798 px" },
{ label: "L", value: "2399 x 1349 px" },
{ label: "M", value: "1599 x 899 px" },
{ label: "S", value: "1066 x 599 px" },
{ label: "XS", value: "800 x 450 px" },
];
return (
<div className="min-h-screen p-4 md:p-8">
{/* Container Utama */}
<div className="rounded-md overflow-hidden md:flex">
{/* Bagian Kiri */}
<div className="md:w-2/3">
{/* Gambar Utama */}
<div className="relative">
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" alt="Main" className="w-full" />
<div className="absolute top-4 left-4"></div>
</div>
{/* Thumbnail */}
<div className="p-4 grid grid-cols-4 gap-2">
{[1, 2, 3, 4].map((_, index) => (
<img
key={index}
src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018"
alt={`Thumbnail ${index + 1}`}
className="w-full h-16 object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
/>
))}
</div>
</div>
{/* Bagian Kanan */}
<div className="md:w-1/3 p-4 bg-gray-300 rounded-lg mx-4">
<div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
<path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
</svg>
<p className="text-base lg:text-lg">Simpan</p>
</div>
{/* garis */}
<div className="border-t border-black my-4"></div>
<Link href="" className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
OPS MANTAP PRAJA & PILKADA 2024
</Link>
<div className="flex justify-center flex-wrap gap-2 mb-4">
<p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">poldajabar</p>
<p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">pilkadamai2024</p>
</div>
<div className="border-t border-black my-4"></div>
{/* Opsi Ukuran Foto */}
<h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
<div className="border-t border-black my-4"></div>
<div className="space-y-2">
{sizes.map((size) => (
<label key={size.label} className="flex items-center space-x-2 cursor-pointer">
<input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
<div className="text-sm">
{size.label} ---------------------------------------- {size.value}
</div>
</label>
))}
</div>
{/* Download Semua */}
<div className="mt-4">
<label className="flex items-center space-x-2 text-sm">
<input type="checkbox" className="text-red-600 focus:ring-red-600" />
<span>Download Semua File?</span>
</label>
</div>
{/* Tombol Download */}
<button className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
</svg>
Download
</button>
</div>
<div className="p-4 lg:p-12">
{/* Judul */}
<div>
<h3>INDEKS / DETAIL</h3>
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{dummyData.title}</h1>
</div>
{/* Gambar Utama */}
<div className="flex items-center justify-center">
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" alt="Main" className="h-[500px] w-[700px] rounded-lg" />
</div>
{/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="items-end">
oleh <span className="font-semibold text-black">{dummyData.createdBy}</span> | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65
</p>
<p>Kreator: poppy-PID-poldajabar</p>
</div>
{/* Keterangan */}
<div className="md:w-2/3">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{dummyData.title}</h1>
<div dangerouslySetInnerHTML={{ __html: dummyData.htmlDescription }} />
</div>
@ -146,92 +95,26 @@ const IndeksDetail = () => {
<div className="w-full">
<div className="space-x-5 flex flex-col p-4">
<div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
<h2 className="flex items-center text-sm lg:text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
<span className="text-black ">Konten </span> Serupa
</h2>
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList>
<TabsTrigger value="video" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Audio Visual
</TabsTrigger>
<TabsTrigger value="audio" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Audio
</TabsTrigger>
<TabsTrigger value="image" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Foto
</TabsTrigger>
<TabsTrigger value="teks" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Teks
</TabsTrigger>
</TabsList>
</Tabs>
<h2 className="flex items-center text-sm lg:text-xl font-bold px-4 py-1 rounded-lg text-black">Post Terkait</h2>
</div>
<div className="px-10">
{selectedTab == "video" ? (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card>
<CardContent className="flex items-center justify-center">
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
) : selectedTab == "audio" ? (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card>
<CardContent className="flex items-center justify-center">
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
) : selectedTab == "image" ? (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card onClick={() => router.push(`${pathname}/image/detail/${image.id}`)}>
<CardContent className="flex items-center justify-center">
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
) : (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card>
<CardContent>
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
)}
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card>
<CardContent className="flex flex-col gap-3 items-center justify-center">
<img src={image.thumbnail} className="h-60 object-cover w-full rounded-lg" />
<p className="bg-[#bb3523] text-white p-2 rounded-lg">{image.title}</p>
<p>{textEllipsis(image.htmlDescription, 100)}</p>
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</div>
</div>
<div className="flex items-center flex-row justify-center">

683
app/[locale]/(public)/schedule/page.tsx
View File

@ -5,9 +5,9 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigge
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { CalendarIcon } from "lucide-react";
import React, { useEffect, useState } from "react";
import { format } from "date-fns"
import { cn } from "@/lib/utils"
import { format } from "date-fns";
import { cn } from "@/lib/utils";
import { Checkbox } from "@/components/ui/checkbox";
const Jadwal = () => {
const city = [
@ -62,7 +62,7 @@ const Jadwal = () => {
const months = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
const [startDate, setStartDate] = useState<Date|undefined>(new Date());
const [startDate, setStartDate] = useState<Date | undefined>(new Date());
const [dateAWeek, setDateAWeek] = useState<string[]>([]);
const curr = new Date();
const startDays = (curr.getDay() + 7 - 1) % 7;
@ -84,11 +84,11 @@ const Jadwal = () => {
initState();
}, []);
const handleChangeDate = (date: Date|undefined) => {
const handleChangeDate = (date: Date | undefined) => {
setStartDate(date);
const dateListTemp = [];
const curr = date;
if(curr){
if (curr) {
const startDays = (curr.getDay() + 7 - 1) % 7;
curr.setDate(curr.getDate() - startDays);
@ -97,25 +97,22 @@ const Jadwal = () => {
dateListTemp.push(new Date(curr).toISOString().slice(0, 10));
curr.setDate(curr.getDate() + 1);
}
console.log("Change Date :", dateListTemp);
setDateList(dateListTemp);
setDateAWeek(dateListTemp);
}
};
function getLastWeek(today: Date|undefined) {
if(today){
function getLastWeek(today: Date | undefined) {
if (today) {
return new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
}
}
function getNextWeek(today: Date|undefined) {
if(today){
function getNextWeek(today: Date | undefined) {
if (today) {
return new Date(today.getFullYear(), today.getMonth(), today.getDate() + 7);
}
}
@ -125,28 +122,27 @@ const Jadwal = () => {
console.log("Next week :", dayInNextWeek);
const dateListTemp = [];
const curr = dayInNextWeek;
if(curr){
if (curr) {
const startDays = (curr.getDay() + 7 - 1) % 7;
curr.setDate(curr.getDate() - startDays);
curr.setDate(curr.getDate() - curr.getDay() + 1);
for (let i = 0; i < 7; i++) {
const newDate = new Date(curr);
if (i == 0) {
setStartDate(newDate);
}
const dateFormatter = Intl.DateTimeFormat("sv-SE");
dateListTemp.push(dateFormatter.format(newDate));
curr.setDate(curr.getDate() + 1);
}
console.log(dateListTemp);
setDateList(dateListTemp);
setDateAWeek(dateListTemp);
}
};
const changePrevWeek = () => {
@ -156,52 +152,68 @@ const Jadwal = () => {
console.log(startDate);
const dateListTemp = [];
const curr = dayInPrevWeek;
if(curr){
if (curr) {
const startDays = (curr.getDay() + 7 - 1) % 7;
curr.setDate(curr.getDate() - startDays);
curr.setDate(curr.getDate() - curr.getDay() + 1);
for (let i = 0; i < 7; i++) {
const newDate = new Date(curr);
if (i == 0) {
setStartDate(newDate);
}
const dateFormatter = Intl.DateTimeFormat("sv-SE");
dateListTemp.push(dateFormatter.format(newDate));
curr.setDate(curr.getDate() + 1);
}
console.log(dateListTemp);
setDateList(dateListTemp);
setDateAWeek(dateListTemp);
}
};
const categories = [
{ id: 1, title: "POLDA METRO JAYA" },
{ id: 2, title: "POLDA JAWA BARAT" },
{ id: 3, title: "POLDA BANTEN" },
{ id: 4, title: "POLDA JAWA TENGAH" },
{ id: 5, title: "POLDA D.I YOGYAKARTA" },
{ id: 6, title: "POLDA JAWA TIMUR" },
{ id: 7, title: "POLDA ACEH" },
{ id: 8, title: "POLDA SUMATERA UTARA" },
{ id: 9, title: "POLDA SUMATERA BARAT" },
];
return (
<>
{/* Awal Komponen Kiri */}
<div className="relative md:py-24 py-16 md:pb-0 pb-0 bg-gray-50 dark:bg-slate-800">
<div className="relative px-4 lg:px-28 md:py-10 py-4 bg-gray-50 dark:bg-slate-800">
<Popover>
<PopoverTrigger asChild>
<Button variant={"outline"} className={cn("w-[240px] justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
<Button variant={"outline"} className={cn("w-[240px] py-4 justify-start text-left font-normal", !startDate && "text-muted-foreground")}>
<CalendarIcon />
{startDate ? format(startDate, "MMM yyyy") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar mode="single" selected={startDate} onSelect={(e)=>{
handleChangeDate(e)}} initialFocus />
<Calendar
mode="single"
selected={startDate}
onSelect={(e) => {
handleChangeDate(e);
}}
initialFocus
/>
</PopoverContent>
</Popover>
<div className="container relative">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<a className="text-black flex flex-row gap-2 items-center mx-3 cursor-pointer">
<a className="text-black flex flex-row gap-2 py-4 items-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="#000" d="M20 3H4a1 1 0 0 0-1 1v2.227l.008.223a3 3 0 0 0 .772 1.795L8 12.886V21a1 1 0 0 0 1.316.949l6-2l.108-.043A1 1 0 0 0 16 19v-6.586l4.121-4.12A3 3 0 0 0 21 6.171V4a1 1 0 0 0-1-1" />
</svg>
@ -211,316 +223,385 @@ const Jadwal = () => {
</svg>
</a>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="flex p-0 rounded-md overflow-hidden">
<DropdownMenuItem className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 focus:bg-default focus:text-primary-foreground rounded-none">
<div className="gap-6">
{" "}
Filter <button className="text-blue-400">Simpan</button>
<DropdownMenuContent align="start" className="flex p-0 rounded-md">
<DropdownMenuItem className="flex flex-col items-center justify-between gap-1.5 p-2 border-b text-default-600 rounded-none">
<div className="gap-6 flex flex-row justify-end">
<div> Filter</div>
<button className="text-blue-400">Simpan</button>
</div>
<div className="border w-full border-t border-slate-500"></div>
<div className="overflow-y-auto flex flex-col gap-2 h-[200px] ">
<p>Region Filter</p>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
<div className="mt-2 gap-2 flex flex-row">
<Checkbox id="terms" />
<p>POLDA METRO JAYA</p>
</div>
</div>
<div className="border-t border-black my-4"></div>
<div>Region Filter</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
<div className="container-fluid relative">
<div className="grid grid-cols-1 mt-8">
<div className="relative overflow-x-auto block w-3/4 bg-white dark:bg-slate-900">
<table className="w-full text-sm text-start">
<thead className="text-lg">
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">
<a onClick={() => changePrevWeek()}>prev</a> {dateAWeek[0]?.split("-")[2]}Monday
</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{dateAWeek[1]?.split("-")[2]}Tuesday</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{dateAWeek[2]?.split("-")[2]}Wednesday</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{dateAWeek[3]?.split("-")[2]}Thursday</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{dateAWeek[4]?.split("-")[2]}Friday</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">{dateAWeek[5]?.split("-")[2]}Saturday</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[200px]">
{dateAWeek[6]?.split("-")[2]}Sunday<a onClick={() => changeNextWeek()}>next</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<div className="h-[300px] w-3/4 overflow-y-auto">
<div className="container-fluid relative">
<div className="grid grid-cols-1 mt-8">
<div className="relative block bg-white dark:bg-slate-900">
<table className="w-full text-sm text-start">
<thead className="text-md">
<tr className="h-full">
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[120px]">Time Table</th>
<th className="flex flex-row border h-full border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
<a className="cursor-pointer h-fit self-center bottom-0" onClick={() => changePrevWeek()}>
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12.29 8.71L9.7 11.3a.996.996 0 0 0 0 1.41l2.59 2.59c.63.63 1.71.18 1.71-.71V9.41c0-.89-1.08-1.33-1.71-.7" />
</svg>
</a>{" "}
<div className="flex flex-col">
<p>{dateAWeek[0]?.split("-")[2]}</p>
<p>Monday</p>
</div>
</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
<div>{dateAWeek[1]?.split("-")[2]}</div>Tuesday
</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
<div>{dateAWeek[2]?.split("-")[2]}</div>Wednesday
</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
<div>{dateAWeek[3]?.split("-")[2]}</div>Thursday
</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
<div>{dateAWeek[4]?.split("-")[2]}</div>Friday
</th>
<th className="text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
<div>{dateAWeek[5]?.split("-")[2]}</div>Saturday
</th>
<th className="flex flex-row text-center border border-gray-100 dark:border-gray-700 py-6 min-w-[100px]">
<div className="flex flex-col ">
<p>{dateAWeek[6]?.split("-")[2]}</p>
<p>Sunday</p>
</div>
<a onClick={() => changeNextWeek()} className="cursor-pointer h-fit p-0 m-0 self-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24">
<path fill="currentColor" d="m11.71 15.29l2.59-2.59a.996.996 0 0 0 0-1.41L11.71 8.7c-.63-.62-1.71-.18-1.71.71v5.17c0 .9 1.08 1.34 1.71.71" />
</svg>
</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">06:00</th>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">07:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">08:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">09:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">10:00</th>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">11:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">12:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">13:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">14:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">15:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">16:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">17:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">18:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">19:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">20:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">21:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">22:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">23:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">24:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">01:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">02:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">03:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">04:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
</tbody>
</table>
<tr>
<th className="text-center border border-gray-100 dark:border-gray-700 py-5">05:00</th>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="p-3 border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
<td className="border border-gray-100 dark:border-gray-700"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{/* Akhir Komponen Kiri */}
{/* Awal Komponent Kanan */}
<div className="w-1/4">
<div></div>
<div>
<h1>HALO</h1>
</div>
</div>
{/* Akhir Komponen Kiri */}
{/* Akhir Komponen Kanan */}
</>
);
};

10
app/[locale]/(public)/schedule2/page.tsx
View File

@ -1,10 +0,0 @@
const Schedule2 = () => {
return <div>Schedule2</div>;
};
export default Schedule2;

250
app/[locale]/(public)/video/detail/[slug]/page.tsx Normal file
View File

@ -0,0 +1,250 @@
"use client";
import { Card, CardContent } from "@/components/ui/card";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Textarea } from "@/components/ui/textarea";
import Link from "next/link";
import { useParams, usePathname, useRouter } from "next/navigation";
import React, { useState } from "react";
const dummyImage = [
{ id: 1, thumbnail: "/assets/banner-sample.png" },
{ id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125&currentMilis=1732769540018" },
{ id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128&currentMilis=1732769540018" },
{ id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127&currentMilis=1732769540018" },
{ id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" },
];
const dummyData = {
id: 12312,
title: "ahahah",
createdBy: "Mabes",
createdAt: "21-21-2021",
time: "18:23",
desc: "sdaasd",
htmlDescription:
'<p>Polres Kobar - Polres Kotawaringin Barat (Kobar) memberikan bantuan sosial kepada warga yang berada di Daerah Aliran Sungai (DAS) Arut khususnya yang terdampak banjir, Sabtu (30/11/2024) pagi.</p><p>Kapolda Kalteng Irjen Pol Drs. Djoko Poerwanto melalui Kapolres Kobar AKBP Yusfandi Usman, S.I.K., M.I.K., menjelaskan bahwa pihaknya membagikan 200 paket sembako sebagai bentuk kepedulian kepada masyarakat.</p><p>"Saya bersama personel turun langsung membagikan bantuan berupa paket sembako yang diserahkan kepada masyarakat sekaligus monitoring ke lokasi pinggiran sungai yang mulai sebagain terdampak banjir akibat curah hujan tinggi,” ungkap Kapolres.</p><p>Lebih lanjut, orang nomor satu di Polres Kobar ini, mengungkapkan kegiatan tersebut dilakukan dalam rangka tanggap waspada dan antisipasi bencana banjir di wilayah Kabupaten Kobar.</p><p>“Kami minta masyarakat tetap waspada banjir menyikapi cuaca yang berubah-ubah saat ini, tidak menutup kemungkinan bertambahnya volume air sungai, jika diguyur hujan terus menerus,” jelasnya.</p>',
};
const DetailVideo = () => {
const [selectedSize, setSelectedSize] = useState<string>("L");
const [selectedTab, setSelectedTab] = useState("video");
const router = useRouter();
const pathname = usePathname();
const params = useParams();
const locale = params?.locale;
const sizes = [
{ label: "XL", value: "3198 x 1798 px" },
{ label: "L", value: "2399 x 1349 px" },
{ label: "M", value: "1599 x 899 px" },
{ label: "S", value: "1066 x 599 px" },
{ label: "XS", value: "800 x 450 px" },
];
return (
<div className="min-h-screen p-4 md:p-8">
{/* Container Utama */}
<div className="rounded-md overflow-hidden md:flex">
{/* Bagian Kiri */}
<div className="md:w-2/3">
{/* Gambar Utama */}
<div className="relative">
<img src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018" alt="Main" className="w-full" />
<div className="absolute top-4 left-4"></div>
</div>
{/* Thumbnail */}
<div className="p-4 grid grid-cols-4 gap-2">
{[1, 2, 3, 4].map((_, index) => (
<img
key={index}
src="https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93&currentMilis=1732769540018"
alt={`Thumbnail ${index + 1}`}
className="w-full h-16 object-cover rounded-md cursor-pointer hover:ring-2 hover:ring-red-600"
/>
))}
</div>
</div>
{/* Bagian Kanan */}
<div className="md:w-1/3 p-4 bg-gray-300 rounded-lg mx-4">
<div className="flex flex-col mb-3 items-center justify-center cursor-pointer">
<svg xmlns="http://www.w3.org/2000/svg" width="2.5em" height="2.5em" viewBox="0 0 24 24">
<path fill="black" d="m17 18l-5-2.18L7 18V5h10m0-2H7a2 2 0 0 0-2 2v16l7-3l7 3V5a2 2 0 0 0-2-2" />
</svg>
<p className="text-base lg:text-lg">Simpan</p>
</div>
{/* garis */}
<div className="border-t border-black my-4"></div>
<Link href="" className="bg-red-600 text-white text-xs font-bold px-3 py-3 my-3 flex justify-center items-center rounded">
OPS MANTAP PRAJA & PILKADA 2024
</Link>
<div className="flex justify-center flex-wrap gap-2 mb-4">
<p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">poldajabar</p>
<p className="bg-gray-200 text-gray-700 text-xs px-3 py-1 rounded-full cursor-pointer hover:bg-gray-500">pilkadamai2024</p>
</div>
<div className="border-t border-black my-4"></div>
{/* Opsi Ukuran Foto */}
<h4 className="flex text-lg justify-center items-center font-semibold my-3">Opsi Ukuran Foto</h4>
<div className="border-t border-black my-4"></div>
<div className="space-y-2">
{sizes.map((size) => (
<label key={size.label} className="flex items-center space-x-2 cursor-pointer">
<input type="radio" name="size" value={size.label} checked={selectedSize === size.label} onChange={() => setSelectedSize(size.label)} className="text-red-600 focus:ring-red-600" />
<div className="text-sm">
{size.label} ---------------------------------------- {size.value}
</div>
</label>
))}
</div>
{/* Download Semua */}
<div className="mt-4">
<label className="flex items-center space-x-2 text-sm">
<input type="checkbox" className="text-red-600 focus:ring-red-600" />
<span>Download Semua File?</span>
</label>
</div>
{/* Tombol Download */}
<button className="mt-4 bg-red-600 text-white w-full py-2 flex justify-center items-center gap-1 rounded-md text-sm hover:bg-red-700">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path fill="white" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
</svg>
Download
</button>
</div>
</div>
{/* Footer Informasi */}
<div className="p-4 text-sm text-gray-500 flex justify-between items-center border-t mt-4">
<p className="items-end">
oleh <span className="font-semibold text-black">{dummyData.createdBy}</span> | Diupdate pada {dummyData.createdAt} {dummyData.time} WIB | 👁️ 65
</p>
<p>Kreator: poppy-PID-poldajabar</p>
</div>
{/* Keterangan */}
<div className="md:w-2/3">
<h1 className="flex flex-row font-bold text-2xl mx-5 my-8">{dummyData.title}</h1>
<div dangerouslySetInnerHTML={{ __html: dummyData.htmlDescription }} />
</div>
{/* Comment */}
<div className="flex flex-col my-16 gap-5 p-10 bg-gray-300">
<p className="flex items-start text-lg">Berikan Komentar</p>
<Textarea placeholder="Type your comments here." className="flex items-start justify-center" />
<button className="flex items-start bg-[#bb3523] rounded-lg w-fit px-4 py-1">Kirim</button>
</div>
{/* Konten Serupa */}
<div className="w-full">
<div className="space-x-5 flex flex-col p-4">
<div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
<h2 className="flex items-center text-sm lg:text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
<span className="text-black ">Konten </span> Serupa
</h2>
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList>
<TabsTrigger value="video" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Audio Visual
</TabsTrigger>
<TabsTrigger value="audio" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Audio
</TabsTrigger>
<TabsTrigger value="image" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Foto
</TabsTrigger>
<TabsTrigger value="teks" className="relative text-sm md:text-xl font-bold text-black dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
Teks
</TabsTrigger>
</TabsList>
</Tabs>
</div>
<div className="px-10">
{selectedTab == "video" ? (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card>
<CardContent className="flex items-center justify-center">
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
) : selectedTab == "audio" ? (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card>
<CardContent className="flex items-center justify-center">
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
) : selectedTab == "image" ? (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card onClick={() => router.push(`${locale}/image/detail/${image.id}`)}>
<CardContent className="flex items-center justify-center">
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
) : (
<Carousel>
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<Card>
<CardContent>
<img src={image.thumbnail} className="h-60 object-cover w-full cursor-pointer" />
</CardContent>
</Card>
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
)}
</div>
</div>
<div className="flex items-center flex-row justify-center">
<Link href="#" className="border text-[#bb3523] text-sm lg:text-md px-4 py-1 border-[#bb3523]">
LIHAT SEMUA
</Link>
</div>
</div>
</div>
);
};
export default DetailVideo;

2
app/[locale]/page.tsx
View File

@ -1,7 +1,7 @@
"use client";
import SearchSection from "@/components/landing-page/SearchSection";
import SearchSection from "@/components/landing-page/search-section";
import NewContent from "@/components/landing-page/new-content";
import PopularContent from "@/components/landing-page/popular-content";
import ContentCategory from "@/components/landing-page/content-category";

74
components/landing-page/Hero.tsx
View File

@ -1,30 +1,64 @@
import { textEllipsis } from "@/utils/globals";
import React, { useEffect, useState } from "react";
const images = ["/assets/banner-sample.png", "/assets/img-header-blog.png"];
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css/bundle";
const Hero: React.FC = () => {
return (
<div className="flex flex-col lg:flex-row items-start gap-4 px-4 lg:px-12 max-w-screen-xl py-4 mx-auto">
{/* Section Gambar Utama */}
<div className="lg:w-2/3 w-full lg:h-full">
<div className="relative h-[310px] lg:h-[420px]">
<img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
<h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
<p className="text-sm flex flex-row items-center gap-1 mt-1">
15 Maret 2024 14:01 WIB |{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path
fill="white"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
633
</p>
</div>
</div>
<div className="lg:w-2/3 w-full lg:h-full cursor-pointer">
<Swiper spaceBetween={50} slidesPerView={1} pagination={{ clickable: true }} onSlideChange={() => console.log("slide change")} onSwiper={(swiper) => console.log(swiper)}>
<SwiperSlide>
<div className="relative h-[310px] lg:h-[420px]">
<img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
<h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
<p className="text-sm flex flex-row items-center gap-1 mt-1">15 Maret 2024 14:01 WIB | </p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="relative h-[310px] lg:h-[420px]">
<img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
<h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
<p className="text-sm flex flex-row items-center gap-1 mt-1">15 Maret 2024 14:01 WIB | </p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="relative h-[310px] lg:h-[420px]">
<img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
<h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
<p className="text-sm flex flex-row items-center gap-1 mt-1">15 Maret 2024 14:01 WIB | </p>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div className="relative h-[310px] lg:h-[420px]">
<img src="/assets/banner-sample.png" alt="Gambar Utama" className="w-full h-[310px] lg:h-[420px] rounded-lg" />
<div className="absolute bottom-0 left-0 right-0 bg-black bg-opacity-70 text-white p-4 rounded-b-lg">
<span className="text-white bg-[#bb3523] rounded-md w-full h-full font-semibold uppercase text-sm px-4 py-1">Liputan Kegiatan</span>
<h2 className="text-lg font-bold mt-2">Divisi Humas Polri Siap Menuju Zona Integritas</h2>
<p className="text-sm flex flex-row items-center gap-1 mt-1">
15 Maret 2024 14:01 WIB |{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<path
fill="white"
d="M11.5 18c4 0 7.46-2.22 9.24-5.5C18.96 9.22 15.5 7 11.5 7s-7.46 2.22-9.24 5.5C4.04 15.78 7.5 18 11.5 18m0-12c4.56 0 8.5 2.65 10.36 6.5C20 16.35 16.06 19 11.5 19S3 16.35 1.14 12.5C3 8.65 6.94 6 11.5 6m0 2C14 8 16 10 16 12.5S14 17 11.5 17S7 15 7 12.5S9 8 11.5 8m0 1A3.5 3.5 0 0 0 8 12.5a3.5 3.5 0 0 0 3.5 3.5a3.5 3.5 0 0 0 3.5-3.5A3.5 3.5 0 0 0 11.5 9"
/>
</svg>{" "}
633{" "}
</p>
</div>
</div>
</SwiperSlide>
</Swiper>
</div>
{/* Section Kanan */}

67
components/landing-page/Navbar.tsx
View File

@ -16,11 +16,11 @@ const Navbar = () => {
const locale = params?.locale;
return (
<div className="bg-white dark:bg-black shadow-md sticky top-0 z-50 max-w-screen">
<div className="flex items-center justify-between px-4 py-3 md:px-6">
<div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
<div className="flex items-center justify-between lg:justify-center px-4 lg:px-23 py-4 ">
{/* Logo */}
<a href="/" className="flex items-center space-x-2">
<img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-30 h-20 md:w-60 md:h-24 flex" />
<a href="/" className="flex items-center px-3">
<img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-30 h-20 lg:max-w-screen-md md:h-24 flex" />
</a>
{/* Mobile Menu Toggle */}
@ -37,7 +37,7 @@ const Navbar = () => {
</button>
{/* Desktop Navigation */}
<div className="hidden lg:flex items-center space-x-6">
<div className="hidden lg:flex items-center space-x-3">
<DropdownMenu>
<DropdownMenuTrigger asChild>
<a className=" dark:text-white text-black flex flex-row justify-center items-center ml-5 cursor-pointer">
@ -53,39 +53,27 @@ const Navbar = () => {
</svg>
</a>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
<DropdownMenuItem
onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))}
className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
>
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuContent align="start" className="p-0 rounded-md overflow-hidden">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiYoutube className="mr-2" />
Audio Visual
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))}
className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
>
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiMusic className="mr-2" />
Audio
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))}
className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
>
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiImage className="mr-2" />
Foto
</span>
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))}
className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group"
>
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center px-5 py-2">
<FiFile className="mr-2" />
Teks
</span>
@ -103,7 +91,7 @@ const Navbar = () => {
</span>
Jadwal
</Link>
<Link href={pathname?.includes('/in')?`/indeks`:`${locale}/indeks`} className="dark:text-white text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
<Link href={pathname?.includes("/in") ? `/indeks` : `${locale}/indeks`} className="dark:text-white text-black flex flex-row items-center justify-center font-medium hover:text-gray-800">
<span>
<svg className="mr-2" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
@ -122,7 +110,7 @@ const Navbar = () => {
</Link>
<div className="flex items-center space-x-1 ">
<a href="https://tvradio.polri.go.id/">
<img src="/assets/polriTv.png" className="w-full h-auto flex-auto" />
<img src="/assets/polriTv.png" className="w-20 lg:max-w-screen-lg h-10 flex-auto " />
</a>
</div>
<select className="bg-transparent dark:text-white text-black border-none focus:outline-none" defaultValue="Indonesia">
@ -159,27 +147,27 @@ const Navbar = () => {
</svg>
</a>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="p-0 rounded-md overflow-hidden">
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
<span className="text-default-700c flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuContent align="start" className="p-0 rounded-md overflow-hidden">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/video/filter", String(locale)))} className="flex items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3">
<FiYoutube className="mr-2" />
Audio Visual
</span>
</DropdownMenuItem>
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/audio/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3">
<FiMusic className="mr-2" />
Audio
</span>
</DropdownMenuItem>
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/image/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3">
<FiImage className="mr-2" />
Foto
</span>
</DropdownMenuItem>
<DropdownMenuItem className="flex items-center gap-1.5 p-2 border-b text-default-600 group focus:bg-default focus:text-primary-foreground rounded-none group">
<span className="text-default-700 flex flex-row justify-center items-center group-hover:text-primary-foreground">
<DropdownMenuItem onClick={() => router.push(generateLocalizedPath("/document/filter", String(locale)))} className="flex place-items-start gap-1.5 p-2 hover:bg-white">
<span className="text-slate-600 hover:text-[#bb3523] flex flex-row justify-center items-center p-3">
<FiFile className="mr-2" />
Teks
</span>
@ -223,9 +211,8 @@ const Navbar = () => {
<option>Indonesia</option>
<option>English</option>
</select>
<div className="relative">
<input type="text" placeholder="Pencarian" className="pl-8 pr-4 py-1 border rounded-full text-sm text-gray-600 focus:outline-none w-full" />
<span className="absolute left-2 top-1/2 transform -translate-y-1/2 text-gray-500">🔍</span>
<div className="px-4 py-1 w-24">
<input type="text" placeholder="Pencarian" className="border rounded-full text-sm text-gray-600" />
</div>
<div className="flex flex-col space-y-2">
<button className="w-full px-4 py-1 bg-[#bb3523] text-white font-semibold rounded-md hover:bg-red-700 md:flex">Masuk</button>

117
components/landing-page/NewsBottom.tsx
View File

@ -1,117 +0,0 @@
import React, { useEffect, useRef, useState } from "react";
import NewsTicker from "react-advanced-news-ticker"
import { CarouselItem } from "../ui/carousel";
// Definisikan tipe data untuk carousel item
interface CarouselItem {
id: number;
title: string;
name?: string;
slug: string;
fileType?: {
id: number;
};
createdAt: string;
}
const NewsBottom: React.FC = () => {
const [content, setContent] = useState<CarouselItem[]>([]);
const newsTickerRef = useRef<any>(null);
useEffect(() => {
async function fetchCarouselData() {
try {
const response = await CarouselItem();
setContent(response.data?.data || []);
console.log("Carousel data:", response.data?.data);
} catch (error) {
console.error("Error fetching carousel data:", error);
}
}
fetchCarouselData();
}, []);
function formatDateIndonesianWithTime(dateString: string): string {
const options: Intl.DateTimeFormatOptions = {
year: "numeric",
month: "long",
day: "numeric",
hour: "numeric",
minute: "numeric",
};
const formattedDate = new Date(dateString).toLocaleDateString("id-ID", options);
return formattedDate.replace("pukul", "-");
}
const dummyNews: CarouselItem[] = Array.from({ length: 10 }, (_, index) => ({
id: index + 1,
title: `Berita ${index + 1}`,
name: `Penulis ${index + 1}`,
slug: "",
createdAt: new Date().toISOString(),
}));
return (
<section className="section-news fixed-bottom">
<div className="breaking-news pt-3 pl-3">Breaking News</div>
<div className="news pt-3">
{content.length > 0 ? (
<NewsTicker
maxRows={1}
rowHeight={45}
duration={4000}
ref={newsTickerRef}
autoStart={true}
style={{ listStyleType: "none" }}
>
{content.map((item) => (
<div key={item.id} className="news-item">
<a
style={{ color: "black" }}
href={
Number(item.fileType?.id) === 1
? `/image/detail/${item.slug}`
: Number(item.fileType?.id) === 2
? `/video/detail/${item.slug}`
: Number(item.fileType?.id) === 3
? `/document/detail/${item.slug}`
: `/audio/detail/${item.slug}`
}
>
{item.title}.
</a>
<div>{formatDateIndonesianWithTime(item.createdAt)}</div>
</div>
))}
</NewsTicker>
) : (
<p className="pl-4">Loading...</p> // Tampilkan pesan "Loading..." saat data belum tersedia.
)}
</div>
<div className="navigation pr-0 mr-0">
<button
className="arrow-button left"
onClick={() => {
newsTickerRef.current?.moveDown();
}}
>
&#9664;
</button>
<button
className="arrow-button right"
onClick={() => {
newsTickerRef.current?.moveUp();
}}
>
&#9654;
</button>
</div>
</section>
);
};
export default NewsBottom;

28
components/landing-page/new-content.tsx
View File

@ -34,23 +34,35 @@ const NewContent = () => {
return (
<div className="px-4 lg:px-16 ">
<div className="mx-auto flex flex-col p-4">
<div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
<h2 className="flex items-center text-sm lg:text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
<div className="flex flex-col p-4">
<div className="mx-auto w-full max-w-7xl justify-start flex px-5 flex-col lg:flex-row gap-5 mb-4">
<h2 className="flex items-center text-sm lg:text-xl w-fit font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
<span className="text-black ">Konten </span> Terbaru
</h2>
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList>
<TabsTrigger value="video" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="video"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Audio Visual
</TabsTrigger>
<TabsTrigger value="audio" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="audio"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Audio
</TabsTrigger>
<TabsTrigger value="image" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="image"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Foto
</TabsTrigger>
<TabsTrigger value="teks" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="teks"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Teks
</TabsTrigger>
</TabsList>
@ -58,7 +70,7 @@ const NewContent = () => {
</div>
<div className="px-10">
{selectedTab == "video" ? (
<Carousel>
<Carousel className="w-full max-w-7xl mx-auto">
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">

39
components/landing-page/popular-content.tsx
View File

@ -2,9 +2,10 @@ import React, { useState } from "react";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { useParams, usePathname, useRouter } from "next/navigation";
import { Icon } from "@iconify/react/dist/iconify.js";
import { textEllipsis } from "@/utils/globals";
import { generateLocalizedPath } from "@/utils/globals";
const dummyImage = [
{ id: 1, thumbnail: "/assets/banner-sample.png", date: "17 MEI 2024", title: "Kapolres Batam Berikan pengarahan pagi kepada para anggota dan staf yang terkait", time: "18.00 WIB" },
@ -31,26 +32,40 @@ const PopularContent = () => {
const [selectedTab, setSelectedTab] = useState("video");
const router = useRouter();
const pathname = usePathname();
const params = useParams();
const locale = params?.locale;
return (
<div className="px-4 lg:px-16">
<div className="mx-auto flex flex-col p-4">
<div className="flex px-10 flex-col lg:flex-row gap-5 mb-4">
<h2 className="flex items-center text-sm lg:text-xl font-bold bg-[#bb3523] px-4 py-1 rounded-lg text-white">
<span className="text-black ">Konten </span> Terbaru
<div className="flex flex-col p-4">
<div className="flex mx-auto px-5 w-full max-w-7xl justify-start flex-col lg:flex-row gap-5 mb-4">
<h2 className="flex items-center text-sm lg:text-xl font-bold w-fit bg-[#bb3523] px-4 py-1 rounded-lg text-white">
<span className="text-black ">Konten </span> Terpopuler
</h2>
<Tabs value={selectedTab} onValueChange={setSelectedTab}>
<TabsList>
<TabsTrigger value="video" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="video"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Audio Visual
</TabsTrigger>
<TabsTrigger value="audio" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="audio"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Audio
</TabsTrigger>
<TabsTrigger value="image" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="image"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Foto
</TabsTrigger>
<TabsTrigger value="teks" className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary">
<TabsTrigger
value="teks"
className="relative text-sm md:text-xl font-bold text-black dark:text-white dark:bg-transparent before:absolute before:top-full before:left-0 before:h-px before:w-full data-[state=active]:before:bg-primary"
>
Teks
</TabsTrigger>
</TabsList>
@ -58,17 +73,17 @@ const PopularContent = () => {
</div>
<div className="px-10">
{selectedTab == "video" ? (
<Carousel>
<Carousel className="w-full max-w-7xl mx-auto">
<CarouselContent>
{dummyImage.map((image) => (
<CarouselItem key={image.id} className="md:basis-1/2 lg:basis-1/3">
<img src={image.thumbnail} className="h-60 object-cover w-full items-center justify-center cursor-pointer" />
<div className="flex flex-row items-center gap-2">
<Link href={generateLocalizedPath("/video/detail", String(locale))} className="flex flex-row items-center gap-2">
{image.date} {image.time} | <Icon icon="formkit:eye" width="15" height="15" /> 518{" "}
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20">
<path fill="#f00" d="M7.707 10.293a1 1 0 1 0-1.414 1.414l3 3a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L11 11.586V6h5a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h5v5.586zM9 4a1 1 0 0 1 2 0v2H9z" />
</svg>{" "}
</div>
</Link>
<div className="font-semibold w-fit">{image.title}</div>
</CarouselItem>
))}

0
components/landing-page/SearchSection.tsx → components/landing-page/search-section.tsx
View File

4
components/ui/carousel.tsx
View File

@ -206,7 +206,7 @@ const CarouselPrevious = React.forwardRef<
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
"absolute h-6 w-6 rounded-full",
orientation === "horizontal"
? "-left-12 top-1/2 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
@ -235,7 +235,7 @@ const CarouselNext = React.forwardRef<
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
"absolute h-6 w-6 rounded-full",
orientation === "horizontal"
? "-right-12 top-1/2 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",

134
components/ui/dropdown-menu.tsx
View File

@ -1,49 +1,41 @@
"use client"
"use client";
import * as React from "react"
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle } from "lucide-react"
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check, ChevronRight, Circle } from "lucide-react";
import { cn } from "@/lib/utils"
import { cn } from "@/lib/utils";
const DropdownMenu = DropdownMenuPrimitive.Root
const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuGroup = DropdownMenuPrimitive.Group
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuPortal = DropdownMenuPrimitive.Portal
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
const DropdownMenuSub = DropdownMenuPrimitive.Sub
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
const DropdownMenuSubTrigger = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
inset?: boolean
inset?: boolean;
}
>(({ className, inset, children, ...props }, ref) => (
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-secondary data-[state=open]:bg-secondary",
inset && "ps-8",
className
)}
className={cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-secondary data-[state=open]:bg-secondary", inset && "ps-8", className)}
{...props}
>
{children}
<ChevronRight className="ms-auto h-4 w-4" />
</DropdownMenuPrimitive.SubTrigger>
))
DropdownMenuSubTrigger.displayName =
DropdownMenuPrimitive.SubTrigger.displayName
));
DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
const DropdownMenuSubContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
>(({ className, ...props }, ref) => (
const DropdownMenuSubContent = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.SubContent>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.SubContent
ref={ref}
className={cn(
@ -52,14 +44,10 @@ const DropdownMenuSubContent = React.forwardRef<
)}
{...props}
/>
))
DropdownMenuSubContent.displayName =
DropdownMenuPrimitive.SubContent.displayName
));
DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
const DropdownMenuContent = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
@ -71,31 +59,24 @@ const DropdownMenuContent = React.forwardRef<
{...props}
/>
</DropdownMenuPrimitive.Portal>
))
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
inset?: boolean
inset?: boolean;
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-secondary focus:text-secondary-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "ps-8",
className
)}
className={cn("relative flex cursor-default select-none items-start rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "ps-8", className)}
{...props}
/>
))
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
const DropdownMenuCheckboxItem = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
@ -112,14 +93,10 @@ const DropdownMenuCheckboxItem = React.forwardRef<
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
))
DropdownMenuCheckboxItem.displayName =
DropdownMenuPrimitive.CheckboxItem.displayName
));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuRadioItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
>(({ className, children, ...props }, ref) => (
const DropdownMenuRadioItem = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>>(({ className, children, ...props }, ref) => (
<DropdownMenuPrimitive.RadioItem
ref={ref}
className={cn(
@ -135,51 +112,26 @@ const DropdownMenuRadioItem = React.forwardRef<
</span>
{children}
</DropdownMenuPrimitive.RadioItem>
))
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
));
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
inset?: boolean
inset?: boolean;
}
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
>(({ className, inset, ...props }, ref) => <DropdownMenuPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props} />);
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
const DropdownMenuSeparator = React.forwardRef<React.ElementRef<typeof DropdownMenuPrimitive.Separator>, React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
const DropdownMenuShortcut = ({
className,
...props
}: React.HTMLAttributes<HTMLSpanElement>) => {
return (
<span
className={cn("ms-auto text-xs tracking-widest opacity-60", className)}
{...props}
/>
)
}
DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
return <span className={cn("ms-auto text-xs tracking-widest opacity-60", className)} {...props} />;
};
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
export {
DropdownMenu,
@ -197,4 +149,4 @@ export {
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}
};

996
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -131,7 +131,7 @@
"@types/jquery": "^3.5.32",
"@types/leaflet": "^1.9.12",
"@types/node": "^20",
"@types/react": "^18",
"@types/react": "^18.3.13",
"@types/react-dom": "^18",
"@types/react-geocode": "^0.2.4",
"@types/rtl-detect": "^1.0.3",