60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import { VenueListItemFragment } from "@/gql/graphql";
|
|
import styles from "./venueItem.module.scss";
|
|
import Link from "next/link";
|
|
import { Image } from "@/components/general/Image";
|
|
|
|
export const VenueItem = ({
|
|
venue,
|
|
priority,
|
|
}: {
|
|
venue: VenueListItemFragment;
|
|
// above the fold: load the image right away
|
|
priority?: boolean;
|
|
}) => {
|
|
const featuredImage: any = venue.featuredImage;
|
|
|
|
const { capacitySitting, capacityStanding, usedFor } = venue;
|
|
let capacity = null;
|
|
if (
|
|
!isNaN(Number(capacitySitting)) &&
|
|
capacitySitting &&
|
|
!isNaN(Number(capacityStanding)) &&
|
|
capacityStanding
|
|
) {
|
|
capacity = `${capacitySitting}—${capacityStanding}`;
|
|
}
|
|
|
|
return (
|
|
<li className={`${styles.venueItem} linkItem`}>
|
|
<div className={styles.image}>
|
|
{featuredImage && (
|
|
<Image
|
|
src={featuredImage.url}
|
|
alt={featuredImage.alt}
|
|
width={0}
|
|
height={0}
|
|
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 35vw"
|
|
loading={priority ? "eager" : undefined}
|
|
fetchPriority={priority ? "high" : undefined}
|
|
/>
|
|
)}
|
|
</div>
|
|
<div className={styles.text}>
|
|
<h1 className={styles.title}>{venue.title}</h1>
|
|
{(capacity || usedFor) && (
|
|
<div className={styles.details}>
|
|
<strong>Passer for:</strong>
|
|
<ul>
|
|
{capacity && <li>{capacity} personer</li>}
|
|
{usedFor && <li>{usedFor}</li>}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
|
|
Mer om lokalet {venue.title}
|
|
</Link>
|
|
</li>
|
|
);
|
|
};
|