move accordion component

web/src/components/blocks/Accordion.tsx

@@ -1,32 +0,0 @@
-"use client";
-import { useId, useState } from "react";
-import styles from "./accordion.module.scss";
-
-export const Accordion = ({ heading, children }: any) => {
-  const labelId = useId();
-  const contentId = useId();
-  const [showContent, setShowContent] = useState(false);
-  function toggleContent() {
-    setShowContent(!showContent);
-  }
-  return (
-    <section className={styles.accordion} data-open={showContent}>
-      <div
-        id={labelId}
-        className={styles.accordionHeader}
-        onClick={toggleContent}
-        aria-expanded={showContent}
-        aria-controls={contentId}
-      >
-        <span>{heading}</span>
-      </div>
-      <div
-        id={contentId}
-        className={styles.accordionContent}
-        aria-labelledby={labelId}
-      >
-        {children}
-      </div>
-    </section>
-  );
-};

web/src/components/blocks/AccordionBlock.tsx

@@ -1,6 +1,6 @@
 import { AccordionBlock as AccordionBlockType } from "@/gql/graphql";
 import { Blocks } from "./Blocks";
-import { Accordion } from "./Accordion";
+import { Accordion } from "@/components/general/Accordion";
 
 export const AccordionBlock = ({
   block,

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

@@ -1,70 +0,0 @@
-.accordion {
-  margin: var(--spacing-l) 0;
-  max-width: var(--size-width-p);
-  padding: var(--spacing-s) 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: var(--size-icon-circle);
-    height: var(--size-icon-circle);
-    background-size: 100%;
-    background-image: url("/assets/icons/circle-arrow-right.svg");
-    right: 0;
-    transform: rotate(90deg);
-    transition: transform .3s ease;
-  }
-}
-
-.accordionContent {
-  padding: var(--spacing-m) 0 var(--spacing-s);
-  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%;
-  }
-}