1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
39 lines
1.6 KiB
TypeScript
39 lines
1.6 KiB
TypeScript
import { site } from "@/content/site";
|
|
import { Section } from "@/components/layout/Section";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import Link from "next/link";
|
|
|
|
export function Venue() {
|
|
return (
|
|
<Section id="venue" riftPattern="vein-left">
|
|
<div className="grid gap-8 lg:grid-cols-2">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-widest text-[#1f3d7e]">The venue</p>
|
|
<h2 className="mt-2 text-3xl font-bold">{site.venue.name}</h2>
|
|
<p className="mt-4 text-muted-foreground">{site.venue.address}</p>
|
|
<Button className="mt-6 rounded-full" variant="outline" asChild>
|
|
<Link href={site.venue.mapsUrl} target="_blank" rel="noopener noreferrer">
|
|
Open in Google Maps
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
<Card className="overflow-hidden p-0">
|
|
<CardHeader className="sr-only">
|
|
<CardTitle>Map</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<iframe
|
|
title="Venue map"
|
|
className="h-[320px] w-full border-0"
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
src={`https://www.openstreetmap.org/export/embed.html?bbox=${site.venue.lng - 0.02}%2C${site.venue.lat - 0.02}%2C${site.venue.lng + 0.02}%2C${site.venue.lat + 0.02}&layer=mapnik&marker=${site.venue.lat}%2C${site.venue.lng}`}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</Section>
|
|
);
|
|
}
|