import { useState } from 'react';
import { Button } from './ui/button/Button';

export function Actions() {
  const [action, setAction] = useState('');
  return (
    <div
      onClick={event => {
        const target = (event.target as Element).closest('button');
        if (target && !target.disabled) setAction(target.textContent ?? '');
      }}
      style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}
    >
      <Button variant='cta'>Start curriculum</Button>
      <Button variant='default'>Secondary</Button>
      <Button variant='danger'>Dangerous</Button>
      <Button variant='ghost'>Ghost</Button>
      <Button size='sm'>Small</Button>
      <Button size='lg'>Large</Button>
      <Button disabled>Disabled</Button>
      <p role='status' style={{ flexBasis: '100%', margin: 0 }}>
        {action && `Selected: ${action}`}
      </p>
    </div>
  );
}

import { Badge } from './ui/badge/Badge';

export function Example() {
  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        gap: 16
      }}
    >
      <Badge>Default</Badge>
      <Badge variant='success'>Passed</Badge>
      <Badge variant='warning'>In review</Badge>
      <Badge variant='danger'>Failed</Badge>
    </div>
  );
}

import { Button } from './ui/button/Button';
import { useState } from 'react';
import { CloseButton } from './ui/close-button/CloseButton';

export function DismissibleNotice() {
  const [visible, setVisible] = useState(true);
  return visible ? (
    <div>
      Changes saved.{' '}
      <CloseButton
        onClick={() => setVisible(false)}
        aria-label='Dismiss notice'
      />
    </div>
  ) : (
    <Button onClick={() => setVisible(true)}>Show notice again</Button>
  );
}

import { Link } from './ui/link/Link';

export function Example() {
  return (
    <p>
      Explore the <Link href='/handbook#color'>token layer</Link> to recolor
      every component.
    </p>
  );
}

import { Spacer } from './ui/spacer/Spacer';

export function Example() {
  return (
    <div style={{ display: 'flex' }}>
      <span>start</span>
      <Spacer size={6} />
      <span>end</span>
    </div>
  );
}

import { Image } from './ui/image/Image';

export function Example() {
  return (
    <Image
      style={{ background: '#f5f6f7', padding: 16 }}
      src='/brand/fcc-secondary.svg'
      alt='freeCodeCamp mark'
      caption='freeCodeCamp mark'
    />
  );
}

import { Text } from './ui/text/Text';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <Text size='lg'>Large body - section ledes and emphasis.</Text>
      <Text>Default body - eighteen pixels minimum.</Text>
      <Text size='sm' tone='muted'>
        Caption - annotations, metadata, footnotes.
      </Text>
    </div>
  );
}

import { Heading } from './ui/heading/Heading';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <Heading level={1} size='display'>
        Command-line Chic.
      </Heading>
      <Heading level={2} size='xl'>
        Ship interfaces.
      </Heading>
      <Heading level={3} size='lg'>
        Composable primitives.
      </Heading>
      <Heading level={4} size='md'>
        Flat surfaces.
      </Heading>
      <Heading level={5} size='sm'>
        Square corners.
      </Heading>
    </div>
  );
}

import { Divider } from './ui/divider/Divider';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <Divider />
      <Divider variant='dashed' />
      <div style={{ display: 'flex', alignItems: 'center', height: 48 }}>
        <span>Before</span>
        <Divider orientation='vertical' />
        <span>After</span>
      </div>
    </div>
  );
}

import { Avatar } from './ui/avatar/Avatar';

export function Example() {
  return (
    <div
      style={{
        display: 'flex',
        flexWrap: 'wrap',
        alignItems: 'center',
        gap: 16
      }}
    >
      <Avatar size='sm' name='Rosie Wilson' />
      <Avatar size='md' name='Quincy Larson' status='online' />
      <Avatar size='lg' name='Quincy Larson' status='away' />
    </div>
  );
}

