Filter Component - Copy this React, Tailwind Component to your project

Import React, { useState } from 'react'; const ComponentFilter = () => { const [selectedFilters, setSelectedFilters] = useState({ cost: [], categories: [], }); const costOptions = ['Có phí', 'Miễn phí']; const categoryOptions = [ 'Tin học văn phòng', 'Lập trình', 'Thiết kế game', 'Phân tích dữ liệu', 'Tài chính', 'Kế toán', 'Hành chính nhân sự', 'Business', 'Xây dựng', 'Marketing', 'Kỹ năng mềm', 'Ngoại ngữ', 'Sale', 'Kỹ năng lãnh đạo', 'Ứng dụng AI', ]; const handleCheckboxChange = (type, value) => { setSelectedFilters((prevFilters) => { const updatedFilters = { ...prevFilters }; const currentFilterValues = updatedFilters[type]; if (currentFilterValues.includes(value)) { updatedFilters[type] = currentFilterValues.filter((item) => item !== value); } else { updatedFilters[type] = [...currentFilterValues, value]; } return updatedFilters; }); }; return ( <div className="w full p 4"> <h2 className="text lg font semibold mb 4">Bộ lọc</h2> {/* Lọc theo giá khóa học */} <div className="mb 4"> <h3 className="font medium mb 2">Giá khóa học</h3> {costOptions.map((option) => ( <label key={option} className="flex items center mb 2"> <input type="checkbox" className="form checkbox h 4 w 4 text blue 600" checked={selectedFilters.cost.includes(option)} onChange={() => handleCheckboxChange('cost', option)} /> <span className="ml 2 text gray 700">{option}</span> </label> ))} </div> {/* Lọc theo danh mục */} <div className="mb 4"> <h3 className="font medium mb 2">Danh mục</h3> {categoryOptions.map((category) => ( <label key={category} className="flex items center mb 2"> <input type="checkbox" className="form checkbox h 4 w 4 text blue 600" checked={selectedFilters.categories.includes(category)} onChange={() => handleCheckboxChange('categories', category)} /> <span className="ml 2 text gray 700">{category}</span> </label> ))} </div> {/* Nút reset bộ lọc */} <div className="mt 4"> <button onClick={() => setSelectedFilters({ cost: [], categories: [] })} className="text blue 500 hover:text blue 700" > Đặt lại </button> </div> </div> ); }; export default ComponentFilter;