Prism Docs

import { Tabs } from '@mylighthouse/prism-react';

export default function BasicExample(): React.JSX.Element {
  return (
    <div style={{ width: '100%' }}>
      <Tabs defaultValue="overview">
        <Tabs.Container>
          <Tabs.Container.List>
            <Tabs.Container.List.Tab value="overview">
              Overview
            </Tabs.Container.List.Tab>
            <Tabs.Container.List.Tab value="details">
              Details
            </Tabs.Container.List.Tab>
            <Tabs.Container.List.Tab value="settings">
              Settings
            </Tabs.Container.List.Tab>
          </Tabs.Container.List>
        </Tabs.Container>
        <Tabs.Panel className="p-400" value="overview">
          <h3>Overview</h3>
          <p>
            A high-level summary of this resource, its current status, and the
            people who own it.
          </p>
        </Tabs.Panel>
        <Tabs.Panel className="p-400" value="details">
          <h3>Details</h3>
          <p>
            Specific information about properties, configuration, and recent
            activity.
          </p>
        </Tabs.Panel>
        <Tabs.Panel className="p-400" value="settings">
          <h3>Settings</h3>
          <p>Preferences and configuration options for this resource.</p>
        </Tabs.Panel>
      </Tabs>
    </div>
  );
}

import { Button, Tabs } from '@mylighthouse/prism-react';

export default function WithExtraContentExample(): React.JSX.Element {
  return (
    <div style={{ width: '100%' }}>
      <Tabs defaultValue="inbox">
        <Tabs.Container>
          <Tabs.Container.List>
            <Tabs.Container.List.Tab value="inbox">
              Inbox
            </Tabs.Container.List.Tab>
            <Tabs.Container.List.Tab value="archive">
              Archive
            </Tabs.Container.List.Tab>
          </Tabs.Container.List>
          <Button size="small">New message</Button>
        </Tabs.Container>
        <Tabs.Panel className="p-400" value="inbox">
          <h3>Inbox</h3>
          <ul>
            <li>Welcome to the team</li>
            <li>Weekly digest is ready</li>
            <li>Reminder: standup at 10am</li>
          </ul>
        </Tabs.Panel>
        <Tabs.Panel className="p-400" value="archive">
          <h3>Archive</h3>
          <p>Older messages you have archived will appear here.</p>
        </Tabs.Panel>
      </Tabs>
    </div>
  );
}