Vocabulary Data

export interface Term {
  id: number;
  term: string;
  definition: string;
  eli5Definition?: string;
  category: string;
  example?: string;
}

{ 
  id: 1, 
  term: "Vibe Coding", 
  definition: "Building apps by describing what you want to AI, instead of writing code yourself", 
  eli5Definition: "Telling a robot what to build and it builds it for you - like magic!", 
  category: "foundation" 
}

{
  id: 51,
  term: "Hero Section",
  definition: "The big, bold first thing people see on a page. Usually has a headline, subtext, and a button.",
  eli5Definition: "The big welcome mat at the front door of your website",
  category: "uiux",
  example: `┌────────────────────┐
│   BIG HEADLINE     │
│  some subtext here │
│     [ Button ]     │
└────────────────────┘`
}

export const categories = [
  { 
    id: "foundation", 
    name: "Foundation", 
    subtitle: "Core Concepts", 
    icon: "architecture", 
    abbrev: "FDN", 
    colorClass: "bg-category-yellow" 
  },
  { 
    id: "api", 
    name: "APIs", 
    subtitle: "Endpoints", 
    icon: "integration_instructions", 
    abbrev: "API", 
    colorClass: "bg-category-gray" 
  },
  // ... 22 more categories
] as const;

export type CategoryId = typeof categories[number]["id"];

import { terms } from '@/data/vocabulary';

// All 483 terms as an array
const allTerms = terms;

import { getTermsByCategory } from '@/data/vocabulary';

const foundationTerms = getTermsByCategory('foundation');
const apiTerms = getTermsByCategory('api');

import { categories } from '@/data/vocabulary';

categories.forEach(cat => {
  console.log(cat.name); // "Foundation", "APIs", etc.
});

{
  id: 60,
  term: "Card",
  definition: "A contained box with related info (image, title, description, button).",
  eli5Definition: "A neat little box with a picture and words, like a baseball card",
  category: "uiux",
  example: `┌──────────┐
│  image   │
├──────────┤
│ Title    │
│ desc...  │
│ [button] │
└──────────┘`
}