diff --git a/web/src/app/arrangementer/[slug]/page.tsx b/web/src/app/arrangementer/[slug]/page.tsx index 8cc6089..02079f8 100644 --- a/web/src/app/arrangementer/[slug]/page.tsx +++ b/web/src/app/arrangementer/[slug]/page.tsx @@ -3,6 +3,7 @@ import { EventFragment } from "@/gql/graphql"; import { getClient } from "@/app/client"; import { Blocks } from "@/components/blocks/Blocks"; import Image from "@/components/general/Image"; +import { EventHeader } from "@/components/events/EventHeader"; export async function generateStaticParams() { const allEventSlugsQuery = graphql(` @@ -39,25 +40,9 @@ export default async function Page({ params }: { params: { slug: string } }) { return (
-
-

{event.title}

- {event.featuredImage && ( - - )} -
+
-
Facebook: {event.facebookUrl}
-
Billettlenke: {event.ticketUrl}
-
Ordinær pris: {event.priceRegular}
-
Studentpris: {event.priceStudent}
-
Medlemspris: {event.priceMember}
); diff --git a/web/src/components/events/EventHeader.tsx b/web/src/components/events/EventHeader.tsx new file mode 100644 index 0000000..bf3faff --- /dev/null +++ b/web/src/components/events/EventHeader.tsx @@ -0,0 +1,35 @@ +import { EventFragment } from "@/gql/graphql"; +import styles from "./eventHeader.module.scss"; +import Image from "@/components/general/Image"; +import { Pig } from "../general/Pig"; + +export const EventHeader = ({ event }: { event: EventFragment }) => { + return ( +
+
+

{event.title}

+
+
Facebook: {event.facebookUrl}
+
Billettlenke: {event.ticketUrl}
+
Ordinær pris: {event.priceRegular}
+
Studentpris: {event.priceStudent}
+
Medlemspris: {event.priceMember}
+
+
+
+ {event.featuredImage && ( + + )} +
+ +
+
+
+ ); +}; diff --git a/web/src/components/events/eventHeader.module.scss b/web/src/components/events/eventHeader.module.scss new file mode 100644 index 0000000..a709789 --- /dev/null +++ b/web/src/components/events/eventHeader.module.scss @@ -0,0 +1,32 @@ +.eventHeader { + position: relative; + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: var(--spacing-gap-column); + align-items: flex-end; + padding: 0 0 var(--spacing-sitepadding) 0; +} + +.title { + font-size: var(--font-size-h1); +} + +.image { + grid-column: span 2; + + img { + max-width: 100%; + height: auto; + } +} + +.details { + font-family: var(--font-serif); +} + +.pig { + position: absolute; + bottom: -30%; + right: -2.5rem; + color: var(--color-white); +} \ No newline at end of file diff --git a/web/src/components/general/Pig.tsx b/web/src/components/general/Pig.tsx new file mode 100644 index 0000000..f8b9230 --- /dev/null +++ b/web/src/components/general/Pig.tsx @@ -0,0 +1,19 @@ +import styles from "./pig.module.scss"; +import { LogoPig } from "./pigs/LogoPig"; + +export const Pig = ({ + type, +}: { + type: + | "logo" + | "music" + | "point" + | "student" + | "dance" + | "listen" + | "drink" + | "guard" + | "peek"; +}) => { + return
{type === "logo" && }
; +}; diff --git a/web/src/components/general/pig.module.scss b/web/src/components/general/pig.module.scss new file mode 100644 index 0000000..0cb36af --- /dev/null +++ b/web/src/components/general/pig.module.scss @@ -0,0 +1,8 @@ +.pig { + color: var(--color-pig); + width: 16rem; + + svg { + width: 100%; + } +} \ No newline at end of file diff --git a/web/src/components/general/pigs/LogoPig.tsx b/web/src/components/general/pigs/LogoPig.tsx new file mode 100644 index 0000000..9277fbe --- /dev/null +++ b/web/src/components/general/pigs/LogoPig.tsx @@ -0,0 +1,50 @@ +export const LogoPig = () => { + return ( + + + + + + + + + + + + + + + + + + ); +};