76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Loader2, Check, X } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { toast } from 'sonner'
|
|
|
|
interface SettingToggleProps {
|
|
label: string
|
|
description?: string
|
|
checked: boolean
|
|
onChange: (checked: boolean) => Promise<void>
|
|
disabled?: boolean
|
|
}
|
|
|
|
export function SettingToggle({
|
|
label,
|
|
description,
|
|
checked,
|
|
onChange,
|
|
disabled
|
|
}: SettingToggleProps) {
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
const [error, setError] = useState(false)
|
|
|
|
const handleChange = async (newChecked: boolean) => {
|
|
setIsLoading(true)
|
|
setError(false)
|
|
|
|
try {
|
|
await onChange(newChecked)
|
|
toast.success('Setting saved', {
|
|
description: `${label} has been ${newChecked ? 'enabled' : 'disabled'}`
|
|
})
|
|
} catch (err) {
|
|
console.error('Error updating setting:', err)
|
|
setError(true)
|
|
toast.error('Failed to save setting', {
|
|
description: 'Please try again'
|
|
})
|
|
} finally {
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={cn(
|
|
'flex items-center justify-between py-4',
|
|
'border-b last:border-0 dark:border-gray-800'
|
|
)}>
|
|
<div className="flex-1 pr-4">
|
|
<Label className="font-medium text-gray-900 dark:text-gray-100 cursor-pointer">
|
|
{label}
|
|
</Label>
|
|
{description && (
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{isLoading && <Loader2 className="h-4 w-4 animate-spin text-gray-500" />}
|
|
{!isLoading && !error && checked && <Check className="h-4 w-4 text-green-500" />}
|
|
{!isLoading && !error && !checked && <X className="h-4 w-4 text-gray-400" />}
|
|
<Switch
|
|
checked={checked}
|
|
onCheckedChange={handleChange}
|
|
disabled={disabled || isLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|