Untitled
unknown
jsx
a year ago
2.3 kB
3
Indexable
Never
import React, { useEffect, useState } from "react"; import styles from "./productdisplaygridfilter.module.scss"; import Container from "@/components/atoms/Container"; import Card from "@/components/molecules/Card"; import StandardCardBody from "@/components/molecules/StandardCardBody"; import FilterButton from "@/components/atoms/FilterButton"; const ProductDisplayGridFilter = ({ data }) => { const [category, setCategory] = useState("All"); const [results, setResults] = useState(data.cards); useEffect(() => { console.log(results); setResults( data.cards.filter((card) => { if (category !== "All" && category !== card.body.category) { return false; } return card; }) ); }, [category]); return ( <Container type="content" className={styles.component}> <section className={styles.filterButtons}> {data && data?.categories?.map((category) => ( <FilterButton key={category?.id} onClick={() => setCategory(category?.category)}> <p>{category?.category}</p> </FilterButton> ))} </section> <div className={styles.grid}> {results && results.map((card) => card?.image.landscape ? ( <div className={styles.grid_card_landscape} key={card.image.src}> <Card image={card?.image} body={<StandardCardBody content={card?.body} />} className={styles.grid_card_image_landscape} /> </div> ) : ( <div className={styles.grid_card} key={card.image.src}> <Card image={card?.image} body={<StandardCardBody content={card?.body} />} className={styles.grid_card_image} /> </div> ) )} {results.length <= 0 && <p>No items were found...</p>} </div> {data && data.cards.length >= 6 ? ( <div className={styles.loadMore}> <div className={styles.loadMore_button}> <button type="button">Load more</button> </div> </div> ) : null} </Container> ); }; export default ProductDisplayGridFilter;