João Salavisa
36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { Label } from "@kandev/ui/label";
|
|
import { Switch } from "@kandev/ui/switch";
|
|
import { useDraftedIntegrationEnabled } from "./use-drafted-integration-enabled";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
type Props = {
|
|
id: string;
|
|
enabled: boolean;
|
|
persist: (enabled: boolean) => Promise<void> | void;
|
|
};
|
|
|
|
export function DraftedIntegrationEnabledControl({ id, enabled, persist }: Props) {
|
|
const { t } = useTranslation();
|
|
const draft = useDraftedIntegrationEnabled({ id: `${id}-enabled`, enabled, persist });
|
|
return (
|
|
<div
|
|
className="flex items-center gap-2 rounded-full border bg-muted/30 px-3 py-1"
|
|
data-settings-dirty={draft.isDirty}
|
|
data-settings-dirty-level="container"
|
|
>
|
|
<Switch
|
|
id={`${id}-enabled`}
|
|
checked={draft.enabled}
|
|
data-settings-dirty={draft.isDirty}
|
|
onCheckedChange={draft.setEnabled}
|
|
className="cursor-pointer"
|
|
/>
|
|
<Label htmlFor={`${id}-enabled`} className="text-xs cursor-pointer">
|
|
{draft.enabled ? t("integrations:enabled") : t("integrations:disabled")}
|
|
</Label>
|
|
</div>
|
|
);
|
|
}
|