Files
neuf-www/web/src/app/page.tsx
2024-06-24 01:15:00 +02:00

90 lines
2.6 KiB
TypeScript

import { graphql } from "@/gql";
import { EventFragment } from "@/lib/event";
import { NewsFragment } from "@/lib/news";
import { HomeFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { FeaturedEvents } from "@/components/events/FeaturedEvents";
import { NewsList } from "@/components/news/NewsList";
import { UpcomingEvents } from "@/components/events/UpcomingEvents";
import { Pig } from "@/components/general/Pig";
import Link from "next/link";
import Icon from "@/components/general/Icon";
const HomeFragmentDefinition = graphql(`
fragment Home on HomePage {
... on HomePage {
featuredEvents {
id
}
}
}
`);
export default async function Home() {
const homeQuery = graphql(`
query home {
events: eventIndex {
... on EventIndex {
futureEvents {
... on EventPage {
...Event
}
}
}
}
home: page(contentType: "home.HomePage", urlPath: "/home/") {
... on HomePage {
...Home
}
}
news: pages(contentType: "news.newsPage", limit: 4) {
... on NewsPage {
...News
}
}
}
`);
const { data, error } = await getClient().query(homeQuery, {});
const home = (data?.home ?? []) as HomeFragment;
const events = (data?.events?.futureEvents ?? []) as EventFragment[];
const news = (data?.news ?? []) as NewsFragment[];
const featuredEventIds = home.featuredEvents.map((x) => x.id);
const featuredEvents = [
...events.filter((x) => featuredEventIds.includes(x.id)),
...events.filter((x) => !featuredEventIds.includes(x.id)),
];
return (
<main className="site-main index" id="main">
<FeaturedEvents events={featuredEvents} />
<UpcomingEvents events={events} />
<div className="infoBlock">
<div>
<h2>Skal du besøke Chateau Neuf?</h2>
<p>
Vi hjelper deg med å finne frem, og sørger for at du har en fin
opplevelse
</p>
<Link href="/praktisk#adkomst" className="button">
<span>Adresse og adkomst</span>
<Icon />
</Link>
<Link href="/praktisk#adkomst" className="button">
<span>Billetter</span>
<Icon />
</Link>
<Link href="/praktisk#adkomst" className="button">
<span>Åpningstider</span>
<Icon />
</Link>
</div>
<div className="pig">
<Pig type="point" />
</div>
</div>
<NewsList heading="Siste nytt" limit={4} featured news={news} />
</main>
);
}