FiltersComponent

<div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
    <h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Filters</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Categories</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="category1" class="mr-2"> <label for="category1" class="text-gray-700 dark:text-gray-300">Electronics</label></li>
                <li><input type="checkbox" id="category2" class="mr-2"> <label for="category2" class="text-gray-700 dark:text-gray-300">Fashion</label></li>
                <li><input type="checkbox" id="category3" class="mr-2"> <label for="category3" class="text-gray-700 dark:text-gray-300">Home Appliances</label></li>
                <li><input type="checkbox" id="category4" class="mr-2"> <label for="category4" class="text-gray-700 dark:text-gray-300">Books</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Price Range</h3>
            <input type="range" class="w-full" min="0" max="1000" step="10" value="500">
            <div class="flex justify-between text-gray-700 dark:text-gray-300">
                <span>$0</span>
                <span>$1000</span>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Brands</h3>
            <ul class="mt-2">
                <li><input type="checkbox" id="brand1" class="mr-2"> <label for="brand1" class="text-gray-700 dark:text-gray-300">Brand A</label></li>
                <li><input type="checkbox" id="brand2" class="mr-2"> <label for="brand2" class="text-gray-700 dark:text-gray-300">Brand B</label></li>
                <li><input type="checkbox" id="brand3" class="mr-2"> <label for="brand3" class="text-gray-700 dark:text-gray-300">Brand C</label></li>
            </ul>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Ratings</h3>
            <ul class="mt-2">
                <li><input type="radio" id="rating1" name="rating" class="mr-2" value="5"> <label for="rating1" class="text-gray-700 dark:text-gray-300">5 Stars</label></li>
                <li><input type="radio" id="rating2" name="rating" class="mr-2" value="4"> <label for="rating2" class="text-gray-700 dark:text-gray-300">4 Stars</label></li>
                <li><input type="radio" id="rating3" name="rating" class="mr-2" value="3"> <label for="rating3" class="text-gray-700 dark:text-gray-300">3 Stars</label></li>
            </ul>
        </div>
    </div>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">Apply Filters</button>
</div>