siakad-itm/resources/js/components/row-actions.tsx
Yoga Pangestu 1b5510b4e5
Some checks failed
tests / ci (pull_request) Has been cancelled
feat: add reusable components for dialogs and headers
- Implemented DeleteConfirmDialog for confirming deletions.
- Created FormDialog for handling forms within dialogs.
- Added PageHeader component for consistent page headers.
- Introduced RowActions component for action buttons with tooltips.
- Added useServerTable hook for managing server-side table interactions.
- Updated DatePicker component with default month and dropdown caption layout.
- Removed outdated data.json file.
2026-08-05 13:46:38 +07:00

68 lines
2.3 KiB
TypeScript

import { Button } from '@/components/ui/button';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from '@/components/ui/tooltip';
import { Link } from '@inertiajs/react';
import type { ReactNode } from 'react';
export type RowAction = {
label: string;
icon: ReactNode;
iconClassName?: string;
show?: boolean;
onClick?: () => void;
href?: string;
};
type RowActionsProps = {
actions: RowAction[];
wrapperClassName?: string;
};
export function RowActions({
actions,
wrapperClassName = 'flex items-center justify-center gap-1',
}: RowActionsProps) {
return (
<TooltipProvider>
<div className={wrapperClassName}>
{actions
.filter((action) => action.show !== false)
.map((action) => (
<Tooltip key={action.label}>
<TooltipTrigger asChild>
{action.href ? (
<Button
variant="ghost"
size="icon"
asChild
className={action.iconClassName}
>
<Link href={action.href}>
{action.icon}
</Link>
</Button>
) : (
<Button
variant="ghost"
size="icon"
onClick={action.onClick}
className={action.iconClassName}
>
{action.icon}
</Button>
)}
</TooltipTrigger>
<TooltipContent side="top">
{action.label}
</TooltipContent>
</Tooltip>
))}
</div>
</TooltipProvider>
);
}