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      {
11        type: 'dropdown',
12        label: 'John Doe',
13        links: [
14          {
15            label: 'Admin',
16            href: '#',
17            IconComponent: WrenchScrewdriverIcon,
18          },
19          { label: 'Settings', href: '#', IconComponent: Cog8ToothIcon },
20          { label: 'Profile', href: '#', IconComponent: UserIcon },
21          {
22            label: 'Log out',
23            href: '#',
24            IconComponent: ArrowRightOnRectangleIcon,
25          },
26        ],
27      },
28    ]}
29  />
30)

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)