import { FormGroup } from './ui/form-group/FormGroup';
import { Input } from './ui/input/Input';
import { HelpBlock } from './ui/help-block/HelpBlock';

export function Example() {
  return (
    <FormGroup>
      <label htmlFor='email'>Email address</label>
      <Input id='email' type='email' placeholder='camper@example.com' />
      <HelpBlock>We send one curriculum update per week.</HelpBlock>
    </FormGroup>
  );
}

import { Checkbox } from './ui/checkbox/Checkbox';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <Checkbox defaultChecked label='I accept the honor code' />
      <Checkbox label='Email me certificate alerts' />
    </div>
  );
}

import { useState } from 'react';
import { ToggleButton } from './ui/toggle-button/ToggleButton';
export function Pressed() {
  const [on, setOn] = useState(false);
  return (
    <ToggleButton pressed={on} onPressedChange={setOn}>
      {on ? 'On' : 'Off'}
    </ToggleButton>
  );
}

import { Switch } from './ui/switch/Switch';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <Switch defaultChecked label='Keyboard shortcuts' />
      <Switch label='Sound effects' />
    </div>
  );
}

import { FormGroup } from './ui/form-group/FormGroup';
import { Input } from './ui/input/Input';
import { HelpBlock } from './ui/help-block/HelpBlock';

export function Example() {
  return (
    <FormGroup>
      <label htmlFor='username'>Username</label>
      <Input id='username' defaultValue='camper-42' />
      <HelpBlock>Letters, numbers, and dashes. Public.</HelpBlock>
    </FormGroup>
  );
}

import { FormGroup } from './ui/form-group/FormGroup';
import { FormControl } from './ui/form-control/FormControl';

export function Example() {
  return (
    <FormGroup>
      <label htmlFor='curriculum-search'>Search curriculum</label>
      <FormControl id='curriculum-search' placeholder='Search the curriculum' />
    </FormGroup>
  );
}

import { HelpBlock } from './ui/help-block/HelpBlock';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <HelpBlock>We send one curriculum update per week.</HelpBlock>
      <HelpBlock variant='success'>Username available.</HelpBlock>
      <HelpBlock variant='error'>Username already in use.</HelpBlock>
    </div>
  );
}

import { Fieldset } from './ui/fieldset/Fieldset';
import { RadioGroup, Radio } from './ui/radio/Radio';

export function Example() {
  return (
    <Fieldset legend='Notification cadence'>
      <RadioGroup
        aria-label='Notification cadence'
        name='cadence'
        defaultValue='weekly'
      >
        <Radio value='weekly' label='Weekly digest' />
        <Radio value='per-cert' label='Per-cert' />
        <Radio value='never' label='Never' />
      </RadioGroup>
    </Fieldset>
  );
}

import { Radio, RadioGroup } from './ui/radio/Radio';

export function Example() {
  return (
    <RadioGroup name='theme' defaultValue='dark' aria-label='Theme'>
      <Radio value='dark' label='Dark - default' />
      <Radio value='light' label='Light' />
      <Radio value='system' label='System' />
    </RadioGroup>
  );
}

import { FormGroup } from './ui/form-group/FormGroup';
import { Select } from './ui/select/Select';

export function Example() {
  return (
    <FormGroup>
      <label htmlFor='difficulty'>Difficulty</label>
      <Select id='difficulty' defaultValue='intermediate'>
        <option value='beginner'>Beginner</option>
        <option value='intermediate'>Intermediate</option>
        <option value='advanced'>Advanced</option>
      </Select>
    </FormGroup>
  );
}

import { FormGroup } from './ui/form-group/FormGroup';
import { Textarea } from './ui/textarea/Textarea';

export function Example() {
  return (
    <FormGroup>
      <label htmlFor='bio'>Bio</label>
      <Textarea
        id='bio'
        rows={3}
        placeholder='What are you learning right now?'
      />
    </FormGroup>
  );
}

