add accordion component

web/src/app/utleie/page.tsx

@@ -5,6 +5,7 @@ import { VenueList } from "@/components/venues/VenueList";
 import Link from "next/link";
 import { PageHeader } from "@/components/general/PageHeader";
 import { BgPig } from "@/components/general/BgPig";
+import { Accordion } from "@/components/blocks/Accordion";
 
 export default async function Page() {
   const allVenuesQuery = graphql(`
@@ -29,7 +30,11 @@ export default async function Page() {
           utdanningsinstitusjoner og andre. Vi har blant annet huset
           Spellemannsprisen og Dalai Lama!"
         />
+        <section>
           <p>Her kommer mer om utleiereglement etc.</p>
+          <Accordion heading="Utleiereglement" />
+          <Accordion heading="Test trekkspill" />
+        </section>
         <br />
         <br />
         <VenueList heading="Våre lokaler" venues={venues} />

web/src/components/blocks/Accordion.tsx

@@ -0,0 +1,20 @@
+"use client";
+import { useState } from "react";
+import styles from "./accordion.module.scss";
+
+export const Accordion = ({ heading }: any) => {
+  const [showContent, setShowContent] = useState(false);
+  function toggleContent() {
+    setShowContent(!showContent);
+  }
+  return (
+    <section className={styles.accordion} data-open={showContent}>
+      <div className={styles.accordionHeader} onClick={toggleContent}>
+        <span>{heading}</span>
+      </div>
+      <div className={styles.accordionContent}>
+        <p>Åpent trekkspill!</p>
+      </div>
+    </section>
+  );
+};

web/src/components/blocks/accordion.module.scss

@@ -0,0 +1,69 @@
+.accordion {
+  margin: var(--spacing-l) 0;
+  max-width: var(--size-width-p);
+  padding: 1rem 0;
+  border-top: var(--border-s);
+  border-bottom: var(--border-s);
+
+  +.accordion {
+    margin-top: calc(var(--spacing-l)*-1);
+    border-top: 0;
+  }
+
+  &[data-open=true] {
+    .accordionHeader {
+      &:before {
+        transform: rotate(-90deg);
+      }
+    }
+
+    .accordionContent {
+      display: block;
+    }
+  }
+}
+
+.accordionHeader {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  position: relative;
+  cursor: pointer;
+
+  span {
+    font-size: var(--font-size-h2);
+    font-weight: 500;
+  }
+
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    background-size: 100%;
+    background-image: url("/assets/icons/circle-arrow-right.svg");
+    right: 0;
+    transform: rotate(90deg);
+  }
+}
+
+.accordionContent {
+  padding: 2rem 0 1rem;
+  display: none;
+}
+
+.icon {
+  flex: none;
+  width: 3.4rem;
+  height: 3.4rem;
+  background: var(--color-goldenBeige);
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+  }
+}