78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import type { Producer } from "@/data/home";
|
|
import styles from "./ProducerCard.module.css";
|
|
|
|
function isRemoteSrc(src: string) {
|
|
return src.startsWith("http://") || src.startsWith("https://");
|
|
}
|
|
|
|
export default function ProducerCard({ producer }: { producer: Producer }) {
|
|
return (
|
|
<article className={styles.card}>
|
|
<Link href={`/businesses/${producer.slug}`} className={styles.link}>
|
|
<div className={styles.coverWrap}>
|
|
{isRemoteSrc(producer.cover) ? (
|
|
<img
|
|
src={producer.cover}
|
|
alt=""
|
|
className={styles.cover}
|
|
/>
|
|
) : (
|
|
<Image
|
|
src={producer.cover}
|
|
alt=""
|
|
fill
|
|
className={styles.cover}
|
|
sizes="(max-width: 720px) 100vw, (max-width: 1100px) 50vw, 430px"
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={`tile-hover ${styles.body}`}>
|
|
<div className={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>
|
|
{producer.tagline ? (
|
|
<p className={styles.tagline}>{producer.tagline}</p>
|
|
) : null}
|
|
</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>
|
|
{producer.description ? (
|
|
<p className={styles.description}>{producer.description}</p>
|
|
) : null}
|
|
<div className={styles.rule} />
|
|
<div className={styles.footerRow}>
|
|
<span className={styles.tag}>{producer.category}</span>
|
|
<img
|
|
className={styles.rowArrow}
|
|
src="/images/icons/chevron.svg"
|
|
alt=""
|
|
width={8}
|
|
height={14}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</article>
|
|
);
|
|
}
|