import { FormStepper } from './ui/form-stepper/FormStepper';
import { Button } from './ui/button/Button';
import { useState } from 'react';

const steps = [
  { id: 'account', label: 'Account', description: 'Email + handle' },
  { id: 'goals', label: 'Goals', description: 'What to learn first' },
  { id: 'confirm', label: 'Confirm', description: 'Review + start' }
];
const content = [
  'Create your account.',
  'Choose your learning goals.',
  'Review your choices.'
];

export function Example() {
  const [index, setIndex] = useState(0);
  return (
    <FormStepper
      steps={steps}
      current={steps[index]!.id}
      onStepChange={id => setIndex(steps.findIndex(step => step.id === id))}
    >
      {() => (
        <div>
          <p role='status'>{content[index]}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
            <Button disabled={index === 0} onClick={() => setIndex(index - 1)}>
              Back
            </Button>
            <Button
              variant='cta'
              onClick={() =>
                setIndex(index === steps.length - 1 ? 0 : index + 1)
              }
            >
              {index === steps.length - 1 ? 'Start again' : 'Next'}
            </Button>
          </div>
        </div>
      )}
    </FormStepper>
  );
}

import { Tabs, Tab } from './ui/tabs/Tabs';

export function Example() {
  return (
    <Tabs defaultActiveKey='instructions'>
      <Tab eventKey='instructions' title='Instructions'>
        Build a page with a heading and a paragraph.
      </Tab>
      <Tab eventKey='tests' title='Tests'>
        Your heading and paragraph tests pass.
      </Tab>
      <Tab eventKey='console' title='Console'>
        Ready. Run your code to see its output.
      </Tab>
    </Tabs>
  );
}

import { useState } from 'react';
import { Pagination } from './ui/pagination/Pagination';

export function Example() {
  const [page, setPage] = useState(2);

  return (
    <Pagination
      count={120}
      pageSize={10}
      page={page}
      onPageChange={page => setPage(page)}
    />
  );
}

import { Listbox } from './ui/listbox/Listbox';
import { useState } from 'react';

export function Example() {
  const ITEMS = [
    { value: 'frontend', label: 'Frontend' },
    { value: 'backend', label: 'Backend' }
  ];

  const [value, setValue] = useState<string | string[]>('frontend');

  return (
    <Listbox
      aria-label='Learning track'
      items={ITEMS}
      value={value}
      onValueChange={setValue}
    />
  );
}

import { Breadcrumb } from './ui/breadcrumb/Breadcrumb';

export function Example() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href='/'>Docs</Breadcrumb.Item>
      <Breadcrumb.Item href='/playground#navbar'>Navigation</Breadcrumb.Item>
      <Breadcrumb.Item active>Breadcrumb</Breadcrumb.Item>
    </Breadcrumb>
  );
}

import { Combobox, filterItemsByLabel } from './ui/combobox/Combobox';
import { useState } from 'react';

export function Example() {
  const ALL = [
    { value: 'rwd', label: 'Responsive Web Design' },
    { value: 'js', label: 'JavaScript Algorithms' }
  ];

  const [query, setQuery] = useState('');
  const [value, setValue] = useState<string | null>(null);
  const items = filterItemsByLabel(ALL, query);

  return (
    <Combobox
      inputValue={query}
      onInputValueChange={setQuery}
      value={value}
      onValueChange={setValue}
      items={items}
      aria-label='Certification'
      placeholder='Pick a certification'
    />
  );
}

import { Navbar } from './ui/navbar/Navbar';
import { Button } from './ui/button/Button';
import { Link } from './ui/link/Link';

