add accordion component

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%;
+  }
+}