100 lines
2.5 KiB
TypeScript
100 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronLeft } from "lucide-react";
|
|
|
|
export default function FilterAudioSidebar() {
|
|
return (
|
|
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
|
|
{/* HEADER */}
|
|
<div className="flex items-center justify-between pb-4 border-b">
|
|
<h3 className="font-semibold text-sm flex items-center gap-2">
|
|
Filter
|
|
</h3>
|
|
<ChevronLeft size={16} className="text-gray-400" />
|
|
</div>
|
|
|
|
{/* CONTENT */}
|
|
<div className="space-y-6 mt-6">
|
|
{/* KATEGORI */}
|
|
<FilterSection title="Kategori">
|
|
<Checkbox label="Semua" count={1203} defaultChecked />
|
|
<Checkbox label="Berita Terhangat" count={123} />
|
|
<Checkbox label="Tentang Teknologi" count={24} />
|
|
<Checkbox label="Bersama Pelanggan" count={42} />
|
|
<Checkbox label="Pembicara Ahli" count={224} />
|
|
</FilterSection>
|
|
|
|
<Divider />
|
|
|
|
{/* JENIS FILE */}
|
|
<FilterSection title="Jenis File">
|
|
<Checkbox label="Semua" count={78} />
|
|
<Checkbox label="Audio Visual" count={120} />
|
|
<Checkbox label="Audio" count={34} defaultChecked />
|
|
<Checkbox label="Foto" count={234} />
|
|
<Checkbox label="Teks" count={9} />
|
|
</FilterSection>
|
|
|
|
<Divider />
|
|
|
|
{/* FORMAT */}
|
|
<FilterSection title="Format Audio ">
|
|
<Checkbox label="Semua" count={2} defaultChecked />
|
|
</FilterSection>
|
|
|
|
{/* RESET */}
|
|
<div className="text-center pt-4">
|
|
<button className="text-sm text-[#966314] font-medium hover:underline">
|
|
Reset Filter
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ===== COMPONENTS ===== */
|
|
|
|
function FilterSection({
|
|
title,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div>
|
|
<p className="text-sm font-medium mb-3">{title}</p>
|
|
<div className="space-y-2">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Checkbox({
|
|
label,
|
|
count,
|
|
defaultChecked,
|
|
}: {
|
|
label: string;
|
|
count: number;
|
|
defaultChecked?: boolean;
|
|
}) {
|
|
return (
|
|
<label className="flex items-center justify-between text-sm cursor-pointer">
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
defaultChecked={defaultChecked}
|
|
className="h-4 w-4 accent-[#966314]"
|
|
/>
|
|
<span>{label}</span>
|
|
</div>
|
|
<span className="text-gray-400">({count})</span>
|
|
</label>
|
|
);
|
|
}
|
|
|
|
function Divider() {
|
|
return <div className="border-t border-gray-200"></div>;
|
|
}
|