Move Accordion and icons to _design-system

Author: hasparus

src/app/conf/2025/components/call-for-proposals.tsx

@@ -1,10 +1,11 @@
 "use client"
-import clsx from "clsx"
 
-import { useState, useEffect, ReactNode, Fragment } from "react"
+import clsx from "clsx"
+import { useState, useEffect, Fragment } from "react"
 import Link from "next/link"
-import { Button } from "../../_design-system/button"
-import ArrowDownIcon from "../pixelarticons/arrow-down.svg?svgr"
+
+import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+import { Button } from "@/app/conf/_design-system/button"
 
 function DatesTab() {
   return (

src/app/conf/2025/components/hero/index.tsx

@@ -1,9 +1,9 @@
 import Image from "next-image-export-optimizer"
 
 import { Button } from "../../../_design-system/button"
-import { CalendarIcon } from "../../pixelarticons/calendar-icon"
+import { CalendarIcon } from "../../../_design-system/pixelarticons/calendar-icon"
 import { GET_TICKETS_LINK } from "../../links"
-import { PinIcon } from "../../pixelarticons/pin-icon"
+import { PinIcon } from "../../../_design-system/pixelarticons/pin-icon"
 import graphqlFoundationWordmarkSvg from "../../assets/graphql-foundation-wordmark.svg"
 
 import { ImageLoaded } from "../image-loaded"

src/app/conf/2025/components/location-section/location-photo.png

@@ -1,12 +1,11 @@
+import { clsx } from "clsx"
 import { Fragment, ReactNode } from "react"
 
 import { Marquee } from "@/app/conf/_design-system/marquee"
-
-import CodeIcon from "../../pixelarticons/code.svg?svgr"
+import CodeIcon from "@/app/conf/_design-system/pixelarticons/code.svg?svgr"
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 
 import blurWave from "./blur.webp"
-import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
-import { clsx } from "clsx"
 
 export interface MarqueeRowsProps extends React.HTMLAttributes<HTMLDivElement> {
   items: ReactNode[][]

src/app/conf/2025/components/location-section/location-photo.webp

@@ -1,14 +1,13 @@
 "use client"
 
 import { ReactElement, useCallback, useEffect, useState } from "react"
-import NextLink from "next/link"
 import { clsx } from "clsx"
 import { usePathname } from "next/navigation"
 
 import { Badge } from "../../_components/badge"
 
-import MenuIcon from "../pixelarticons/menu.svg?svgr"
-import CloseIcon from "../pixelarticons/close.svg?svgr"
+import MenuIcon from "@/app/conf/_design-system/pixelarticons/menu.svg?svgr"
+import CloseIcon from "@/app/conf/_design-system/pixelarticons/close.svg?svgr"
 import { GraphQLConfLogoLink } from "./graphql-conf-logo-link"
 import { Anchor } from "../../_design-system/anchor"
 

src/app/conf/2025/components/marquee-rows/index.tsx

@@ -1,7 +1,7 @@
 import Grafbase from "public/img/conf/Sponsors/Grafbase.svg?svgr"
 
 import { clsx } from "clsx"
-import { ChevronRight } from "../pixelarticons/chevron-right"
+import { ChevronRight } from "../../_design-system/pixelarticons/chevron-right"
 
 interface Sponsor {
   icon: React.FC<React.SVGProps<SVGElement>>

src/app/conf/2025/components/navbar.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx"
-import ArrowDown from "./pixelarticons/arrow-down.svg?svgr"
+
+import ArrowDown from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 const FAQS = [
   {

src/app/conf/2025/components/sponsors.tsx

@@ -0,0 +1,52 @@
+"use client"
+
+import ArrowDown from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
+
+export interface AccordionItem {
+  title: string
+  description: React.ReactNode
+}
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  items: AccordionItem[]
+  multiple?: boolean
+}
+
+export function Accordion({
+  items,
+  multiple = false,
+  ...rest
+}: AccordionProps) {
+  return (
+    <div
+      className="grow space-y-4"
+      onToggle={event => {
+        if (!multiple) {
+          const allDetails = event.currentTarget.querySelectorAll("details")
+          allDetails.forEach(details => {
+            if (details !== event.target) {
+              details.open = false
+            }
+          })
+        }
+      }}
+      {...rest}
+    >
+      {items.map((item, index) => (
+        <details
+          open={index === 0}
+          key={index}
+          className="group/q w-full border border-sec-darker @container"
+        >
+          <summary className="flex cursor-pointer list-none items-center justify-between gap-2 border-sec-darker p-2 px-3 focus:outline-none group-open/q:border-b [&::-webkit-details-marker]:hidden">
+            <span className="select-none typography-body-lg">{item.title}</span>
+            <ArrowDown className="size-10 shrink-0 text-sec-darker group-open/q:rotate-180" />
+          </summary>
+          <div className="text-pretty p-3 typography-body-md">
+            {item.description}
+          </div>
+        </details>
+      ))}
+    </div>
+  )
+}