66 lines
1.5 KiB
TypeScript
66 lines
1.5 KiB
TypeScript
import { cn } from "@heroui/react"
|
|
import type { ReactNode } from "react"
|
|
|
|
interface CardProps {
|
|
children?: ReactNode
|
|
className?: string
|
|
type?: string
|
|
onClick?: () => void
|
|
}
|
|
|
|
const Card = ({ children, className, ...props }: CardProps) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"dark:bg-white/[3%] dark:border-white/[6%] px-3 py-3 flex flex-col gap-2.5 border w-full rounded-lg bg-white/40 border-black/[6%]"
|
|
, className)}
|
|
data-tauri-drag-region
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const CardHeader = ({ children }: CardProps) => {
|
|
return (
|
|
<div className="flex items-center gap-1.5 tracking-wide select-none flex-shrink-0">
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const CardIcon = ({ children, type, className, ...rest }: CardProps) => {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex gap-1.5 items-center font-semibold flex-shrink-0",
|
|
type === "menu" &&
|
|
"transition cursor-pointer hover:bg-black/5 dark:hover:bg-white/5 px-2 py-1 rounded-md active:scale-95",
|
|
className,
|
|
)}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const CardTool = ({ children, className }: CardProps) => {
|
|
return (
|
|
<div className={cn("flex items-center justify-end flex-grow gap-2", className)}>
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const CardBody = ({ children }: CardProps) => {
|
|
return (
|
|
<div className="w-full h-full text-sm tracking-wide text-zinc-800 dark:text-white">
|
|
{children}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export { Card, CardHeader, CardIcon, CardTool, CardBody }
|