Create Category Filters using React and Tailwind CSS

//App.js
import React, { useState } from "react";
import { FaMusic, FaLaptop, FaTshirt, FaMobileAlt } from "react-icons/fa";
import 'tailwindcss/tailwind.css';

const categories = [
    { name: "All", icon: null },
    { name: "Music", icon: <FaMusic /> },
    { name: "Tech", icon: <FaLaptop /> },
    { name: "Fashion", icon: <FaTshirt /> },
    { name: "Mobile", icon: <FaMobileAlt /> },
];

const items = [
    { id: 1, name: "Guitar", category: "Music" },
    { id: 2, name: "Laptop", category: "Tech" },
    { id: 3, name: "T-shirt", category: "Fashion" },
    { id: 4, name: "iPhone", category: "Mobile" },
    { id: 5, name: "Piano", category: "Music" },
    { id: 6, name: "Smartwatch", category: "Tech" },
    { id: 7, name: "Jeans", category: "Fashion" },
    { id: 8, name: "Headphones", category: "Music" },
];

function App() {
    const [selectedCategory, setSelectedCategory] = useState("All");

    const filterItems = () => {
        if (selectedCategory === "All") {
            return items;
        }
        return items.filter(item => item.category === selectedCategory);
    };

    return (
        <div className="container mx-auto p-5">
            <h1 className="text-3xl font-bold
                           mb-6 text-center">Category Filters</h1>

            <div className="flex justify-center space-x-4 mb-6">
                {categories.map(category => (
                    <button
                        key={category.name}
                        onClick={() => setSelectedCategory(category.name)}
                        className={`px-4 py-2 rounded-lg flex
                                    items-center 
                                    space-x-2 border ${selectedCategory === category.name
                                ? "bg-green-500 text-white"
                                : "bg-white text-black"
                            } hover:bg-green-300 transition`}
                    >
                        {category.icon && <span>{category.icon}</span>}
                        <span>{category.name}</span>
                    </button>
                ))}
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2
                            md:grid-cols-3 lg:grid-cols-4 gap-4">
                {filterItems().map(item => (
                    <div key={item.id} className="p-4 border rounded-lg
                                                  shadow-lg bg-slate-300">
                        <h2 className="text-xl font-semibold">{item.name}</h2>
                        <p className="text-gray-500">{item.category}</p>
                    </div>
                ))}
            </div>
        </div>
    );
}

export default App;

/*src/tailwind.congif.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./src/**/*.{js,jsx,ts,tsx}"],
    theme: {
        extend: {
            colors: {
                primaryGreen: "#4CAF50",  // Green
                primaryBlack: "#000000",  // Black
                primaryWhite: "#FFFFFF",  // White
            }
        },
    },
    plugins: [],
}