8d6accaf60
- Profile settings, account transfer, delete/leave account flows - Email verification with JWT tokens and Resend integration - AI assistant/copilot fixes: markdown rendering, shared RAG helpers, token tracking, input refocus, model_validate usage - User guides hub + detail pages with 13 topic guides - Sidebar and top bar navigation for guides Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
50 lines
1.8 KiB
TypeScript
50 lines
1.8 KiB
TypeScript
import { Lightbulb } from 'lucide-react'
|
|
import type { GuideSection as GuideSectionType } from '@/data/guides'
|
|
|
|
interface GuideSectionProps {
|
|
section: GuideSectionType
|
|
index: number
|
|
}
|
|
|
|
export function GuideSection({ section, index }: GuideSectionProps) {
|
|
return (
|
|
<div className="mb-8">
|
|
<h3 className="text-base font-heading font-semibold text-foreground mb-4 flex items-center gap-2">
|
|
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-primary/10 text-xs font-bold text-primary">
|
|
{index + 1}
|
|
</span>
|
|
{section.title}
|
|
</h3>
|
|
<ol className="space-y-3 pl-8">
|
|
{section.steps.map((step, i) => (
|
|
<li key={i} className="relative">
|
|
<span className="absolute -left-6 top-0.5 font-label text-[0.625rem] text-muted-foreground">
|
|
{i + 1}.
|
|
</span>
|
|
<p
|
|
className="text-sm text-foreground leading-relaxed"
|
|
dangerouslySetInnerHTML={{
|
|
__html: step.instruction
|
|
.replace(/\*\*(.*?)\*\*/g, '<strong class="text-foreground font-semibold">$1</strong>')
|
|
}}
|
|
/>
|
|
{step.detail && (
|
|
<p className="mt-1 text-xs text-muted-foreground leading-relaxed">
|
|
{step.detail}
|
|
</p>
|
|
)}
|
|
{step.tip && (
|
|
<div className="mt-2 flex items-start gap-2 rounded-lg bg-primary/5 border-l-2 border-primary px-3 py-2">
|
|
<Lightbulb size={14} className="text-primary shrink-0 mt-0.5" />
|
|
<p className="text-xs text-muted-foreground leading-relaxed">
|
|
<span className="font-semibold text-foreground">Tip:</span> {step.tip}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
)
|
|
}
|