244 lines
12 KiB
TypeScript
244 lines
12 KiB
TypeScript
"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";
|
||
|
||
const dummyImage = [
|
||
{ id: 1, thumbnail: "/assets/banner-sample.png" },
|
||
{ id: 2, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=125¤tMilis=1732769540018" },
|
||
{ id: 3, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=128¤tMilis=1732769540018" },
|
||
{ id: 4, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=127¤tMilis=1732769540018" },
|
||
{ id: 5, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" },
|
||
];
|
||
|
||
const DetailInfo = () => {
|
||
const [selectedSize, setSelectedSize] = useState<string>("L");
|
||
const [selectedTab, setSelectedTab] = useState("video");
|
||
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¤tMilis=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¤tMilis=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">MABES POLRI</span> | Diupdate pada 29/11/2024 11:15 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">Kotak Suara Bogor Tengah Dipastikan Aman Pasca Pencoblosan</h1>
|
||
<p className="flex justify-center text-center">
|
||
Kotak Suara Bogor Tengah Dipastikan Aman Pasca Pencoblosan Kota Bogot - Kapolresta Bogor Kota Kombes Bismo Teguh Prakoso melaksanakan pengecekan gudang logistik PPK Bogor Tengah di Gedung Wanita Jl. Jend. Soedirman Kota Bogor,
|
||
Kamis (28/11/2024). "Pengecekan ini untuk memastikan bahwa proses pergeseran Kotak Suara ke Kecamatan berjalan aman dan lancar serta situasi pasca pencoblosan kondusif dan proses pengiriman logistik pemilu 2024 dari PPS ke Gudang
|
||
penyimpanan Logistik PPK Bogor Tengah sudah selesai lengkap, lancar dan aman," ucapnya. Selanjutnya kotak suara di gudang Penyimpanan Logistik PPK dilakukan pengamanan selama 1x24 jam dari Personel Polsek Bogor Tengah. Kapolesta
|
||
Bogor Kota juga menekankan kepada personel yang berjaga di Gudang Logistik agar benar-benar memperhatikan keamanan kotak suara guna mengantisipasi adanya sabotase. "Dalam pengecekan tersebut ada beberapa hal yang di tekankan
|
||
diantaranya pada saat penghitungan yang masuk ke dalam ruangan wajib menggunakan id card, lembaran blangko yang sudah tidak terpakai harap di simpan dengan baik, pastikan kotak suara dalam keadaan aman dan lakukan patroli rutin di
|
||
sekitar gudang serta tetap waspada dan jaga kesehatan," pungkasnya.
|
||
</p>
|
||
</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(`${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>
|
||
)}
|
||
</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 DetailInfo;
|