Skip to content

Commit

Permalink
feat(shared/ui/cuhacking/components): create accordion
Browse files Browse the repository at this point in the history
  • Loading branch information
HasithDeAlwis authored and MFarabi619 committed Nov 21, 2024
1 parent 889c64a commit a147fba
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 0 deletions.
56 changes: 56 additions & 0 deletions libs/shared/ui/src/cuHacking/components/accordion/accordion.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import * as AccordionPrimitive from '@radix-ui/react-accordion'
import { cn } from '@shadcn/lib/utils'
import { ChevronDown } from 'lucide-react'

import * as React from 'react'

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(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 w-full justify-start py-0.5 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 gap-3 text-left',
className,
)}
{...props}
>
<ChevronDown className="w-4 h-4 transition-transform duration-200 shrink-0" />
{children}
</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="text-left overflow-hidden pl-7 text-sm transition-all w-full data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn('pb-2 pt-0', className)}>{children}</div>
</AccordionPrimitive.Content>
))

AccordionContent.displayName = AccordionPrimitive.Content.displayName

export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
1 change: 1 addition & 0 deletions libs/shared/ui/src/cuHacking/components/accordion/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion'

0 comments on commit a147fba

Please sign in to comment.