f644937604
Next.js 16, React 19, Monaco editor, Anthropic SDK, multi-provider AI, Wandbox Python execution, iframe HTML preview, SQLite auth + session persistence. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
import type { Topic } from '@/types';
|
|
|
|
export const TOPICS: Topic[] = [
|
|
// ─── Python ──────────────────────────────────────────────────────────────
|
|
{
|
|
id: 'python-variables',
|
|
label: 'Python Variables',
|
|
language: 'python',
|
|
description: 'Learn how to store and work with different types of data',
|
|
starterCode: '# Your code here\n',
|
|
},
|
|
{
|
|
id: 'python-lists',
|
|
label: 'Python Lists',
|
|
language: 'python',
|
|
description: 'Create, modify, and iterate over collections of items',
|
|
starterCode: '# Your code here\n',
|
|
},
|
|
{
|
|
id: 'python-loops',
|
|
label: 'Python Loops',
|
|
language: 'python',
|
|
description: 'Repeat actions with for and while loops',
|
|
starterCode: '# Your code here\n',
|
|
},
|
|
{
|
|
id: 'python-functions',
|
|
label: 'Python Functions',
|
|
language: 'python',
|
|
description: 'Define reusable blocks of code that accept inputs and return outputs',
|
|
starterCode: '# Your code here\n',
|
|
},
|
|
{
|
|
id: 'python-dicts',
|
|
label: 'Python Dictionaries',
|
|
language: 'python',
|
|
description: 'Store and retrieve data using key-value pairs',
|
|
starterCode: '# Your code here\n',
|
|
},
|
|
{
|
|
id: 'python-strings',
|
|
label: 'Python Strings',
|
|
language: 'python',
|
|
description: 'Manipulate text with string methods and formatting',
|
|
starterCode: '# Your code here\n',
|
|
},
|
|
|
|
// ─── HTML / CSS ───────────────────────────────────────────────────────────
|
|
{
|
|
id: 'html-structure',
|
|
label: 'HTML Structure',
|
|
language: 'html',
|
|
description: 'Build the skeleton of a webpage with semantic HTML elements',
|
|
starterCode: '<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>My Page</title>\n</head>\n<body>\n <!-- Your code here -->\n</body>\n</html>\n',
|
|
},
|
|
{
|
|
id: 'css-box-model',
|
|
label: 'CSS Box Model',
|
|
language: 'html',
|
|
description: 'Understand margin, border, padding, and content sizing',
|
|
starterCode: '<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Box Model</title>\n <style>\n /* Your styles here */\n </style>\n</head>\n<body>\n <!-- Your code here -->\n</body>\n</html>\n',
|
|
},
|
|
{
|
|
id: 'css-flexbox',
|
|
label: 'CSS Flexbox',
|
|
language: 'html',
|
|
description: 'Arrange elements in rows and columns with flexbox layout',
|
|
starterCode: '<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Flexbox</title>\n <style>\n /* Your styles here */\n </style>\n</head>\n<body>\n <!-- Your code here -->\n</body>\n</html>\n',
|
|
},
|
|
{
|
|
id: 'html-forms',
|
|
label: 'HTML Forms',
|
|
language: 'html',
|
|
description: 'Collect user input with form elements and validation attributes',
|
|
starterCode: '<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Forms</title>\n</head>\n<body>\n <!-- Your form here -->\n</body>\n</html>\n',
|
|
},
|
|
];
|
|
|
|
export const TOPIC_BY_ID = Object.fromEntries(TOPICS.map((t) => [t.id, t]));
|