feat : navbar position mobile version and page image detail
This commit is contained in:
parent
7cb01e90fb
commit
610e56c7af
|
|
@ -2,6 +2,7 @@
|
|||
import React, { useState } from "react";
|
||||
import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
|
||||
const dummyImage = [
|
||||
{ id: 1, thumbnail: "/assets/banner-sample.png" },
|
||||
|
|
@ -12,8 +13,22 @@ const dummyImage = [
|
|||
{ id: 6, thumbnail: "https://mediahub.polri.go.id/api/media/categories/view-thumbnail?id=93¤tMilis=1732769540018" },
|
||||
];
|
||||
|
||||
const categories = [
|
||||
{ id: 1, title: "HUT HUMAS KE - 73" },
|
||||
{ id: 2, title: "OPERASI ZEBRA 2024" },
|
||||
{ id: 3, title: "PON XXI" },
|
||||
{ id: 4, title: "OPS LILIN NATARU 2024" },
|
||||
{ id: 5, title: "HUT HUMAS KE - 72" },
|
||||
{ id: 6, title: "OPS MANTAP PRAJA & PILKADA" }
|
||||
]
|
||||
|
||||
const formatPicture = [
|
||||
{ id: 1, title: "PNG" },
|
||||
{ id: 2, title: "JPEG" },
|
||||
{ id: 3, title: "JPG" },
|
||||
]
|
||||
|
||||
const FilterPage = () => {
|
||||
const [selectedTab, setSelectedTab] = useState("video");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col">
|
||||
|
|
@ -60,22 +75,39 @@ const FilterPage = () => {
|
|||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-700">Kategori</h3>
|
||||
<ul className="mt-2 space-y-2">
|
||||
{["HUT HUMAS KE - 73", "OPERASI ZEBRA 2024", "PON XXI", "OPS LILIN NATARU 2024", "HUT HUMAS KE - 72", "OPS MANTAP PRAJA & PILKADA"].map((category) => (
|
||||
<li key={category}>
|
||||
{categories.map((category) => (
|
||||
<li key={category?.id}>
|
||||
<label className="inline-flex items-center">
|
||||
<input type="checkbox" className="form-checkbox text-red-500 rounded" />
|
||||
<span className="ml-2 text-gray-700">{category}</span>
|
||||
<Checkbox id="terms" />
|
||||
<span className="ml-2 text-gray-700">{category.title}</span>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{/* Garis */}
|
||||
<div className="border-t border-black my-4"></div>
|
||||
{/* Garis */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-700">Format Foto</h3>
|
||||
<ul className="mt-2 space-y-2">
|
||||
{formatPicture.map((format) => (
|
||||
<li key={format?.id}>
|
||||
<label className="inline-flex items-center">
|
||||
<Checkbox id="terms" />
|
||||
<span className="ml-2 text-gray-700">{format.title}</span>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Konten Kanan */}
|
||||
<div className="flex-1">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<div className="flex flex-col items-end mb-4">
|
||||
<h2 className="text-lg font-semibold">Urutkan berdasarkan</h2>
|
||||
<select className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500">
|
||||
<option value="terbaru">Terbaru</option>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
import React, { useState } from "react";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
const LiputanWilayah: React.FC = () => {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [seeAllValue, setSeeAllValue] = useState(false);
|
||||
|
||||
const regions = [
|
||||
{ name: "Polda Metro Jaya", logo: "/assets/polda/polda-metro.png" },
|
||||
|
|
@ -42,7 +44,6 @@ const LiputanWilayah: React.FC = () => {
|
|||
{ name: "Internasional", logo: "/assets/polda/internasional.png" },
|
||||
];
|
||||
|
||||
const filteredRegions = regions.filter((region) => region.name.toLowerCase().includes(searchTerm.toLowerCase()));
|
||||
|
||||
return (
|
||||
<div className="max-w-screen-xl mx-auto px-4 py-6">
|
||||
|
|
@ -66,14 +67,32 @@ const LiputanWilayah: React.FC = () => {
|
|||
|
||||
{/* Grid Wilayah */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-7 lg:grid-cols-9 gap-6">
|
||||
{filteredRegions.map((region, index) => (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
{regions.map((region, index) =>
|
||||
!seeAllValue ? (
|
||||
index < 9 ? (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
) : (
|
||||
""
|
||||
)
|
||||
) : (
|
||||
<div key={index} className="flex flex-col items-center text-center group">
|
||||
<div className="relative w-20 h-20 rounded-full border-2 border-[#bb3523] overflow-hidden mb-2 flex items-center justify-center">
|
||||
<img src={region.logo} alt={region.name} className="w-3/4 h-3/4 object-contain group-hover:scale-110 transition-transform duration-300" />
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
<p className="text-md font-semibold">{region.name}</p>
|
||||
</div>
|
||||
))}
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
<div className="flex justify-center py-5">
|
||||
<Button onClick={() => setSeeAllValue(!seeAllValue)} className="bg-white hover:bg-[#bb3523] text-[#bb3523] hover:text-white border-2 border-[#bb3523]">
|
||||
Lihat Lebih Banyak
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,16 +13,24 @@ const Navbar = () => {
|
|||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<div className="bg-white dark:bg-black shadow-md">
|
||||
<div className="bg-white dark:bg-black shadow-md sticky top-0 z-50">
|
||||
<div className="flex items-center justify-between px-4 py-3 md:px-6">
|
||||
{/* Logo */}
|
||||
<a href="/" className="flex items-center space-x-2">
|
||||
<img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-20 h-10 md:w-60 md:h-32 flex" />
|
||||
<img src="/assets/mediahub-logo.gif" alt="Media Hub Logo" className="w-30 h-20 md:w-60 md:h-24 flex" />
|
||||
</a>
|
||||
|
||||
{/* Mobile Menu Toggle */}
|
||||
<button className="text-black size-20 h-10 w-10 md:hidden" onClick={() => setMenuOpen(!menuOpen)}>
|
||||
{menuOpen ? "✖" : "☰"}
|
||||
{menuOpen ? (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="#000" d="m13.41 12l4.3-4.29a1 1 0 1 0-1.42-1.42L12 10.59l-4.29-4.3a1 1 0 0 0-1.42 1.42l4.3 4.29l-4.3 4.29a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l4.29-4.3l4.29 4.3a1 1 0 0 0 1.42 0a1 1 0 0 0 0-1.42Z" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<path fill="#000" d="M4 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m0 6a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1m1 5a1 1 0 1 0 0 2h14a1 1 0 1 0 0-2z" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
|
|
|
|||
Loading…
Reference in New Issue