-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(shared/ui/cuhacking/components): create accordion
- Loading branch information
1 parent
889c64a
commit a147fba
Showing
2 changed files
with
57 additions
and
0 deletions.
There are no files selected for viewing
56 changes: 56 additions & 0 deletions
56
libs/shared/ui/src/cuHacking/components/accordion/accordion.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion' |