Untitled

import './Categories.css'
import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {faChevronLeft} from '@fortawesome/free-solid-svg-icons';
import {useParams} from 'react-router-dom'
import objects from './Items.json'
import {card2} from './Home';

export default function Categories(){
    // /categories/:item stored as a variable
    const params = useParams();
    const item = params.item;

    
    const filterByCategory = (prop) => {
        const filteredObj = objects.items.filter((item) => 
        item["category"] === prop
        )
        return filteredObj;
    }
    return (
        <>
            <div className="categories-container">
                <div className="category-list">
                    <div className="title-header">
                        <div className="link">
                            <Link to="/"><FontAwesomeIcon icon={faChevronLeft} className="link-size"/>Home</Link>
                        </div>
                        <h3>
                        {item}
                        </h3>
                    
                    </div>
                </div>
                <div className="filter-list">
                    <div className="filter-button"><Link to ="/Categories/all">All</Link></div>
                    <div className="filter-button"><Link to ="/Categories/furniture">Furniture</Link></div>
                    <div className="filter-button"><Link to ="/Categories/antique">Antique</Link></div>
                    <div className="filter-button"><Link to ="/Categories/kitchen">Kitchen</Link></div>
                    <div className="filter-button"><Link to ="/Categories/electronics">Electronics</Link></div>
                    <div className="filter-button"><Link to ="/Categories/tools">Tools</Link></div>
                </div>
            </div>
            <div className="categories-container">      
                <div className="items-container">
                    <div className="items-list">

                            {item === "all" ?
                            objects.items.map((current, index) => 
                            
                            <div className="item" key={index}>
                                {card2(current)}
                            </div>
                            )
                            :filterByCategory(item).map((current, index) =>
                            <div className="item" key={index}>
                                {card2(current)}
                            
                            </div>
                            )}   
                    </div>
                </div>
            </div>
        </>
    )
}

...

other info related...

export const card2 = (obj) => {
    return(
    <>
        <div className="image" style={{background: `url(${obj["image"]})`, backgroundSize: 'cover',  width: '100%'}}></div>
        <div className="description">
            
            <h1>{obj["name"]}</h1>
            <p>{obj["price"]} $</p>
        </div>
    </>
    );
}

css

.filter-list{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    width: 100%;
    flex-shrink: 0;
}

.filter-button{
    background-color: initial;
    border: 2px solid rgba(0,0,0,.3);
    padding: 0.6rem 1.6rem;
    transition: .2s;
    cursor: pointer;
}

.items-container{
    padding: 11rem 0;
}

.items-list{
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    grid-template-columns: repeat(4, 1fr);
}

.item{
    height: 300px;
    cursor: pointer;
    outline: 2px solid rgba(0,0,0,.205);
    outline-offset: -2px;
    transition: all .15s ease-in;
}