Radix UI Playground

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import './styles.css'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

import { useState } from 'react'
import { Dialog, Switch, Tabs } from 'radix-ui'
import { ActivityCard } from './components/ActivityCard'

const activity = [
  { title: 'Navigation menu', detail: 'Keyboard flow reviewed', status: 'Ready' },
  { title: 'Settings dialog', detail: 'Focus trap verified', status: 'Ready' },
  { title: 'Account switcher', detail: 'Labels need review', status: 'Review' },
]

export default function App() {
  const [notifications, setNotifications] = useState(true)
  const [saved, setSaved] = useState(false)

  const savePreferences = () => {
    setSaved(true)
    window.setTimeout(() => setSaved(false), 1800)
  }

  return (
    <main className="app-shell">
      <section className="workspace" aria-labelledby="page-title">
        <header className="page-header">
          <div className="brand-mark" aria-hidden="true">
            <span />
            <span />
            <span />
          </div>
          <div className="heading-copy">
            <p className="eyebrow">RADIX PRIMITIVES · REACT 19</p>
            <h1 id="page-title">Interface health</h1>
            <p>Accessible building blocks, composed into a real product surface.</p>
          </div>
          <span className="status-pill"><i /> All systems ready</span>
        </header>

        <Tabs.Root className="tabs" defaultValue="overview">
          <Tabs.List className="tabs-list" aria-label="Interface health sections">
            <Tabs.Trigger className="tabs-trigger" value="overview">Overview</Tabs.Trigger>
            <Tabs.Trigger className="tabs-trigger" value="activity">Activity</Tabs.Trigger>
          </Tabs.List>

          <Tabs.Content className="tabs-content" value="overview">
            <div className="summary-grid">
              <article className="metric-card">
                <span>Accessibility score</span>
                <strong>98</strong>
                <small>+4 this release</small>
              </article>
              <article className="metric-card">
                <span>Primitives in use</span>
                <strong>12</strong>
                <small>Across 7 flows</small>
              </article>
              <article className="metric-card">
                <span>Open reviews</span>
                <strong>3</strong>
                <small>2 due today</small>
              </article>
            </div>

            <div className="settings-card">
              <div>
                <h2>Release notifications</h2>
                <p>Get an update when accessibility reviews are complete.</p>
              </div>
              <Switch.Root
                className="switch-root"
                checked={notifications}
                onCheckedChange={setNotifications}
                aria-label="Release notifications"
              >
                <Switch.Thumb className="switch-thumb" />
              </Switch.Root>
            </div>
          </Tabs.Content>

          <Tabs.Content className="tabs-content" value="activity">
            <div className="activity-list">
              {activity.map((item) => <ActivityCard key={item.title} {...item} />)}
            </div>
          </Tabs.Content>
        </Tabs.Root>

        <Dialog.Root>
          <Dialog.Trigger asChild>
            <button className="primary-button">Review preferences</button>
          </Dialog.Trigger>
          <Dialog.Portal>
            <Dialog.Overlay className="dialog-overlay" />
            <Dialog.Content className="dialog-content">
              <Dialog.Title>Notification preferences</Dialog.Title>
              <Dialog.Description>
                Choose whether this workspace should send release review updates.
              </Dialog.Description>
              <label className="dialog-setting">
                <span>
                  <strong>Release notifications</strong>
                  <small>{notifications ? 'Currently enabled' : 'Currently disabled'}</small>
                </span>
                <Switch.Root
                  className="switch-root"
                  checked={notifications}
                  onCheckedChange={setNotifications}
                  aria-label="Dialog release notifications"
                >
                  <Switch.Thumb className="switch-thumb" />
                </Switch.Root>
              </label>
              <div className="dialog-actions">
                <Dialog.Close asChild>
                  <button className="secondary-button">Cancel</button>
                </Dialog.Close>
                <Dialog.Close asChild>
                  <button className="primary-button" onClick={savePreferences}>
                    Save preferences
                  </button>
                </Dialog.Close>
              </div>
            </Dialog.Content>
          </Dialog.Portal>
        </Dialog.Root>

        <p className="save-status" aria-live="polite">
          {saved ? 'Preferences saved.' : ''}
        </p>
      </section>
    </main>
  )
}