forge/examples/navigation.tsx

import { define } from '../src'
import { Layout, ExampleSection } from './helpers'

const Tabs = define('Tabs', {
  display: 'flex',
  gap: 0,
  borderBottom: '2px solid #e5e7eb',

  parts: {
    Tab: {
      base: 'button',

      padding: '12px 24px',
      position: 'relative',
      marginBottom: -2,
      background: 'transparent',
      border: 'none',
      borderBottom: '2px solid transparent',
      color: '#6b7280',
      fontSize: 14,
      fontWeight: 500,
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          color: '#111827',
        }
      }
    }
  },

  variants: {
    active: {
      parts: {
        Tab: {
          color: '#3b82f6',
          borderBottom: '2px solid #3b82f6',
        }
      }
    }
  },

  render({ props, parts: { Root, Tab } }) {
    return (
      <Root>
        <script dangerouslySetInnerHTML={{
          __html: `
          const ClickTab = (label) => console.log('Tab clicked:', label)
          `}} />

        {props.items?.map((item: any) => (
          <Tab
            key={item.id}
            active={item.active}
            onClick={`ClickTab("${item.label}")`}
          >
            {item.label}
          </Tab>
        ))}
      </Root>
    )
  }
})

const Pills = define('Pills', {
  display: 'flex',
  gap: 8,
  flexWrap: 'wrap',

  parts: {
    Pill: {
      base: 'button',

      padding: '8px 16px',
      background: '#f3f4f6',
      border: 'none',
      borderRadius: 20,
      color: '#6b7280',
      fontSize: 14,
      fontWeight: 500,
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          background: '#e5e7eb',
          color: '#111827',
        }
      }
    }
  },

  variants: {
    active: {
      parts: {
        Pill: {
          background: '#3b82f6',
          color: 'white',
          states: {
            ':hover': {
              background: '#2563eb',
              color: 'white',
            }
          }
        }
      }
    }
  },

  render({ props, parts: { Root, Pill } }) {
    return (
      <Root>
        {props.items?.map((item: any) => (
          <Pill
            key={item.id}
            active={item.active}
            onclick={() => console.log('Pill clicked:', item.label)}
          >
            {item.label}
          </Pill>
        ))}
      </Root>
    )
  }
})

const VerticalNav = define('VerticalNav', {
  display: 'flex',
  flexDirection: 'column',
  gap: 4,
  width: 240,

  parts: {
    NavItem: {
      base: 'a',

      padding: '12px 16px',
      display: 'flex',
      alignItems: 'center',
      gap: 12,

      background: 'transparent',
      borderRadius: 8,
      color: '#6b7280',
      fontSize: 14,
      fontWeight: 500,
      textDecoration: 'none',
      cursor: 'pointer',
      transition: 'all 0.2s ease',

      states: {
        ':hover': {
          background: '#f3f4f6',
          color: '#111827',
        }
      }
    },
    Icon: {
      width: 20,
      height: 20,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: 18,
    }
  },

  variants: {
    active: {
      parts: {
        NavItem: {
          background: '#eff6ff',
          color: '#3b82f6',
          states: {
            ':hover': {
              background: '#dbeafe',
              color: '#2563eb',
            }
          }
        }
      }
    }
  },

  render({ props, parts: { Root, NavItem, Icon } }) {
    return (
      <Root>
        {props.items?.map((item: any) => (
          <NavItem
            key={item.id}
            active={item.active}
            href={item.href || '#'}
          >
            {item.icon && <Icon>{item.icon}</Icon>}
            {item.label}
          </NavItem>
        ))}
      </Root>
    )
  }
})

const Breadcrumbs = define('Breadcrumbs', {
  display: 'flex',
  alignItems: 'center',
  gap: 8,
  flexWrap: 'wrap',

  parts: {
    Item: {
      base: 'a',

      color: '#6b7280',
      fontSize: 14,
      textDecoration: 'none',
      transition: 'color 0.2s ease',

      states: {
        ':hover': {
          color: '#3b82f6',
        }
      }
    },
    Separator: {
      color: '#d1d5db',
      fontSize: 14,
      userSelect: 'none',
    },
    Current: {
      color: '#111827',
      fontSize: 14,
      fontWeight: 500,
    }
  },

  render({ props, parts: { Root, Item, Separator, Current } }) {
    return (
      <Root>
        {props.items?.map((item: any, index: number) => (
          <>
            {index === props.items.length - 1 ? (
              <Current key={item.id}>{item.label}</Current>
            ) : (
              <>
                <Item key={item.id} href={item.href || '#'}>
                  {item.label}
                </Item>
                <Separator>/</Separator>
              </>
            )}
          </>
        ))}
      </Root>
    )
  }
})

export const NavigationExamplesPage = () => (
  <Layout title="Forge Navigation Examples">
    <ExampleSection title="Tabs">
      <Tabs items={[
        { id: 1, label: 'Overview', active: true },
        { id: 2, label: 'Analytics', active: false },
        { id: 3, label: 'Reports', active: false },
        { id: 4, label: 'Settings', active: false },
      ]} />
    </ExampleSection>

    <ExampleSection title="Pills">
      <Pills items={[
        { id: 1, label: 'All', active: true },
        { id: 2, label: 'Active', active: false },
        { id: 3, label: 'Pending', active: false },
        { id: 4, label: 'Archived', active: false },
      ]} />
    </ExampleSection>

    <ExampleSection title="Vertical Navigation">
      <VerticalNav items={[
        { id: 1, label: 'Dashboard', icon: '📊', active: true, href: '#' },
        { id: 2, label: 'Projects', icon: '📁', active: false, href: '#' },
        { id: 3, label: 'Team', icon: '👥', active: false, href: '#' },
        { id: 4, label: 'Calendar', icon: '📅', active: false, href: '#' },
        { id: 5, label: 'Documents', icon: '📄', active: false, href: '#' },
        { id: 6, label: 'Settings', icon: '⚙️', active: false, href: '#' },
      ]} />
    </ExampleSection>

    <ExampleSection title="Breadcrumbs">
      <Breadcrumbs items={[
        { id: 1, label: 'Home', href: '#' },
        { id: 2, label: 'Projects', href: '#' },
        { id: 3, label: 'Website Redesign', href: '#' },
        { id: 4, label: 'Design Assets' },
      ]} />
    </ExampleSection>
  </Layout>
)