bd495be965
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 12s
- Sidebar: dynamic brand-accent colors, brainstorm section restyled - AI chat general: popup panel with expand/collapse, hides when contextual AI open - AI chat contextual: tabs reordered (Actions first), X close button, height fix - Settings: all tabs restyled, 6 new color presets (sage, terracotta, iron, etc.) - Global color cleanup: emerald/orange hardcoded → brand-accent dynamic - Brainstorm page: orange → brand-accent throughout - PageEntry animation component added to key pages - Floating AI button: bg-brand-accent instead of hardcoded black - i18n: all 15 locales updated with new AI/billing keys - Billing: freemium quota tracking, BYOK, stripe subscription scaffolding - Admin: integrated into new design - AGENTS.md + CLAUDE.md project rules added
86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
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 (
|
|
<div className={`border rounded-2xl p-8 flex items-center justify-between group transition-all duration-300 ${
|
|
demoMode
|
|
? 'bg-ochre/10 dark:bg-ochre/10 border-ochre/30'
|
|
: 'bg-ochre/5 dark:bg-ochre/10 border-ochre/20 hover:bg-ochre/10'
|
|
}`}>
|
|
<div className="flex items-center gap-6">
|
|
<div className="p-3 bg-paper dark:bg-ochre/20 rounded-2xl text-ochre border border-ochre/30">
|
|
<FlaskConical size={20} />
|
|
</div>
|
|
<div className="space-y-1.5 text-left">
|
|
<h4 className="text-sm font-bold text-ink flex items-center gap-3">
|
|
🧪 {t('demoMode.title')}
|
|
{demoMode && <Zap className="h-4 w-4 text-ochre animate-pulse" />}
|
|
</h4>
|
|
<p className="text-[11px] text-concrete leading-relaxed font-medium">
|
|
{t('demoMode.description')}
|
|
</p>
|
|
{demoMode && (
|
|
<div className="mt-3 rounded-lg bg-white/60 dark:bg-black/20 border border-ochre/20 p-3 space-y-1.5">
|
|
<p className="text-[10px] font-bold text-ink uppercase tracking-wider">{t('demoMode.parametersActive')}</p>
|
|
<div className="space-y-1 text-[10px] text-concrete">
|
|
<div className="flex items-start gap-2">
|
|
<Target className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
|
|
<span>{t('demoMode.similarityThreshold')}</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<Zap className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
|
|
<span>{t('demoMode.delayBetweenNotes')}</span>
|
|
</div>
|
|
<div className="flex items-start gap-2">
|
|
<Lightbulb className="h-3 w-3 mt-0.5 text-ochre shrink-0" />
|
|
<span>{t('demoMode.unlimitedInsights')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
|
|
<input
|
|
type="checkbox"
|
|
className="sr-only peer"
|
|
checked={demoMode}
|
|
onChange={(e) => handleToggle(e.target.checked)}
|
|
disabled={isPending}
|
|
/>
|
|
<div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-ochre" />
|
|
</label>
|
|
</div>
|
|
)
|
|
}
|