Pixelact Accordion

1import React from "react";
2import * as AccordionPrimitive from "@radix-ui/react-accordion";
3import { cn } from "@/lib/utils";
4import {
5  Accordion,
6  AccordionContent as ShadcnAccordionContent,
7  AccordionItem as ShadcnAccordionItem,
8} from "@/components/ui/accordion";
9 
10import "@/components/ui/pixelact-ui/styles/styles.css";
11 
12export interface PixelAccordionItemProps
13  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
14  asChild?: boolean;
15}
16 
17function AccordionItem({
18  className,
19  children,
20  ...props
21}: PixelAccordionItemProps) {
22  return (
23    <ShadcnAccordionItem
24      className={cn(
25        "border-dashed text-foreground border-b-4 border-foreground dark:border-ring relative",
26        className
27      )}
28      {...props}
29    >
30      {children}
31    </ShadcnAccordionItem>
32  );
33}
34 
35function AccordionTrigger({
36  className,
37  children,
38  ...props
39}: React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>) {
40  return (
41    <AccordionPrimitive.Header className="flex">
42      <AccordionPrimitive.Trigger
43        data-slot="accordion-trigger"
44        className={cn(
45          "pixel-font focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
46          className
47        )}
48        {...props}
49      >
50        {children}
51        <svg
52          xmlns="http://www.w3.org/2000/svg"
53          width="32"
54          height="32"
55          viewBox="0 0 24 24"
56        >
57          <path
58            className="fill-foreground"
59            d="M7 8H5v2h2v2h2v2h2v2h2v-2h2v-2h2v-2h2V8h-2v2h-2v2h-2v2h-2v-2H9v-2H7z"
60          />
61        </svg>
62      </AccordionPrimitive.Trigger>
63    </AccordionPrimitive.Header>
64  );
65}
66 
67interface AccordionContentProps
68  extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
69  font?: "normal" | "pixel";
70}
71 
72function AccordionContent({
73  className,
74  children,
75  font,
76  ...props
77}: AccordionContentProps) {
78  return (
79    <div className="relative">
80      <ShadcnAccordionContent
81        className={cn(
82          "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
83          font === "pixel" && "pixel-font",
84          className
85        )}
86        {...props}
87      >
88// … truncated