{"size": 1391, "ext": "js", "max_stars_repo_path": "webapp/components/CategoryCards/index.js", "max_stars_repo_name": "Aarshi-Sapient/shopping-cart-assignment", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "webapp/components/CategoryCards/index.js", "max_issues_repo_name": "Aarshi-Sapient/shopping-cart-assignment", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "webapp/components/CategoryCards/index.js", "max_forks_repo_name": "Aarshi-Sapient/shopping-cart-assignment", "max_forks_repo_forks_event_min_datetime": "2021-08-09T15:40:44.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-24T11:36:27.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 3, "avg_line_length": 42.1515151515, "max_line_length": 136, "alphanum_fraction": 0.4895758447}
import styles from "./CategoryCards.module.css";
import classNames from "classnames";
import {Button} from "antd";
import { useRouter } from 'next/router';


export const CategoryCards = (props) => {
    const router = useRouter();
    const onClickExplore = (category_uid) => {
        router.push(`products/${category_uid}`)
    }
    return (
        <>
            {props.categories.map((category, index) => (
                <div className={classNames({
                    [styles["category-card-container"]]: index % 2 === 0,
                    [styles["category-card-container-reverse"]]: index % 2 !== 0
                })} key={category.key}>
                    <div>
                        <img src={category.temp_url} alt={category.key} style={{height: "25vh", width: "25vw"}}/>
                    </div>
                    <div className={styles["category-detail-container"]} >
                        <h1><b>{category.name}</b></h1>
                        <h5>{category.description}</h5>
                        <Button className={styles["explore-button"]} onClick={(e) => {onClickExplore(category.category_uid)}}>
                            <p style={{color: "white", fontSize: "1vw", marginTop: 0, marginBottom: 0}}>{`Explore ${category.name}`}</p>
                        </Button>
                    </div>
                </div>
            ))}
        </>
    )
}