116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
"use client"
|
|
|
|
import { ArrowLeftIcon, ChevronLeft } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useRouter } from "next/navigation"
|
|
import {
|
|
Drawer,
|
|
DrawerClose,
|
|
DrawerContent,
|
|
DrawerDescription,
|
|
DrawerFooter,
|
|
DrawerHeader,
|
|
DrawerTitle,
|
|
DrawerTrigger,
|
|
} from "@/components/ui/drawer"
|
|
import {
|
|
Sheet,
|
|
SheetClose,
|
|
SheetContent,
|
|
SheetDescription,
|
|
SheetFooter,
|
|
SheetHeader,
|
|
SheetTitle,
|
|
SheetTrigger,
|
|
} from "@/components/ui/sheet"
|
|
import { Button } from "@/components/ui/button"
|
|
import Image from "next/image"
|
|
|
|
const dummy = [
|
|
{ url: "/sample-1.jpg" },
|
|
{ url: "/sample-2.jpg" },
|
|
{ url: "/sample-3.jpg" },
|
|
{ url: "/sample-4.jpg" },
|
|
{ url: "/sample-1.jpg" },
|
|
{ url: "/sample-2.jpg" },
|
|
{ url: "/sample-3.jpg" },
|
|
{ url: "/sample-4.jpg" },
|
|
{ url: "/sample-1.jpg" },
|
|
]
|
|
|
|
export default function Etle() {
|
|
const router = useRouter()
|
|
return (
|
|
<div className="flex flex-col">
|
|
<div className="flex h-[8vh] flex-row items-center gap-10 bg-[#0057B3] px-8 py-5">
|
|
<Link href="/dashboard">
|
|
<ArrowLeftIcon />
|
|
</Link>
|
|
<p className="text-2xl font-semibold">ETLE Toll</p>
|
|
</div>
|
|
<div className="flex h-[92vh] flex-col items-start gap-5 bg-gray-200 p-8 text-black">
|
|
<p className="text-2xl font-semibold">TRAFFIC VIOLATIONS</p>
|
|
<Image
|
|
src={"/sample-1.jpg"}
|
|
width={1280}
|
|
height={960}
|
|
alt={"main-image"}
|
|
className="w-screen rounded-lg md:w-full xl:w-180"
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
className="h-12 bg-white px-10 text-xl shadow-sm"
|
|
>
|
|
D1234PZ
|
|
</Button>
|
|
<p className="text-2xl font-semibold">VIOLATIONS</p>
|
|
<p>
|
|
Plat yang terdeteksi berangka D1234PZ di 2026-01-08 jam 17:55:26
|
|
berada di jalur 2
|
|
</p>
|
|
</div>
|
|
<Drawer direction="right">
|
|
<DrawerTrigger asChild>
|
|
<Button className="fixed top-1/2 right-0 h-20 w-6 -translate-y-1/2 cursor-pointer rounded-none rounded-l-md bg-white">
|
|
<ChevronLeft />
|
|
</Button>
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<div className="no-scrollbar space-y-3 overflow-y-auto bg-[#CBCBCBCC] px-4 py-4 text-black">
|
|
<div className="rounded-lg bg-white p-3 text-lg">
|
|
Total Image: 10
|
|
</div>{" "}
|
|
{dummy.map((item, index) => (
|
|
<div key={index} className="rounded-lg bg-white p-3 text-lg">
|
|
<Image
|
|
src={item.url}
|
|
width={1280}
|
|
height={960}
|
|
alt={"image" + index}
|
|
className="rounded-lg"
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
{/* <Sheet>
|
|
<SheetTrigger asChild>
|
|
<Button className="fixed top-1/2 right-0 h-20 w-6 -translate-y-1/2 rounded-l-md">
|
|
<ChevronLeft />
|
|
</Button>
|
|
</SheetTrigger>
|
|
<SheetContent>
|
|
<div className="grid flex-1 auto-rows-min gap-6 bg-[#CBCBCBCC] px-4 py-10 text-black">
|
|
<div className="flex flex-col gap-4">
|
|
<div className="rounded-lg bg-white p-3 text-lg">
|
|
Total Image: 10
|
|
</div>{" "}
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet> */}
|
|
</div>
|
|
)
|
|
}
|