Pixelact Collapsible

1"use client";
2 
3import * 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/pixelact-ui/styles/styles.css";
13 
14export interface CollapsibleProps
15  extends React.ComponentProps<typeof CollapsiblePrimitive.Root> {
16  asChild?: boolean;
17}
18 
19function Collapsible({ children, ...props }: CollapsibleProps) {
20  const { className } = props;
21 
22  return (
23    <div className={cn("relative", className)}>
24      <ShadcnCollapsible
25        {...props}
26        className={cn("pixel-font font-normal text-foreground", className)}
27      >
28        {children}
29      </ShadcnCollapsible>
30    </div>
31  );
32}
33 
34function CollapsibleTrigger({
35  children,
36  ...props
37}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
38  const { className } = props;
39  return (
40    <ShadcnCollapsibleTrigger
41      data-slot="collapsible-trigger"
42      className={cn("pixel-font", className)}
43      {...props}
44    >
45      {children}
46    </ShadcnCollapsibleTrigger>
47  );
48}
49 
50function CollapsibleContent({
51  children,
52  ...props
53}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
54  const { className } = props;
55  return (
56    <ShadcnCollapsibleContent
57      data-slot="collapsible-content"
58      className={cn("pixel-font", className)}
59      {...props}
60    >
61      {children}
62    </ShadcnCollapsibleContent>
63  );
64}
65 
66export { Collapsible, CollapsibleTrigger, CollapsibleContent };