Navigation

Navbar

1import { Navbar } from 'ui'
2
3const NavigationExample = () => (
4  <Navbar
5    navigation={[
6      { type: 'link', label: 'Home', href: '#', current: true },
7      { type: 'link', label: 'Blog', href: '#', current: false },
8      { type: 'link', label: 'Ranking', href: '#', current: false },
9      { type: 'link', label: 'Manual', href: '#', current: false },
10      { type: 'link', label: 'Forum', href: '#', current: false },
11      {
12        type: 'dropdown',
13        label: 'John Doe',
14        links: [
15          {
16            label: 'Admin',
17            href: '#',
18            IconComponent: WrenchScrewdriverIcon,
19          },
20          { label: 'Settings', href: '#', IconComponent: Cog8ToothIcon },
21          { label: 'Profile', href: '#', IconComponent: UserIcon },
22          {
23            label: 'Log out',
24            href: '#',
25            IconComponent: ArrowRightOnRectangleIcon,
26          },
27        ],
28      },
29    ]}
30  />
31)

Navbar

1import { Tabbar } from 'ui'
2
3const TabbarExample = () => (
4  <Tabbar
5    links={[
6      {
7        href: '/contests/official',
8        label: 'Official contests',
9        active: false,
10      },
11      {
12        href: '/contests/user-contests',
13        label: 'User contests',
14        active: false,
15      },
16      {
17        href: '/contests/my-contests',
18        label: 'My contests',
19        active: true,
20      },
21    ]}
22  />
23)