67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { Producer } from "@/data/home";
|
|
import styles from "./ProducerCard.module.css";
|
|
|
|
export default function ProducerCard({ producer }: { producer: Producer }) {
|
|
const typeIcon =
|
|
producer.typeIcon === "cart"
|
|
? "/images/icons/cart.svg"
|
|
: "/images/icons/gear.svg";
|
|
|
|
return (
|
|
<article className={styles.card}>
|
|
<Link href={`/businesses/${producer.slug}`} className={styles.link}>
|
|
<div className={styles.coverWrap}>
|
|
<Image
|
|
src={producer.cover}
|
|
alt=""
|
|
fill
|
|
className={styles.cover}
|
|
sizes="(max-width: 720px) 100vw, (max-width: 1100px) 50vw, 430px"
|
|
/>
|
|
</div>
|
|
<div className={styles.body}>
|
|
<div className={`tile-hover ${styles.info}`}>
|
|
<div className={styles.identity}>
|
|
<img
|
|
className={`${styles.logo} ${producer.logoClass ? styles[producer.logoClass] : ""}`}
|
|
src={producer.logo}
|
|
alt=""
|
|
width={40}
|
|
height={33}
|
|
/>
|
|
<div>
|
|
<h3 className={styles.name}>{producer.name}</h3>
|
|
<p className={styles.tagline}>{producer.tagline}</p>
|
|
</div>
|
|
</div>
|
|
<div className={styles.meta}>
|
|
<p className={styles.products}>
|
|
<strong>{producer.products} </strong>
|
|
Products
|
|
</p>
|
|
<span className={styles.divider} />
|
|
<p className={styles.since}>
|
|
Since <strong>{producer.since}</strong>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p className={styles.description}>{producer.description}</p>
|
|
<div className={styles.rule} />
|
|
<div className={styles.tags}>
|
|
<span className={styles.tag}>
|
|
<img src={typeIcon} alt="" width={15} height={15} />
|
|
{producer.typeLabel}
|
|
</span>
|
|
<span className={styles.tag}>
|
|
<img src="/images/icons/home-outline.svg" alt="" width={16} height={16} />
|
|
{producer.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</article>
|
|
);
|
|
}
|