export function Example() {
  return (
    <Navbar
      start={<strong>freeCodeCamp</strong>}
      center={
        <>
          <Link href='https://www.freecodecamp.org/learn/'>Curriculum</Link>
          <Link href='https://forum.freecodecamp.org/'>Forum</Link>
          <Link href='https://www.freecodecamp.org/news/'>News</Link>
        </>
      }
      end={
        <Button
          variant='cta'
          onClick={() =>
            window.location.assign('https://www.freecodecamp.org/signin')
          }
        >
          Sign in
        </Button>
      }
    />
  );
}

import { Sidebar, SidebarSection } from './ui/sidebar/Sidebar';

export function Example() {
  return (
    <Sidebar aria-label='Curriculum'>
      <SidebarSection label='Learn'>
        <a href='https://www.freecodecamp.org/learn/'>Curriculum</a>
      </SidebarSection>
    </Sidebar>
  );
}

import { useState } from 'react';
import { Modal } from './ui/modal/Modal';
import { Button } from './ui/button/Button';

export function Details() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>View details</Button>
      <Modal open={open} onClose={() => setOpen(false)} title='Your progress'>
        <Modal.Body>
          <p>Your work is saved.</p>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={() => setOpen(false)}>Continue learning</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

import { useState } from 'react';
import { Tooltip } from './ui/tooltip/Tooltip';
import { Button } from './ui/button/Button';

export function Example() {
  const [complete, setComplete] = useState(false);
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Tooltip content='Runs the public test suite against your code.'>
        <Button onClick={() => setComplete(true)}>Run tests</Button>
      </Tooltip>
      {complete && <p role='status'>Example tests passed.</p>}
    </div>
  );
}

import { useState } from 'react';
import { Dropdown } from './ui/dropdown/Dropdown';

export function Example() {
  const [sort, setSort] = useState('Most recent');
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <Dropdown>
        <Dropdown.Toggle>Sort</Dropdown.Toggle>
        <Dropdown.Menu>
          {['Most recent', 'Alphabetical', 'Hardest first'].map(option => (
            <Dropdown.Item
              key={option}
              as='button'
              active={sort === option}
              onSelect={() => setSort(option)}
            >
              {option}
            </Dropdown.Item>
          ))}
        </Dropdown.Menu>
      </Dropdown>
      <p role='status' style={{ margin: 0 }}>
        Sort order: {sort}
      </p>
    </div>
  );
}

import { Button } from './ui/button/Button';
import { Toaster, createToaster } from './ui/toast/Toast';
const toaster = createToaster({});
export function SaveNotice() {
  return (
    <>
      <Button
        onClick={() => toaster.create({ title: 'Saved', type: 'success' })}
      >
        Save
      </Button>
      <Toaster toaster={toaster} />
    </>
  );
}

import { Button } from './ui/button/Button';
import { useState } from 'react';
import { CommandPalette } from './ui/command-palette/CommandPalette';

export function Example() {
  const GROUPS = [
    {
      label: 'Navigation',
      items: [
        { id: 'curriculum', label: 'Go to curriculum', shortcut: 'G C' },
        { id: 'settings', label: 'Open settings', shortcut: 'G S' }
      ]
    }
  ];

  const [open, setOpen] = useState(false);
  const [selected, setSelected] = useState('');

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open commands</Button>
      <p role='status'>{selected && `Selected: ${selected}`}</p>
      <CommandPalette
        open={open}
        onClose={() => setOpen(false)}
        onSelect={id => {
          setSelected(id);
          setOpen(false);
        }}
        groups={GROUPS}
        placeholder='Type a command or search…'
      />
    </>
  );
}

import { Card } from './ui/card/Card';
import { Link } from './ui/link/Link';

export function Example() {
  return (
    <Card>
      <Card.Header>
        <span className='card__dot card__dot--purple' aria-hidden='true' />
        <p className='card__hours'>300 HOURS</p>
      </Card.Header>
      <Card.Title>Responsive Web Design</Card.Title>
      <Card.Body>Build five certification projects...</Card.Body>
      <Card.Footer>
        <span>62% complete</span>
        <Link href='https://www.freecodecamp.org/learn/2022/responsive-web-design/'>
          Resume →
        </Link>
      </Card.Footer>
    </Card>
  );
}

