56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useTransition } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
import { updateAutoPrAction } from '@/actions/products'
|
|
import { toast } from 'sonner'
|
|
import { debugProps } from '@/lib/debug'
|
|
|
|
interface AutoPrToggleProps {
|
|
productId: string
|
|
initialValue: boolean
|
|
}
|
|
|
|
export function AutoPrToggle({ productId, initialValue }: AutoPrToggleProps) {
|
|
const [enabled, setEnabled] = useState(initialValue)
|
|
const [isPending, startTransition] = useTransition()
|
|
|
|
function handleToggle() {
|
|
const newValue = !enabled
|
|
setEnabled(newValue)
|
|
startTransition(async () => {
|
|
const result = await updateAutoPrAction(productId, newValue)
|
|
if (result.error) {
|
|
setEnabled(!newValue)
|
|
toast.error(typeof result.error === 'string' ? result.error : 'Opslaan mislukt')
|
|
}
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-3" {...debugProps('auto-pr-toggle', 'AutoPrToggle', 'components/products/auto-pr-toggle.tsx')}>
|
|
<button
|
|
type="button"
|
|
role="switch"
|
|
aria-checked={enabled}
|
|
onClick={handleToggle}
|
|
disabled={isPending}
|
|
className={cn(
|
|
'relative inline-flex h-5 w-9 shrink-0 cursor-pointer rounded-full border-2 border-transparent',
|
|
'transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
|
|
'disabled:cursor-not-allowed disabled:opacity-50',
|
|
enabled ? 'bg-primary' : 'bg-input',
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
'pointer-events-none inline-block h-4 w-4 rounded-full bg-background shadow-sm',
|
|
'transition-transform duration-200',
|
|
enabled ? 'translate-x-4' : 'translate-x-0',
|
|
)}
|
|
/>
|
|
</button>
|
|
<span className="text-sm text-foreground">Automatisch PR aanmaken na succesvolle agent-job</span>
|
|
</div>
|
|
)
|
|
}
|