303a558432
3,200+ hardcoded color values replaced with CSS variable-backed Tailwind classes (bg-card, text-foreground, border-border, etc.). Enables light mode via CSS variable swap. Only syntax highlighting colors and intentional one-offs remain hardcoded (~15 values). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
import { CheckCircle2, ArrowRight, Plus } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import type { KBCommitResponse } from '@/types/kbAccelerator'
|
|
|
|
interface SuccessScreenProps {
|
|
result: KBCommitResponse
|
|
onViewFlow: () => void
|
|
onConvertAnother: () => void
|
|
}
|
|
|
|
export function SuccessScreen({ result, onViewFlow, onConvertAnother }: SuccessScreenProps) {
|
|
return (
|
|
<div className="max-w-lg mx-auto text-center space-y-6 py-12">
|
|
<div className="flex justify-center">
|
|
<div className="w-16 h-16 rounded-full bg-emerald-400/10 flex items-center justify-center">
|
|
<CheckCircle2 size={32} className="text-emerald-400" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 className="text-xl font-heading font-semibold text-foreground">
|
|
Flow Created Successfully
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground mt-2">
|
|
Your KB article has been converted into a {result.tree_type === 'troubleshooting' ? 'troubleshooting' : 'project'} flow
|
|
and added to your library.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-3">
|
|
<button
|
|
onClick={onViewFlow}
|
|
className={cn(
|
|
'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-semibold transition-all',
|
|
'bg-primary text-white',
|
|
'hover:brightness-110 active:scale-[0.98]'
|
|
)}
|
|
>
|
|
View Flow
|
|
<ArrowRight size={16} />
|
|
</button>
|
|
<button
|
|
onClick={onConvertAnother}
|
|
className={cn(
|
|
'flex items-center gap-2 px-6 py-2.5 rounded-lg text-sm font-medium transition-colors',
|
|
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
|
|
'hover:border-[rgba(255,255,255,0.12)]'
|
|
)}
|
|
>
|
|
<Plus size={16} />
|
|
Convert Another
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|