import { Panel } from './ui/panel/Panel';

export function Example() {
  return (
    <Panel title='Editor hints'>
      Your code runs against the first test each time you save.
    </Panel>
  );
}

import { Alert } from './ui/alert/Alert';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <Alert variant='success'>
        All 28 tests pass. Next challenge unlocked.
      </Alert>
      <Alert variant='warning'>You have one unsaved edit.</Alert>
      <Alert variant='danger'>Sign-in failed - check your email address.</Alert>
    </div>
  );
}

import { Callout } from './ui/callout/Callout';

export function Example() {
  return (
    <Callout variant='tip' label='Tip'>
      Open the editor fullscreen with <kbd>F11</kbd>.
    </Callout>
  );
}

import { Table } from './ui/table/Table';
import { Badge } from './ui/badge/Badge';

export function Example() {
  return (
    <div
      role='region'
      aria-label='Certification progress'
      tabIndex={0}
      style={{ width: '100%', overflowX: 'auto' }}
    >
      <Table>
        <thead>
          <tr>
            <th>Certification</th>
            <th>Projects</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Responsive Web Design</td>
            <td>5 / 5</td>
            <td>
              <Badge variant='success'>Passed</Badge>
            </td>
          </tr>
        </tbody>
      </Table>
    </div>
  );
}

import { DescriptionList } from './ui/description-list/DescriptionList';

export function Example() {
  return (
    <DescriptionList
      items={[
        { term: 'Username', detail: 'camper-42' },
        { term: 'Joined', detail: '2014-04-12' },
        { term: 'Certifications', detail: '3 of 14' }
      ]}
    />
  );
}

import { Skeleton } from './ui/skeleton/Skeleton';

export function Example() {
  return (
    <div style={{ display: 'grid', gap: 16, width: '100%' }}>
      <Skeleton variant='circle' width={48} height={48} />
      <Skeleton variant='text' width='80%' />
      <Skeleton variant='text' width='60%' />
    </div>
  );
}

import { useState } from 'react';
import { EmptyState } from './ui/empty-state/EmptyState';
import { Button } from './ui/button/Button';

export function Example() {
  const [started, setStarted] = useState(false);
  if (started)
    return (
      <div>
        <p role='status'>Your first learning goal is ready.</p>
        <Button onClick={() => setStarted(false)}>Reset example</Button>
      </div>
    );
  return (
    <EmptyState
      title='No learning goals yet'
      description='Add a goal to start planning your next project.'
      action={
        <Button variant='cta' onClick={() => setStarted(true)}>
          Add learning goal
        </Button>
      }
    />
  );
}

import { DataTable, type DataTableSort } from './ui/data-table/DataTable';
import { useState } from 'react';

const rows = [
  { id: 'rwd', cert: 'Responsive Web Design', hours: 300 },
  { id: 'js', cert: 'JavaScript', hours: 300 }
];

export function Certifications() {
  const [sortBy, setSortBy] = useState<DataTableSort | null>(null);
  const sorted = [...rows].sort((a, b) =>
    sortBy
      ? a.cert.localeCompare(b.cert) * (sortBy.direction === 'asc' ? 1 : -1)
      : 0
  );
  return (
    <DataTable
      columns={[
        {
          id: 'cert',
          accessor: 'cert',
          header: 'Certification',
          sortable: true
        },
        { id: 'hours', accessor: 'hours', header: 'Hours', align: 'right' }
      ]}
      rows={sorted}
      sortBy={sortBy}
      onSortChange={setSortBy}
    />
  );
}

import { SidebarLayout } from './ui/sidebar-layout/SidebarLayout';
import { Sidebar } from './ui/sidebar/Sidebar';
import { Navbar } from './ui/navbar/Navbar';

