8-bit Accordion

1"use client";
2 
3import type * as React from "react";
4 
5import * as AccordionPrimitive from "@radix-ui/react-accordion";
6 
7import { cn } from "@/lib/utils";
8 
9import {
10  Accordion as ShadcnAccordion,
11  AccordionContent as ShadcnAccordionContent,
12  AccordionItem as ShadcnAccordionItem,
13  AccordionTrigger as ShadcnAccordionTrigger,
14} from "@/components/ui/accordion";
15 
16import "@/components/ui/8bit/styles/retro.css";
17 
18export interface BitAccordionItemProps
19  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
20  asChild?: boolean;
21}
22 
23function AccordionItem({
24  className,
25  children,
26  ...props
27}: BitAccordionItemProps) {
28  return (
29    <ShadcnAccordionItem
30      className={cn(
31        "border-dashed border-b-4 border-foreground dark:border-ring relative",
32        className
33      )}
34      {...props}
35    >
36      {children}
37    </ShadcnAccordionItem>
38  );
39}
40 
41export interface BitAccordionTriggerProps
42  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
43  font?: "normal" | "retro";
44}
45 
46function AccordionTrigger({
47  className,
48  children,
49  font,
50  ...props
51}: BitAccordionTriggerProps) {
52  return (
53    <ShadcnAccordionTrigger
54      className={cn(font !== "normal" && "retro", className)}
55      {...props}
56    >
57      {children}
58    </ShadcnAccordionTrigger>
59  );
60}
61 
62export interface BitAccordionContentProps
63  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
64  font?: "normal" | "retro";
65}
66 
67function AccordionContent({
68  className,
69  children,
70  font,
71  ...props
72}: BitAccordionContentProps) {
73  return (
74    <div className="relative">
75      <ShadcnAccordionContent
76        className={cn(
77          "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
78          font !== "normal" && "retro",
79          className
80        )}
81        {...props}
82      >
83        <div className="pb-4 pt-0 relative z-10 p-1">{children}</div>
84      </ShadcnAccordionContent>
85 
86      <AccordionPrimitive.Content asChild forceMount />
87    </div>
88  );
89}
90 
91const Accordion = ShadcnAccordion;
92 
93export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };