Kalana B. Thilakarathna
71 lines
1.4 KiB
TypeScript
71 lines
1.4 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { HugeiconsIcon } from "@hugeicons/react"
|
|
import {
|
|
Cancel01Icon,
|
|
CheckmarkCircle02Icon,
|
|
Delete02Icon,
|
|
PencilEdit01Icon,
|
|
} from "@hugeicons/core-free-icons"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const ACTION_ICONS = {
|
|
activate: CheckmarkCircle02Icon,
|
|
cancel: Delete02Icon,
|
|
close: Cancel01Icon,
|
|
confirm: CheckmarkCircle02Icon,
|
|
deactivate: Cancel01Icon,
|
|
edit: PencilEdit01Icon,
|
|
} as const
|
|
|
|
type RowActionKind = keyof typeof ACTION_ICONS
|
|
|
|
function RowActions({
|
|
className,
|
|
...props
|
|
}: React.ComponentProps<"div">) {
|
|
return (
|
|
<div
|
|
className={cn("flex items-center justify-end gap-1", className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function RowActionButton({
|
|
action,
|
|
label,
|
|
tone = "default",
|
|
className,
|
|
...props
|
|
}: Omit<React.ComponentProps<typeof Button>, "children"> & {
|
|
action: RowActionKind
|
|
label: string
|
|
tone?: "default" | "destructive"
|
|
}) {
|
|
const icon = ACTION_ICONS[action]
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className={cn(
|
|
tone === "destructive"
|
|
? "text-destructive hover:text-destructive"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
className
|
|
)}
|
|
aria-label={label}
|
|
title={label}
|
|
{...props}
|
|
>
|
|
<HugeiconsIcon icon={icon} size={16} />
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
export { RowActions, RowActionButton }
|