60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import * as React from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface DrawerProps {
|
|
children: React.ReactNode
|
|
}
|
|
|
|
interface DrawerTriggerProps {
|
|
children: React.ReactNode
|
|
asChild?: boolean
|
|
}
|
|
|
|
interface DrawerContentProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
interface DrawerHeaderProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
interface DrawerTitleProps {
|
|
children: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
const Drawer: React.FC<DrawerProps> = ({ children }) => {
|
|
return <div className="drawer">{children}</div>
|
|
}
|
|
|
|
const DrawerTrigger: React.FC<DrawerTriggerProps> = ({ children, asChild }) => {
|
|
return <div className="drawer-trigger">{children}</div>
|
|
}
|
|
|
|
const DrawerContent: React.FC<DrawerContentProps> = ({ children, className }) => {
|
|
return (
|
|
<div className={cn("drawer-content bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700", className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const DrawerHeader: React.FC<DrawerHeaderProps> = ({ children, className }) => {
|
|
return (
|
|
<div className={cn("drawer-header p-4 border-b border-gray-200 dark:border-gray-700", className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const DrawerTitle: React.FC<DrawerTitleProps> = ({ children, className }) => {
|
|
return (
|
|
<h3 className={cn("text-lg font-semibold", className)}>
|
|
{children}
|
|
</h3>
|
|
)
|
|
}
|
|
|
|
export { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger }
|