parent
88b6d2a597
commit
99a2893d51
@ -0,0 +1,50 @@ |
||||
'use client'; |
||||
|
||||
import { |
||||
AlertDialog, |
||||
AlertDialogAction, |
||||
AlertDialogDescription, |
||||
AlertDialogHeader, |
||||
AlertDialogContent, |
||||
AlertDialogTitle, |
||||
AlertDialogTrigger, |
||||
AlertDialogFooter, |
||||
AlertDialogCancel, |
||||
} from '@/components/ui/alert-dialog'; |
||||
import { Button } from '@/components/ui/button'; |
||||
import { useState } from 'react'; |
||||
|
||||
export default function AlertDialogPage() { |
||||
const [dialogResult, setDialogResult] = useState(''); |
||||
|
||||
function handleContinue() { |
||||
setDialogResult('계속을 눌렀습니다.'); |
||||
} |
||||
|
||||
function handleCancel() { |
||||
setDialogResult('취소를 눌렀습니다.'); |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<AlertDialog> |
||||
<AlertDialogTrigger asChild> |
||||
<Button variant="outline">다이얼로그 출력</Button> |
||||
</AlertDialogTrigger> |
||||
<AlertDialogContent> |
||||
<AlertDialogHeader> |
||||
<AlertDialogTitle>작업을 확인하세요</AlertDialogTitle> |
||||
<AlertDialogDescription> |
||||
이 작업은 되돌릴 수 없습니다. 진행하시겠습니까? |
||||
</AlertDialogDescription> |
||||
</AlertDialogHeader> |
||||
<AlertDialogFooter> |
||||
<AlertDialogCancel onClick={handleCancel}>취소</AlertDialogCancel> |
||||
<AlertDialogAction onClick={handleContinue}>계속</AlertDialogAction> |
||||
</AlertDialogFooter> |
||||
</AlertDialogContent> |
||||
</AlertDialog> |
||||
{dialogResult && <p className="mt-4 text-blue-500">{dialogResult}</p>} |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,31 @@ |
||||
'use client'; |
||||
|
||||
import { Badge } from '@/components/ui/badge'; |
||||
import { BadgeCheckIcon } from 'lucide-react'; |
||||
|
||||
export default function BadgePage() { |
||||
return ( |
||||
<> |
||||
<div className="flex items-center justify-center space-x-3"> |
||||
<div className="flex flex-col items-center gap-2 rounded p-3 shadow-lg"> |
||||
<Badge>Badge</Badge> |
||||
<Badge variant="secondary">Secondary</Badge> |
||||
<Badge variant="outline">Outline</Badge> |
||||
<Badge variant="destructive">Destructive</Badge> |
||||
</div> |
||||
<div className="flex flex-col items-center gap-2 rounded p-3 shadow-lg"> |
||||
<Badge> |
||||
<BadgeCheckIcon /> |
||||
Varified |
||||
</Badge> |
||||
<Badge variant="destructive" className="h-5 min-w-5 rounded-full font-mono tabular-nums"> |
||||
99 |
||||
</Badge> |
||||
<Badge variant="outline" className="h-5 min-w-5 rounded-full font-mono tabular-nums"> |
||||
100+ |
||||
</Badge> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,40 @@ |
||||
'use client'; |
||||
|
||||
import { Calendar } from '@/components/ui/calendar'; |
||||
import { DateTime } from 'luxon'; |
||||
import { useState } from 'react'; |
||||
|
||||
export default function CalendarPage() { |
||||
const [date, setDate] = useState<Date | undefined>(new Date()); |
||||
const [luxonDate, setLuxonDate] = useState<DateTime | undefined>(DateTime.now()); |
||||
|
||||
return ( |
||||
<> |
||||
<div className="flex items-center justify-center space-x-4"> |
||||
<div> |
||||
<Calendar |
||||
mode="single" |
||||
selected={date} |
||||
onSelect={setDate} |
||||
className="rounded-md border shadow-sm" |
||||
captionLayout="dropdown" |
||||
/> |
||||
<p className="text-center text-sm text-gray-600">{date?.toLocaleDateString()}</p> |
||||
</div> |
||||
|
||||
<div> |
||||
<Calendar |
||||
mode="single" |
||||
selected={luxonDate ? luxonDate.toJSDate() : undefined} |
||||
onSelect={(d: Date | undefined) => setLuxonDate(d ? DateTime.fromJSDate(d) : undefined)} |
||||
className="rounded-md border shadow-sm" |
||||
captionLayout="dropdown" |
||||
/> |
||||
<p className="text-center text-sm text-gray-600"> |
||||
{luxonDate?.toJSDate().toLocaleDateString()} |
||||
</p> |
||||
</div> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,157 @@ |
||||
"use client" |
||||
|
||||
import * as React from "react" |
||||
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
import { buttonVariants } from "@/components/ui/button" |
||||
|
||||
function AlertDialog({ |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) { |
||||
return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} /> |
||||
} |
||||
|
||||
function AlertDialogTrigger({ |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) { |
||||
return ( |
||||
<AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} /> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogPortal({ |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) { |
||||
return ( |
||||
<AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} /> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogOverlay({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) { |
||||
return ( |
||||
<AlertDialogPrimitive.Overlay |
||||
data-slot="alert-dialog-overlay" |
||||
className={cn( |
||||
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogContent({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) { |
||||
return ( |
||||
<AlertDialogPortal> |
||||
<AlertDialogOverlay /> |
||||
<AlertDialogPrimitive.Content |
||||
data-slot="alert-dialog-content" |
||||
className={cn( |
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
</AlertDialogPortal> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogHeader({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="alert-dialog-header" |
||||
className={cn("flex flex-col gap-2 text-center sm:text-left", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogFooter({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="alert-dialog-footer" |
||||
className={cn( |
||||
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogTitle({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) { |
||||
return ( |
||||
<AlertDialogPrimitive.Title |
||||
data-slot="alert-dialog-title" |
||||
className={cn("text-lg font-semibold", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogDescription({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) { |
||||
return ( |
||||
<AlertDialogPrimitive.Description |
||||
data-slot="alert-dialog-description" |
||||
className={cn("text-muted-foreground text-sm", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogAction({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) { |
||||
return ( |
||||
<AlertDialogPrimitive.Action |
||||
className={cn(buttonVariants(), className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertDialogCancel({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) { |
||||
return ( |
||||
<AlertDialogPrimitive.Cancel |
||||
className={cn(buttonVariants({ variant: "outline" }), className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
export { |
||||
AlertDialog, |
||||
AlertDialogPortal, |
||||
AlertDialogOverlay, |
||||
AlertDialogTrigger, |
||||
AlertDialogContent, |
||||
AlertDialogHeader, |
||||
AlertDialogFooter, |
||||
AlertDialogTitle, |
||||
AlertDialogDescription, |
||||
AlertDialogAction, |
||||
AlertDialogCancel, |
||||
} |
||||
@ -0,0 +1,66 @@ |
||||
import * as React from "react" |
||||
import { cva, type VariantProps } from "class-variance-authority" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
|
||||
const alertVariants = cva( |
||||
"relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", |
||||
{ |
||||
variants: { |
||||
variant: { |
||||
default: "bg-card text-card-foreground", |
||||
destructive: |
||||
"text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90", |
||||
}, |
||||
}, |
||||
defaultVariants: { |
||||
variant: "default", |
||||
}, |
||||
} |
||||
) |
||||
|
||||
function Alert({ |
||||
className, |
||||
variant, |
||||
...props |
||||
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) { |
||||
return ( |
||||
<div |
||||
data-slot="alert" |
||||
role="alert" |
||||
className={cn(alertVariants({ variant }), className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="alert-title" |
||||
className={cn( |
||||
"col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function AlertDescription({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<"div">) { |
||||
return ( |
||||
<div |
||||
data-slot="alert-description" |
||||
className={cn( |
||||
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
export { Alert, AlertTitle, AlertDescription } |
||||
@ -0,0 +1,46 @@ |
||||
import * as React from "react" |
||||
import { Slot } from "@radix-ui/react-slot" |
||||
import { cva, type VariantProps } from "class-variance-authority" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
|
||||
const badgeVariants = cva( |
||||
"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", |
||||
{ |
||||
variants: { |
||||
variant: { |
||||
default: |
||||
"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90", |
||||
secondary: |
||||
"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90", |
||||
destructive: |
||||
"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60", |
||||
outline: |
||||
"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground", |
||||
}, |
||||
}, |
||||
defaultVariants: { |
||||
variant: "default", |
||||
}, |
||||
} |
||||
) |
||||
|
||||
function Badge({ |
||||
className, |
||||
variant, |
||||
asChild = false, |
||||
...props |
||||
}: React.ComponentProps<"span"> & |
||||
VariantProps<typeof badgeVariants> & { asChild?: boolean }) { |
||||
const Comp = asChild ? Slot : "span" |
||||
|
||||
return ( |
||||
<Comp |
||||
data-slot="badge" |
||||
className={cn(badgeVariants({ variant }), className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
export { Badge, badgeVariants } |
||||
@ -0,0 +1,213 @@ |
||||
"use client" |
||||
|
||||
import * as React from "react" |
||||
import { |
||||
ChevronDownIcon, |
||||
ChevronLeftIcon, |
||||
ChevronRightIcon, |
||||
} from "lucide-react" |
||||
import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
import { Button, buttonVariants } from "@/components/ui/button" |
||||
|
||||
function Calendar({ |
||||
className, |
||||
classNames, |
||||
showOutsideDays = true, |
||||
captionLayout = "label", |
||||
buttonVariant = "ghost", |
||||
formatters, |
||||
components, |
||||
...props |
||||
}: React.ComponentProps<typeof DayPicker> & { |
||||
buttonVariant?: React.ComponentProps<typeof Button>["variant"] |
||||
}) { |
||||
const defaultClassNames = getDefaultClassNames() |
||||
|
||||
return ( |
||||
<DayPicker |
||||
showOutsideDays={showOutsideDays} |
||||
className={cn( |
||||
"bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", |
||||
String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, |
||||
String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, |
||||
className |
||||
)} |
||||
captionLayout={captionLayout} |
||||
formatters={{ |
||||
formatMonthDropdown: (date) => |
||||
date.toLocaleString("default", { month: "short" }), |
||||
...formatters, |
||||
}} |
||||
classNames={{ |
||||
root: cn("w-fit", defaultClassNames.root), |
||||
months: cn( |
||||
"flex gap-4 flex-col md:flex-row relative", |
||||
defaultClassNames.months |
||||
), |
||||
month: cn("flex flex-col w-full gap-4", defaultClassNames.month), |
||||
nav: cn( |
||||
"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", |
||||
defaultClassNames.nav |
||||
), |
||||
button_previous: cn( |
||||
buttonVariants({ variant: buttonVariant }), |
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", |
||||
defaultClassNames.button_previous |
||||
), |
||||
button_next: cn( |
||||
buttonVariants({ variant: buttonVariant }), |
||||
"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", |
||||
defaultClassNames.button_next |
||||
), |
||||
month_caption: cn( |
||||
"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", |
||||
defaultClassNames.month_caption |
||||
), |
||||
dropdowns: cn( |
||||
"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", |
||||
defaultClassNames.dropdowns |
||||
), |
||||
dropdown_root: cn( |
||||
"relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md", |
||||
defaultClassNames.dropdown_root |
||||
), |
||||
dropdown: cn( |
||||
"absolute bg-popover inset-0 opacity-0", |
||||
defaultClassNames.dropdown |
||||
), |
||||
caption_label: cn( |
||||
"select-none font-medium", |
||||
captionLayout === "label" |
||||
? "text-sm" |
||||
: "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", |
||||
defaultClassNames.caption_label |
||||
), |
||||
table: "w-full border-collapse", |
||||
weekdays: cn("flex", defaultClassNames.weekdays), |
||||
weekday: cn( |
||||
"text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", |
||||
defaultClassNames.weekday |
||||
), |
||||
week: cn("flex w-full mt-2", defaultClassNames.week), |
||||
week_number_header: cn( |
||||
"select-none w-(--cell-size)", |
||||
defaultClassNames.week_number_header |
||||
), |
||||
week_number: cn( |
||||
"text-[0.8rem] select-none text-muted-foreground", |
||||
defaultClassNames.week_number |
||||
), |
||||
day: cn( |
||||
"relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", |
||||
defaultClassNames.day |
||||
), |
||||
range_start: cn( |
||||
"rounded-l-md bg-accent", |
||||
defaultClassNames.range_start |
||||
), |
||||
range_middle: cn("rounded-none", defaultClassNames.range_middle), |
||||
range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end), |
||||
today: cn( |
||||
"bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", |
||||
defaultClassNames.today |
||||
), |
||||
outside: cn( |
||||
"text-muted-foreground aria-selected:text-muted-foreground", |
||||
defaultClassNames.outside |
||||
), |
||||
disabled: cn( |
||||
"text-muted-foreground opacity-50", |
||||
defaultClassNames.disabled |
||||
), |
||||
hidden: cn("invisible", defaultClassNames.hidden), |
||||
...classNames, |
||||
}} |
||||
components={{ |
||||
Root: ({ className, rootRef, ...props }) => { |
||||
return ( |
||||
<div |
||||
data-slot="calendar" |
||||
ref={rootRef} |
||||
className={cn(className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
}, |
||||
Chevron: ({ className, orientation, ...props }) => { |
||||
if (orientation === "left") { |
||||
return ( |
||||
<ChevronLeftIcon className={cn("size-4", className)} {...props} /> |
||||
) |
||||
} |
||||
|
||||
if (orientation === "right") { |
||||
return ( |
||||
<ChevronRightIcon |
||||
className={cn("size-4", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
return ( |
||||
<ChevronDownIcon className={cn("size-4", className)} {...props} /> |
||||
) |
||||
}, |
||||
DayButton: CalendarDayButton, |
||||
WeekNumber: ({ children, ...props }) => { |
||||
return ( |
||||
<td {...props}> |
||||
<div className="flex size-(--cell-size) items-center justify-center text-center"> |
||||
{children} |
||||
</div> |
||||
</td> |
||||
) |
||||
}, |
||||
...components, |
||||
}} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function CalendarDayButton({ |
||||
className, |
||||
day, |
||||
modifiers, |
||||
...props |
||||
}: React.ComponentProps<typeof DayButton>) { |
||||
const defaultClassNames = getDefaultClassNames() |
||||
|
||||
const ref = React.useRef<HTMLButtonElement>(null) |
||||
React.useEffect(() => { |
||||
if (modifiers.focused) ref.current?.focus() |
||||
}, [modifiers.focused]) |
||||
|
||||
return ( |
||||
<Button |
||||
ref={ref} |
||||
variant="ghost" |
||||
size="icon" |
||||
data-day={day.date.toLocaleDateString()} |
||||
data-selected-single={ |
||||
modifiers.selected && |
||||
!modifiers.range_start && |
||||
!modifiers.range_end && |
||||
!modifiers.range_middle |
||||
} |
||||
data-range-start={modifiers.range_start} |
||||
data-range-end={modifiers.range_end} |
||||
data-range-middle={modifiers.range_middle} |
||||
className={cn( |
||||
"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", |
||||
defaultClassNames.day, |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
export { Calendar, CalendarDayButton } |
||||
@ -0,0 +1,168 @@ |
||||
import * as React from "react" |
||||
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu" |
||||
import { cva } from "class-variance-authority" |
||||
import { ChevronDownIcon } from "lucide-react" |
||||
|
||||
import { cn } from "@/lib/utils" |
||||
|
||||
function NavigationMenu({ |
||||
className, |
||||
children, |
||||
viewport = true, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & { |
||||
viewport?: boolean |
||||
}) { |
||||
return ( |
||||
<NavigationMenuPrimitive.Root |
||||
data-slot="navigation-menu" |
||||
data-viewport={viewport} |
||||
className={cn( |
||||
"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", |
||||
className |
||||
)} |
||||
{...props} |
||||
> |
||||
{children} |
||||
{viewport && <NavigationMenuViewport />} |
||||
</NavigationMenuPrimitive.Root> |
||||
) |
||||
} |
||||
|
||||
function NavigationMenuList({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) { |
||||
return ( |
||||
<NavigationMenuPrimitive.List |
||||
data-slot="navigation-menu-list" |
||||
className={cn( |
||||
"group flex flex-1 list-none items-center justify-center gap-1", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function NavigationMenuItem({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) { |
||||
return ( |
||||
<NavigationMenuPrimitive.Item |
||||
data-slot="navigation-menu-item" |
||||
className={cn("relative", className)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
const navigationMenuTriggerStyle = cva( |
||||
"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1" |
||||
) |
||||
|
||||
function NavigationMenuTrigger({ |
||||
className, |
||||
children, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) { |
||||
return ( |
||||
<NavigationMenuPrimitive.Trigger |
||||
data-slot="navigation-menu-trigger" |
||||
className={cn(navigationMenuTriggerStyle(), "group", className)} |
||||
{...props} |
||||
> |
||||
{children}{" "} |
||||
<ChevronDownIcon |
||||
className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180" |
||||
aria-hidden="true" |
||||
/> |
||||
</NavigationMenuPrimitive.Trigger> |
||||
) |
||||
} |
||||
|
||||
function NavigationMenuContent({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) { |
||||
return ( |
||||
<NavigationMenuPrimitive.Content |
||||
data-slot="navigation-menu-content" |
||||
className={cn( |
||||
"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto", |
||||
"group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function NavigationMenuViewport({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) { |
||||
return ( |
||||
<div |
||||
className={cn( |
||||
"absolute top-full left-0 isolate z-50 flex justify-center" |
||||
)} |
||||
> |
||||
<NavigationMenuPrimitive.Viewport |
||||
data-slot="navigation-menu-viewport" |
||||
className={cn( |
||||
"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
function NavigationMenuLink({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) { |
||||
return ( |
||||
<NavigationMenuPrimitive.Link |
||||
data-slot="navigation-menu-link" |
||||
className={cn( |
||||
"data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", |
||||
className |
||||
)} |
||||
{...props} |
||||
/> |
||||
) |
||||
} |
||||
|
||||
function NavigationMenuIndicator({ |
||||
className, |
||||
...props |
||||
}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) { |
||||
return ( |
||||
<NavigationMenuPrimitive.Indicator |
||||
data-slot="navigation-menu-indicator" |
||||
className={cn( |
||||
"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden", |
||||
className |
||||
)} |
||||
{...props} |
||||
> |
||||
<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" /> |
||||
</NavigationMenuPrimitive.Indicator> |
||||
) |
||||
} |
||||
|
||||
export { |
||||
NavigationMenu, |
||||
NavigationMenuList, |
||||
NavigationMenuItem, |
||||
NavigationMenuContent, |
||||
NavigationMenuTrigger, |
||||
NavigationMenuLink, |
||||
NavigationMenuIndicator, |
||||
NavigationMenuViewport, |
||||
navigationMenuTriggerStyle, |
||||
} |
||||
Loading…
Reference in new issue