'use client'; import { useState } from 'react'; import type { Topic, SupportedLanguage } from '@/types'; import { TOPICS } from '@/lib/topics'; const PYTHON_ICON = '🐍'; const HTML_ICON = '🌐'; const CUSTOM_STARTER: Record = { python: '# Your code here\n', html: '\n\n\n \n Page\n\n\n \n\n\n', }; interface Props { onSelect: (topic: Topic) => void; onOpenSettings: () => void; } export default function TopicSelector({ onSelect, onOpenSettings }: Props) { const pythonTopics = TOPICS.filter((t) => t.language === 'python'); const htmlTopics = TOPICS.filter((t) => t.language === 'html'); const [customLabel, setCustomLabel] = useState(''); const [customLang, setCustomLang] = useState('python'); function handleCustomSubmit(e: React.FormEvent) { e.preventDefault(); const label = customLabel.trim(); if (!label) return; onSelect({ id: `custom-${Date.now()}`, label, language: customLang, description: 'Custom topic', starterCode: CUSTOM_STARTER[customLang], }); } return (
{/* Header */}

Professor

Choose a topic to start learning with your AI tutor

{/* Python section */}
{/* HTML / CSS section */}
{/* Custom topic */}

✦ Custom

setCustomLabel(e.target.value)} placeholder="e.g. Python Classes, CSS Grid, JavaScript Promises…" className="min-w-0 flex-1 rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2.5 text-sm text-zinc-200 placeholder:text-zinc-600 focus:border-zinc-500 focus:outline-none transition-colors" />
); } function Section({ icon, label, topics, onSelect, }: { icon: string; label: string; topics: Topic[]; onSelect: (topic: Topic) => void; }) { return (

{icon} {label}

{topics.map((topic) => ( ))}
); }