Files
CC-Switch/src/components/providers/ProviderActions.tsx
T
Jason 505fa47feb refine: improve visual feedback for in-use provider actions
- Add subtle gray background to "In Use" button for better visual distinction
- Enhance disabled state of delete button with opacity and cursor feedback
- Remove disabled attribute to allow pointer events for better UX
- Prevent delete action via conditional onClick instead of disabled prop
2025-10-19 22:53:33 +08:00

86 lines
2.2 KiB
TypeScript

import { BarChart3, Check, Edit, Play, Trash2 } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";
interface ProviderActionsProps {
isCurrent: boolean;
onSwitch: () => void;
onEdit: () => void;
onConfigureUsage: () => void;
onDelete: () => void;
}
export function ProviderActions({
isCurrent,
onSwitch,
onEdit,
onConfigureUsage,
onDelete,
}: ProviderActionsProps) {
const { t } = useTranslation();
return (
<div className="flex items-center gap-2">
<Button
size="sm"
variant={isCurrent ? "secondary" : "default"}
onClick={onSwitch}
disabled={isCurrent}
className={cn(
"w-20",
isCurrent && "bg-gray-200 text-muted-foreground hover:bg-gray-200 hover:text-muted-foreground dark:bg-gray-700 dark:hover:bg-gray-700",
)}
>
{isCurrent ? (
<>
<Check className="h-4 w-4" />
{t("provider.inUse")}
</>
) : (
<>
<Play className="h-4 w-4" />
{t("provider.enable")}
</>
)}
</Button>
<div className="flex items-center gap-0">
<Button
size="sm"
variant="ghost"
onClick={onEdit}
title={t("common.edit")}
className="px-2 hover:bg-muted"
>
<Edit className="h-4 w-4" />
</Button>
<Button
size="sm"
variant="ghost"
onClick={onConfigureUsage}
title={t("provider.configureUsage")}
className="px-2 hover:bg-muted"
>
<BarChart3 className="h-4 w-4" />
</Button>
<Button
size="sm"
variant="ghost"
onClick={isCurrent ? undefined : onDelete}
title={t("common.delete")}
className={cn(
"px-2",
!isCurrent && "hover:bg-muted hover:text-red-500 dark:hover:text-red-400",
isCurrent && "opacity-40 cursor-not-allowed text-muted-foreground",
)}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</div>
);
}