export function Example() {
  return (
    <SidebarLayout
      header={<Navbar start='freeCodeCamp' />}
      sidebar={
        <Sidebar aria-label='Curriculum'>
          <a href='https://www.freecodecamp.org/learn/'>Learn</a>
        </Sidebar>
      }
    >
      <h1>Curriculum</h1>
    </SidebarLayout>
  );
}

import { StackedLayout } from './ui/stacked-layout/StackedLayout';
import { Navbar } from './ui/navbar/Navbar';

export function Example() {
  return (
    <StackedLayout
      header={<Navbar start='freeCodeCamp' />}
      footer={<footer>…</footer>}
    >
      <h1>Curriculum</h1>
    </StackedLayout>
  );
}

import { useState } from 'react';
import { Link } from './ui/link/Link';
import { AuthLayout } from './ui/auth-layout/AuthLayout';
import { Input } from './ui/input/Input';
import { FormGroup } from './ui/form-group/FormGroup';
import { Button } from './ui/button/Button';

export function Example() {
  const [message, setMessage] = useState('');
  return (
    <AuthLayout
      pattern
      brand='freeCodeCamp'
      footer={
        <Link href='https://www.freecodecamp.org/signin'>
          Sign in to freeCodeCamp
        </Link>
      }
    >
      <form
        onSubmit={event => {
          event.preventDefault();
          const fields = new FormData(event.currentTarget);
          setMessage(`Ready to continue with ${fields.get('email')}.`);
        }}
      >
        <FormGroup>
          <label htmlFor='auth-email'>Email</label>
          <Input
            id='auth-email'
            name='email'
            type='email'
            autoComplete='email'
            required
          />
        </FormGroup>
        <Button type='submit' variant='cta' block>
          Continue
        </Button>
        <p role='status' style={{ margin: message ? '16px 0 0' : 0 }}>
          {message}
        </p>
      </form>
    </AuthLayout>
  );
}

import { TileMatcher, type TileMatcherPair } from './ui/tile-matcher/TileMatcher';

const pairs: TileMatcherPair[] = [
  { id: 'html', faces: ['HTML', 'Structure'] },
  { id: 'css', faces: ['CSS', 'Style'] },
  { id: 'js', faces: ['JS', 'Behavior'] }
];

export function Drill() {
  return (
    <TileMatcher
      pairs={pairs}
      columns={3}
      seed={1}
      onMatch={id => console.log('matched', id)}
      onComplete={({ moves }) => console.log('done in', moves, 'moves')}
    />
  );
}

import { Hotspots, type HotspotItem } from './ui/hotspots/Hotspots';
import { RectHotspot, EllipseHotspot } from './ui/hotspot-shapes/HotspotShapes';

const Diagram = () => (
  <svg viewBox='0 0 200 140' role='img' aria-label='Three shapes'>
    <rect x='33' y='25' width='29' height='92' fill='currentColor' />
    <ellipse cx='100' cy='75' rx='30' ry='45' fill='currentColor' />
    <rect x='138' y='25' width='29' height='92' fill='currentColor' />
  </svg>
);

const HOTSPOTS: HotspotItem[] = [
  {
    id: 'bracket-left',
    label: 'Opening Paren',
    shape: <RectHotspot x={33} y={25} width={29} height={92} />
  },
  {
    id: 'fire',
    label: 'Ellipse',
    shape: <EllipseHotspot cx={100} cy={75} rx={30} ry={45} />
  },
  {
    id: 'bracket-right',
    label: 'Closing Paren',
    shape: <RectHotspot x={138} y={25} width={29} height={92} />
  }
];

export function HotspotsDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 360, margin: '0 auto' }}>
      <Hotspots
        background={<Diagram />}
        width={200}
        height={140}
        hotspots={HOTSPOTS}
        targetId='fire'
        prompt='Click the ellipse'
        onCorrect={id => console.log('correct', id)}
      />
    </div>
  );
}