edb/neuf-www
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add generic page header component, person section component with headings, ++

Browse Source
This commit is contained in:
elisejakob
2024-05-12 20:53:34 +02:00
parent bf2008c7be
commit 022ed8c143
9 changed files with 114 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/src/app/arrangementer/page.tsx
View File

@ -1,8 +1,8 @@
import { EventFragment, EventOccurrence } from "@/gql/graphql"; import { EventFragment, EventOccurrence } from "@/gql/graphql";
import { getClient } from "@/app/client"; import { getClient } from "@/app/client";
import { EventContainer } from "@/components/events/EventContainer"; import { EventContainer } from "@/components/events/EventContainer";
import { allEventsQuery } from "@/lib/event"; import { allEventsQuery } from "@/lib/event";
import { PageHeader } from "@/components/general/PageHeader";
export default async function Page() { export default async function Page() {
const { data, error } = await getClient().query(allEventsQuery, {}); const { data, error } = await getClient().query(allEventsQuery, {});
@ -10,9 +10,7 @@ export default async function Page() {
return ( return (
<main className="site-main" id="main"> <main className="site-main" id="main">
<section className="page-header"> <PageHeader heading="Dette skjer på Chateau Neuf" />
<h1>Arrangementer</h1>
</section>
<EventContainer events={events} /> <EventContainer events={events} />
</main> </main>
); );

5
web/src/app/lokaler/page.tsx
View File

@ -3,6 +3,7 @@ import { VenueFragment } from "@/gql/graphql";
import { getClient } from "@/app/client"; import { getClient } from "@/app/client";
import { VenueList } from "@/components/venues/VenueList"; import { VenueList } from "@/components/venues/VenueList";
import Link from "next/link"; import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
const VenueFragmentDefinition = graphql(` const VenueFragmentDefinition = graphql(`
fragment Venue on VenuePage { fragment Venue on VenuePage {
@ -54,13 +55,11 @@ export default async function Page() {
return ( return (
<main className="site-main" id="main"> <main className="site-main" id="main">
<section className="page-header"> <PageHeader heading="Lokaler" />
<h1>Lokaler</h1>
<p className="lead"> <p className="lead">
Her kan vi presentere lokalene på Chateau Neuf, og eventuelt henvise Her kan vi presentere lokalene på Chateau Neuf, og eventuelt henvise
videre til undersiden om <Link href="/utleie">utleie</Link>. videre til undersiden om <Link href="/utleie">utleie</Link>.
</p> </p>
</section>
<VenueList venues={venues} /> <VenueList venues={venues} />
</main> </main>
); );

17
web/src/app/page.tsx
View File

@ -6,6 +6,7 @@ import { Body } from "@/components/general/Body";
import Image from "next/image"; import Image from "next/image";
import { PersonList } from "@/components/people/PersonList"; import { PersonList } from "@/components/people/PersonList";
import { NewsList } from "@/components/news/NewsList"; import { NewsList } from "@/components/news/NewsList";
import { PersonSection } from "@/components/people/PersonSection";
export default async function Home() { export default async function Home() {
const homeQuery = graphql(` const homeQuery = graphql(`
@ -24,20 +25,8 @@ export default async function Home() {
<FeaturedEvents events={events} /> <FeaturedEvents events={events} />
<blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote> <blockquote>«Hvor Glæden hersker, er alltid Fest»</blockquote>
<NewsList /> <NewsList />
<div> <PersonSection heading="Styret" />
<h2>Styret</h2> <PersonSection heading="Administrasjonen" />
<PersonList />
</div>
<div>
<h2>Administrasjonen</h2>
<PersonList />
</div>
<p className="lead">
Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
lacus vulputate. Nulla sed finibus diam.
</p>
<Body />
</div> </div>
</main> </main>
); );

60
web/src/app/utleie/page.tsx Normal file
View File

@ -0,0 +1,60 @@
import { graphql } from "@/gql";
import { VenueFragment } from "@/gql/graphql";
import { getClient } from "@/app/client";
import { VenueList } from "@/components/venues/VenueList";
import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
const VenueFragmentDefinition = graphql(`
fragment Venue on VenuePage {
__typename
id
slug
title
body {
id
blockType
field
... on RichTextBlock {
rawValue
value
}
}
featuredImage {
url
width
height
}
showAsBookable
floor
preposition
capabilityAudio
capabilityAudioVideo
capabilityBar
capabilityLighting
capacityLegal
capacityStanding
capacitySitting
}
`);
export default async function Page() {
const allVenuesQuery = graphql(`
query allVenues {
venues: pages(contentType: "venues.VenuePage") {
... on VenuePage {
...Venue
}
}
}
`);
const { data, error } = await getClient().query(allVenuesQuery, {});
const venues = (data?.venues ?? []) as VenueFragment[];
return (
<main className="site-main" id="main">
<PageHeader heading="Utleie" />
<VenueList venues={venues} />
</main>
);
}

10
web/src/components/general/PageHeader.tsx Normal file
View File

@ -0,0 +1,10 @@
import styles from "./pageHeader.module.scss";
export const PageHeader = ({ heading }: { heading: string }) => {
return (
<div className={styles.pageHeader}>
<h1 className={styles.title}>{heading}</h1>
<p className="lead">Lead</p>
</div>
);
};

3
web/src/components/general/pageHeader.module.scss Normal file
View File

@ -0,0 +1,3 @@
.pageHeader {
position: relative;
}

4
web/src/components/layout/Header.tsx
View File

@ -24,7 +24,7 @@ export const Header = () => {
<Link href="/">Praktisk info</Link> <Link href="/">Praktisk info</Link>
</li> </li>
<li> <li>
<Link href="/">Utleie</Link> <Link href="/utleie">Utleie</Link>
</li> </li>
<li> <li>
<Link href="/">Bli medlem</Link> <Link href="/">Bli medlem</Link>
@ -45,7 +45,7 @@ export const Header = () => {
<Link href="/">Praktisk info</Link> <Link href="/">Praktisk info</Link>
</li> </li>
<li className={styles.menuItemLarge}> <li className={styles.menuItemLarge}>
<Link href="/">Utleie</Link> <Link href="/utleie">Utleie</Link>
</li> </li>
<li className={styles.menuItemLarge}> <li className={styles.menuItemLarge}>
<Link href="/">Bli medlem</Link> <Link href="/">Bli medlem</Link>

11
web/src/components/people/PersonSection.tsx Normal file
View File

@ -0,0 +1,11 @@
import { PersonList } from "./PersonList";
import styles from "./personSection.module.scss";
export const PersonSection = ({ heading }: { heading: string }) => {
return (
<section className={styles.personSection}>
<h2 className={styles.heading}>{heading}</h2>
<PersonList />
</section>
);
};

17
web/src/components/people/personSection.module.scss Normal file
View File

@ -0,0 +1,17 @@
.personSection {
background: var(--color-background-secondary);
margin: calc(var(--spacing-sitepadding)*2) calc(var(--spacing-sitepadding)*-1);
padding: var(--spacing-sitepadding);
+.personSection {
margin-top: calc(var(--spacing-sitepadding)*-2);
}
&:nth-of-type(even) {
background: var(--color-background);
}
}
.heading {
margin: 2rem 0;
}