Skip to content

Commit 791cfb1

Browse files
ariflogsariflogs
committed
moved accordion component to new style guide
1 parent 733f752 commit 791cfb1

File tree

7 files changed

+310
-72
lines changed

7 files changed

+310
-72
lines changed

‎app/(sink)/demo/components/page.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
"use client";
2+
13
import {
4+
Accordion,
25
Avatar,
36
Badge,
47
Button,
@@ -55,6 +58,15 @@ export default function page() {
5558
</TabsPanels>
5659
</Tabs>
5760
</div>
61+
62+
<div>
63+
<Accordion type="single" collapsible>
64+
<Accordion.Item value="item-1">
65+
<Accordion.Header>Head...</Accordion.Header>
66+
<Accordion.Content>Content...</Accordion.Content>
67+
</Accordion.Item>
68+
</Accordion>
69+
</div>
5870
</div>
5971
);
6072
}

‎config/components.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@ import { lazy } from "react";
22

33
export const componentConfig = {
44
core: {
5+
accordion: {
6+
name: "accordion",
7+
filePath: "packages/ui/Accordions/Accordion.tsx",
8+
},
59
avatar: {
610
name: "avatar",
711
filePath: "packages/ui/Avatars/Avatar.tsx",

‎content/docs/components/accordion.mdx‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,32 @@
11
---
22
title: Accordion
33
description: This collapsible component let's your users read only the content they care about. 😌
4-
lastUpdated: 08 Oct, 2024
4+
lastUpdated: 19 Oct, 2024
55
---
66

7-
### Default
7+
<ComponentShowcase name="accordion-style-default" />
8+
<br />
9+
<br />
10+
11+
## Installation
12+
13+
#### 1. Install dependencies:
14+
15+
```sh
16+
npm install @radix-ui/react-accordion lucide-react
17+
```
18+
19+
<br />
20+
21+
#### 2. Copy the code 👇 into your project:
822

9-
<hr />
23+
<ComponentSource name="accordion" />
24+
25+
<br />
1026
<br />
27+
28+
## Examples
29+
30+
### Default
31+
1132
<ComponentShowcase name="accordion-style-default" />

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@headlessui/react": "^2.1.9",
13+
"@radix-ui/react-accordion": "^1.2.1",
1314
"@radix-ui/react-avatar": "^1.1.1",
1415
"class-variance-authority": "^0.7.0",
1516
"clsx": "^2.1.1",

‎packages/ui/Accordions/Accordion.tsx‎

Lines changed: 67 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,67 @@
1-
import React from "react";
2-
3-
export function Accordion() {
4-
return (
5-
<div className="space-y-4 mx-auto">
6-
<details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
7-
<summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
8-
Accordion Item 1
9-
</summary>
10-
<div className="px-4 py-2 font-body bg-white text-gray-700">
11-
This is the content of the first accordion item. It is styled with
12-
Tailwind CSS.
13-
</div>
14-
</details>
15-
16-
<details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
17-
<summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
18-
Accordion Item 2
19-
</summary>
20-
<div className="px-4 py-2 font-body bg-white text-gray-700">
21-
This is the content of the second accordion item. It has a similar
22-
style to maintain consistency.
23-
</div>
24-
</details>
25-
26-
<details className="border-2 border-black shadow-md hover:shadow-sm transition-all overflow-hidden">
27-
<summary className="px-4 py-2 font-head text-black cursor-pointer focus:outline-none">
28-
Accordion Item 3
29-
</summary>
30-
<div className="px-4 py-2 font-body bg-white text-gray-700">
31-
This is the content of the third accordion item. The details element
32-
handles the toggle behavior.
33-
</div>
34-
</details>
35-
</div>
36-
);
37-
}
1+
"use client";
2+
3+
import * as React from "react";
4+
import * as AccordionPrimitive from "@radix-ui/react-accordion";
5+
import { ChevronDown } from "lucide-react";
6+
7+
import { cn } from "@/lib/utils";
8+
9+
const Accordion = AccordionPrimitive.Root;
10+
11+
const AccordionItem = React.forwardRef<
12+
React.ElementRef<typeof AccordionPrimitive.Item>,
13+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14+
>(({ className, ...props }, ref) => (
15+
<AccordionPrimitive.Item
16+
ref={ref}
17+
className={cn(
18+
"border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden",
19+
className
20+
)}
21+
{...props}
22+
/>
23+
));
24+
AccordionItem.displayName = AccordionPrimitive.Item.displayName;
25+
26+
const AccordionHeader = React.forwardRef<
27+
React.ElementRef<typeof AccordionPrimitive.Trigger>,
28+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
29+
>(({ className, children, ...props }, ref) => (
30+
<AccordionPrimitive.Header className="flex">
31+
<AccordionPrimitive.Trigger
32+
ref={ref}
33+
className={cn(
34+
"flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-none",
35+
className
36+
)}
37+
{...props}
38+
>
39+
{children}
40+
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
41+
</AccordionPrimitive.Trigger>
42+
</AccordionPrimitive.Header>
43+
));
44+
AccordionHeader.displayName = AccordionPrimitive.Header.displayName;
45+
46+
const AccordionContent = React.forwardRef<
47+
React.ElementRef<typeof AccordionPrimitive.Content>,
48+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
49+
>(({ className, children, ...props }, ref) => (
50+
<AccordionPrimitive.Content
51+
ref={ref}
52+
className="overflow-hidden px-4 py-2 font-body bg-white text-gray-700 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
53+
{...props}
54+
>
55+
<div className={cn("pb-4 pt-0", className)}>{children}</div>
56+
</AccordionPrimitive.Content>
57+
));
58+
59+
AccordionContent.displayName = AccordionPrimitive.Content.displayName;
60+
61+
const AccordionComponent = Object.assign(Accordion, {
62+
Item: AccordionItem,
63+
Header: AccordionHeader,
64+
Content: AccordionContent,
65+
});
66+
67+
export { AccordionComponent as Accordion };

0 commit comments

Comments
 (0)