51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { VenueFragment } from "@/gql/graphql";
|
|
import styles from "./venueItem.module.scss";
|
|
import Link from "next/link";
|
|
import { Image } from "@/components/general/Image";
|
|
|
|
export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
|
|
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="20vw"
|
|
/>
|
|
)}
|
|
</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>
|
|
);
|
|
};
|