8-bit Collapsible

1"use client";
2 
3import type * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
4import {
5  Collapsible as ShadcnCollapsible,
6  CollapsibleContent as ShadcnCollapsibleContent,
7  CollapsibleTrigger as ShadcnCollapsibleTrigger,
8} from "@radix-ui/react-collapsible";
9 
10import { cn } from "@/lib/utils";
11 
12import "@/components/ui/8bit/styles/retro.css";
13 
14export interface BitCollapsibleProps
15  extends React.ComponentProps<typeof CollapsiblePrimitive.Root> {
16  asChild?: boolean;
17}
18 
19function Collapsible({ children, ...props }: BitCollapsibleProps) {
20  const { className } = props;
21 
22  return (
23    <div className={cn("relative", className)}>
24      <ShadcnCollapsible {...props} className={cn(className, "retro")}>
25        {children}
26      </ShadcnCollapsible>
27    </div>
28  );
29}
30 
31function CollapsibleTrigger({
32  children,
33  ...props
34}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
35  const { className } = props;
36  return (
37    <ShadcnCollapsibleTrigger
38      data-slot="collapsible-trigger"
39      className={cn(className, "retro")}
40      {...props}
41    >
42      {children}
43    </ShadcnCollapsibleTrigger>
44  );
45}
46 
47function CollapsibleContent({
48  children,
49  ...props
50}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
51  const { className } = props;
52  return (
53    <ShadcnCollapsibleContent
54      data-slot="collapsible-content"
55      className={cn(className, "retro")}
56      {...props}
57    >
58      {children}
59    </ShadcnCollapsibleContent>
60  );
61}
62 
63export { Collapsible, CollapsibleTrigger, CollapsibleContent };