68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
/**
|
|
* Tool Chip Component
|
|
* @description Displays a tool chip with name, close button, and redirect button
|
|
*/
|
|
|
|
import { X, ArrowRight } from 'lucide-react';
|
|
import type { Tool } from '@/types';
|
|
|
|
/**
|
|
* ToolChip component props
|
|
*/
|
|
interface ToolChipProps {
|
|
/** Tool object to display */
|
|
tool: Tool;
|
|
/** Callback when delete button is clicked */
|
|
onDelete: (id: string) => void;
|
|
/** Callback when redirect button is clicked */
|
|
onRedirect: (id: string) => void;
|
|
}
|
|
|
|
/**
|
|
* ToolChip component
|
|
* @description Chip component for displaying tools with delete and redirect actions
|
|
* Matches Figma design with exact styling
|
|
* @param tool - The tool object containing id, name, and color
|
|
* @param onDelete - Callback function called when delete button is clicked, receives tool id
|
|
* @param onRedirect - Callback function called when redirect button is clicked, receives tool id
|
|
* @returns {JSX.Element} A chip component displaying the tool with action buttons
|
|
*/
|
|
export function ToolChip({ tool, onDelete, onRedirect }: ToolChipProps): JSX.Element {
|
|
return (
|
|
<div className="bg-white border border-[#eef1f7] border-solid flex gap-8 h-[32px] items-center px-3 py-[5px] relative rounded-[6px] shrink-0">
|
|
<div className="flex items-center relative shrink-0">
|
|
<p
|
|
className="font-normal leading-[1.5] not-italic relative shrink-0 text-[14px]"
|
|
style={{ color: tool.color }}
|
|
>
|
|
{tool.name}
|
|
</p>
|
|
</div>
|
|
<div className="flex gap-1 items-center justify-end leading-[0] relative shrink-0">
|
|
{/* Close Button - matches Figma design */}
|
|
<button
|
|
type="button"
|
|
onClick={() => onDelete(tool.id)}
|
|
className="relative size-[18px] flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity group"
|
|
aria-label={`Delete ${tool.name}`}
|
|
>
|
|
<div className="absolute inset-0 size-[18px] rounded-full bg-[rgba(0,0,0,0.08)] group-hover:bg-[rgba(0,0,0,0.12)] transition-colors" />
|
|
<X className="absolute size-[14.4px] text-black ml-[1.8px] mt-[2.1px]" strokeWidth={2} />
|
|
</button>
|
|
|
|
{/* Redirect Button - matches Figma design */}
|
|
<button
|
|
type="button"
|
|
onClick={() => onRedirect(tool.id)}
|
|
className="relative size-[16px] flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity group"
|
|
aria-label={`Configure ${tool.name}`}
|
|
>
|
|
<div className="absolute inset-0 size-[16px] rounded-full bg-[rgba(0,0,0,0.08)] group-hover:bg-[rgba(0,0,0,0.12)] transition-colors" />
|
|
<ArrowRight className="absolute size-[12.8px] text-black ml-[1.78px] mt-[1.78px]" strokeWidth={2} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|