'use client'; import * as React from 'react'; import { RiArrowRightSLine, RiBankLine, RiCalendarLine, RiMoneyDollarCircleLine, RiPriceTag3Line, RiPriceTagLine, RiSearch2Line, RiUser6Line, } from '@remixicon/react'; import * as Button from './components/ui/button'; import * as Checkbox from './components/ui/checkbox'; import * as Divider from './components/ui/divider'; import * as Kbd from './components/ui/kbd'; import * as Label from './components/ui/label'; import * as Radio from './components/ui/radio'; import { cn } from './utils/cn'; const FILTER_TYPES = [ { icon: , label: 'Date' }, { icon: , label: 'Customers' }, { icon: , label: 'Amount' }, { icon: , label: 'Categories' }, { icon: , label: 'Accounts' }, ]; const CATEGORIES = [ { id: 'advertising', label: 'Advertising' }, { id: 'airlines', label: 'Airlines' }, { id: 'alcohol', label: 'Alcohol and Bard' }, ]; type FilterItemProps = { icon: React.ReactNode; label: string; active?: boolean; onClick?: () => void; }; type CategoryItemProps = { id: string; label: string; selected: boolean; onSelect: () => void; }; const FilterItem = ({ icon, label, active, onClick }: FilterItemProps) => ( ); const CategoryItem = ({ id, label, selected, onSelect }: CategoryItemProps) => { const checkboxId = React.useId(); return (

{label}

); }; const useCategoryFilter = () => { const [selectedCategories, setSelectedCategories] = React.useState( [], ); const [filterType, setFilterType] = React.useState('all'); const toggleCategory = (categoryId: string) => { if (selectedCategories.includes(categoryId)) { setSelectedCategories( selectedCategories.filter((id) => id !== categoryId), ); } else { setSelectedCategories([...selectedCategories, categoryId]); } }; const selectAll = () => { setSelectedCategories(CATEGORIES.map((category) => category.id)); }; const clearSelection = () => { setSelectedCategories([]); }; return { selectedCategories, toggleCategory, selectAll, clearSelection, filterType, setFilterType, }; }; export default function BlockFilter() { const [activeFilter, setActiveFilter] = React.useState('Categories'); const [searchQuery, setSearchQuery] = React.useState(''); const { selectedCategories, toggleCategory, selectAll, clearSelection, filterType, setFilterType, } = useCategoryFilter(); const handleFilterClick = (filter: string) => { setActiveFilter(filter); }; const filteredCategories = CATEGORIES.filter((category) => category.label.toLowerCase().includes(searchQuery.toLowerCase()), ); return (

{/* Sidebar */}

{FILTER_TYPES.map((item) => ( handleFilterClick(item.label)} /> ))}

{/* Content */}

{/* Header */}