102 lines
3.7 KiB
TypeScript
102 lines
3.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import { FlaskConical, Zap, Target, Lightbulb } from 'lucide-react'
|
|
import { toast } from 'sonner'
|
|
import { useLanguage } from '@/lib/i18n'
|
|
|
|
interface DemoModeToggleProps {
|
|
demoMode: boolean
|
|
onToggle: (enabled: boolean) => Promise<void>
|
|
}
|
|
|
|
export function DemoModeToggle({ demoMode, onToggle }: DemoModeToggleProps) {
|
|
const [isPending, setIsPending] = useState(false)
|
|
const { t } = useLanguage()
|
|
|
|
const handleToggle = async (checked: boolean) => {
|
|
setIsPending(true)
|
|
try {
|
|
await onToggle(checked)
|
|
if (checked) {
|
|
toast.success(t('demoMode.activated'))
|
|
} else {
|
|
toast.success(t('demoMode.deactivated'))
|
|
}
|
|
} catch (error) {
|
|
console.error('Error toggling demo mode:', error)
|
|
toast.error(t('demoMode.toggleFailed'))
|
|
} finally {
|
|
setIsPending(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className={`border-2 transition-all ${
|
|
demoMode
|
|
? 'border-amber-300 bg-gradient-to-br from-amber-50 to-white dark:from-amber-950/30 dark:to-background'
|
|
: 'border-amber-100 dark:border-amber-900/30'
|
|
}`}>
|
|
<CardHeader className="pb-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className={`p-2 rounded-full transition-colors ${
|
|
demoMode
|
|
? 'bg-amber-200 dark:bg-amber-900/50'
|
|
: 'bg-gray-100 dark:bg-gray-800'
|
|
}`}>
|
|
<FlaskConical className={`h-5 w-5 ${
|
|
demoMode ? 'text-amber-600 dark:text-amber-400' : 'text-gray-500'
|
|
}`} />
|
|
</div>
|
|
<div>
|
|
<CardTitle className="text-base flex items-center gap-2">
|
|
🧪 {t('demoMode.title')}
|
|
{demoMode && <Zap className="h-4 w-4 text-amber-500 animate-pulse" />}
|
|
</CardTitle>
|
|
<CardDescription className="text-xs mt-1">
|
|
{t('demoMode.description')}
|
|
</CardDescription>
|
|
</div>
|
|
</div>
|
|
<Switch
|
|
checked={demoMode}
|
|
onCheckedChange={handleToggle}
|
|
disabled={isPending}
|
|
className="data-[state=checked]:bg-amber-600"
|
|
/>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
{demoMode && (
|
|
<CardContent className="pt-0 space-y-2">
|
|
<div className="rounded-lg bg-white dark:bg-zinc-900 border border-amber-200 dark:border-amber-900/30 p-3">
|
|
<p className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
|
{t('demoMode.parametersActive')}
|
|
</p>
|
|
<div className="space-y-1.5 text-xs text-gray-600 dark:text-gray-400">
|
|
<div className="flex items-start gap-2">
|
|
<Target className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
|
|
<span>{t('demoMode.similarityThreshold')}</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<Zap className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
|
|
<span>{t('demoMode.delayBetweenNotes')}</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<Lightbulb className="h-3.5 w-3.5 mt-0.5 text-amber-600 flex-shrink-0" />
|
|
<span>{t('demoMode.unlimitedInsights')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="text-xs text-amber-700 dark:text-amber-400 text-center">
|
|
💡 {t('demoMode.createNotesTip')}
|
|
</p>
|
|
</CardContent>
|
|
)}
|
|
</Card>
|
|
)
|
|
}
|