64 lines
2.6 KiB
TypeScript
64 lines
2.6 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { chapters } from '../education/chapters';
|
|
import { Card } from './ui/card';
|
|
import { ScrollArea } from './ui/scroll-area';
|
|
import { Button } from './ui/button';
|
|
|
|
export function EducationPanel() {
|
|
const [selected, setSelected] = useState<number>(chapters[0].id);
|
|
const [completed, setCompleted] = useState<number[]>([]);
|
|
const chapter = chapters.find(c => c.id === selected);
|
|
|
|
const markComplete = (id: number) => {
|
|
if (!completed.includes(id)) {
|
|
setCompleted([...completed, id]);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-full bg-card border-l border-border min-w-[320px] max-w-[420px] flex-col">
|
|
<div className="flex items-center gap-2 px-4 py-2 border-b border-border bg-card/80">
|
|
<h2 className="font-semibold text-xs tracking-wide uppercase text-muted-foreground">Foundation Curriculum</h2>
|
|
<span className="ml-auto text-xs text-muted-foreground">{completed.length}/{chapters.length} Complete</span>
|
|
</div>
|
|
<div className="flex flex-row flex-1 min-h-0">
|
|
<div className="w-40 border-r border-border bg-card/60">
|
|
<ScrollArea className="h-full">
|
|
<ul className="py-2">
|
|
{chapters.map(c => (
|
|
<li key={c.id} className="flex items-center">
|
|
<button
|
|
className={`w-full text-left px-3 py-2 text-xs font-medium rounded hover:bg-muted/60 transition-colors ${selected === c.id ? 'bg-muted/80' : ''}`}
|
|
onClick={() => setSelected(c.id)}
|
|
>
|
|
{c.title}
|
|
</button>
|
|
{completed.includes(c.id) && (
|
|
<span className="ml-2 text-green-500 text-xs">✓</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</ScrollArea>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<ScrollArea className="h-full px-4 py-4">
|
|
<Card className="p-4">
|
|
<div className="prose prose-sm max-w-none" dangerouslySetInnerHTML={{ __html: chapter ? chapter.content.replace(/\n/g, '<br/>') : '' }} />
|
|
<div className="mt-4 flex justify-end">
|
|
<Button
|
|
variant={completed.includes(selected) ? 'outline' : 'accent'}
|
|
size="sm"
|
|
disabled={completed.includes(selected)}
|
|
onClick={() => markComplete(selected)}
|
|
>
|
|
{completed.includes(selected) ? 'Completed' : 'Mark Complete'}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</ScrollArea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|