62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { memo } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip'
|
|
|
|
interface ButtonItem {
|
|
label: string
|
|
disabled?: boolean
|
|
tooltip?: string
|
|
}
|
|
|
|
interface InteractionButtonsProps {
|
|
items: Array<string | ButtonItem>
|
|
disabled?: boolean
|
|
isClicked?: boolean
|
|
onClick: (label: string) => void
|
|
}
|
|
|
|
export const InteractionButtons = memo(
|
|
({ items, disabled, isClicked, onClick }: InteractionButtonsProps) => {
|
|
if (!items?.length) return null
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<div className="flex items-center flex-wrap gap-2 mt-2">
|
|
{items.map((item, idx) => {
|
|
const label = typeof item === 'string' ? item : item.label
|
|
const btnDisabled = typeof item === 'string' ? false : !!item.disabled
|
|
const tooltip = typeof item === 'string' ? undefined : item.tooltip
|
|
|
|
const button = (
|
|
<Button
|
|
key={`${label}_${idx}`}
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={isClicked || disabled || btnDisabled}
|
|
onClick={() => onClick(label)}
|
|
className="h-auto cursor-pointer border-border bg-secondary/60 px-3 py-1.5 text-sm font-normal text-foreground hover:border-primary/40 hover:bg-accent hover:text-primary"
|
|
>
|
|
{label}
|
|
</Button>
|
|
)
|
|
|
|
return tooltip ? (
|
|
<Tooltip key={`${label}_${idx}`}>
|
|
<TooltipTrigger asChild>{button}</TooltipTrigger>
|
|
<TooltipContent>{tooltip}</TooltipContent>
|
|
</Tooltip>
|
|
) : (
|
|
button
|
|
)
|
|
})}
|
|
</div>
|
|
</TooltipProvider>
|
|
)
|
|
},
|
|
)
|