Skip to content

Commit

Permalink
feat: add accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
oeyoews committed Oct 24, 2024
1 parent 089f1bc commit cd6880a
Show file tree
Hide file tree
Showing 5 changed files with 162 additions and 67 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"publisher": "oeyoews",
"name": "usewiki2",
"displayName": "usewiki2",
"version": "1.0.0",
"version": "1.1.0",
"private": true,
"packageManager": "[email protected]",
"description": "",
Expand Down
1 change: 1 addition & 0 deletions packages/react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
},
"dependencies": {
"@egoist/tailwindcss-icons": "^1.8.1",
"@radix-ui/react-accordion": "^1.2.1",
"@radix-ui/react-context-menu": "^2.2.2",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-slot": "^1.1.0",
Expand Down
51 changes: 34 additions & 17 deletions packages/react/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,12 @@ import {
CardHeader,
CardTitle,
} from './components/ui/card';
import {
Accordion,
AccordionContent,
AccordionItem,
AccordionTrigger,
} from '@/components/ui/accordion';

function App() {
const [inputValue, setInputValue] = useState('');
Expand Down Expand Up @@ -104,23 +110,34 @@ function App() {
</ContextMenu>

{/* https://talks.antfu.me/2024/vue-fes-japan/15?clicks=6 */}
<div className="grid grid-cols-2 gap-3 mt-4">
{cards.map((card) => (
<Card
className={`rounded-sm shadow-none border-none cursor-pointer ${card.class}`}
onClick={() => openLink(card.link)}>
<CardHeader className="p-3">
<CardTitle className="text-blue-400">
<span className="i-lucide-link text-sm mr-1 align-top"></span>
{card.title}
</CardTitle>
<CardDescription className="text-gray-400 text-sm">
{card.description}
</CardDescription>
</CardHeader>
</Card>
))}
</div>
<Accordion
type="single"
collapsible>
<AccordionItem value="item-1">
<AccordionTrigger className="hover:no-underline">
Realted Links
</AccordionTrigger>
<AccordionContent>
<div className="grid grid-cols-2 gap-3 mt-4">
{cards.map((card) => (
<Card
className={`rounded-sm shadow-none border-none cursor-pointer ${card.class}`}
onClick={() => openLink(card.link)}>
<CardHeader className="p-3">
<CardTitle className="text-blue-400">
<span className="i-lucide-link text-sm mr-1 align-top"></span>
{card.title}
</CardTitle>
<CardDescription className="text-gray-400 text-sm">
{card.description}
</CardDescription>
</CardHeader>
</Card>
))}
</div>
</AccordionContent>
</AccordionItem>
</Accordion>

<div className="absolute inset-x-3 bottom-3 flex flex-col gap-2 p-0">
<Textarea
Expand Down
55 changes: 55 additions & 0 deletions packages/react/src/components/ui/accordion.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDownIcon } from "@radix-ui/react-icons"

import { cn } from "@/lib/utils"

const Accordion = AccordionPrimitive.Root

const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
{...props}
/>
))
AccordionItem.displayName = "AccordionItem"

const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className
)}
{...props}
>
{children}
<ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
))
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName

const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
120 changes: 71 additions & 49 deletions packages/react/tailwind.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -11,55 +11,77 @@ export default {
// preflight: true,
// },
theme: {
extend: {
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)',
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))',
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))',
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))',
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))',
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))',
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))',
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))',
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
1: 'hsl(var(--chart-1))',
2: 'hsl(var(--chart-2))',
3: 'hsl(var(--chart-3))',
4: 'hsl(var(--chart-4))',
5: 'hsl(var(--chart-5))',
},
},
},
extend: {
borderRadius: {
lg: 'var(--radius)',
md: 'calc(var(--radius) - 2px)',
sm: 'calc(var(--radius) - 4px)'
},
colors: {
background: 'hsl(var(--background))',
foreground: 'hsl(var(--foreground))',
card: {
DEFAULT: 'hsl(var(--card))',
foreground: 'hsl(var(--card-foreground))'
},
popover: {
DEFAULT: 'hsl(var(--popover))',
foreground: 'hsl(var(--popover-foreground))'
},
primary: {
DEFAULT: 'hsl(var(--primary))',
foreground: 'hsl(var(--primary-foreground))'
},
secondary: {
DEFAULT: 'hsl(var(--secondary))',
foreground: 'hsl(var(--secondary-foreground))'
},
muted: {
DEFAULT: 'hsl(var(--muted))',
foreground: 'hsl(var(--muted-foreground))'
},
accent: {
DEFAULT: 'hsl(var(--accent))',
foreground: 'hsl(var(--accent-foreground))'
},
destructive: {
DEFAULT: 'hsl(var(--destructive))',
foreground: 'hsl(var(--destructive-foreground))'
},
border: 'hsl(var(--border))',
input: 'hsl(var(--input))',
ring: 'hsl(var(--ring))',
chart: {
'1': 'hsl(var(--chart-1))',
'2': 'hsl(var(--chart-2))',
'3': 'hsl(var(--chart-3))',
'4': 'hsl(var(--chart-4))',
'5': 'hsl(var(--chart-5))'
}
},
keyframes: {
'accordion-down': {
from: {
height: '0'
},
to: {
height: 'var(--radix-accordion-content-height)'
}
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)'
},
to: {
height: '0'
}
}
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out'
}
}
},
plugins: [
require('tailwindcss-animate'),
Expand Down

0 comments on commit cd6880a

Please sign in to comment.