refactor(components): extract MainNav component from toolbar

1 files changed, 71 insertions, 0 deletions

diff --git a/src/components/organisms/nav/main-nav/main-nav.stories.tsx b/src/components/organisms/nav/main-nav/main-nav.stories.tsx
new file mode 100644
index 0000000..6333f2c
--- /dev/null
+++ b/src/components/organisms/nav/main-nav/main-nav.stories.tsx
@@ -0,0 +1,71 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Icon } from '../../../atoms';
+import { MainNav } from './main-nav';
+
+/**
+ * MainNav - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Nav/MainNav',
+  component: MainNav,
+  argTypes: {
+    items: {
+      description: 'The main nav items.',
+      type: {
+        name: 'object',
+        required: true,
+        value: {},
+      },
+    },
+  },
+} as ComponentMeta<typeof MainNav>;
+
+const Template: ComponentStory<typeof MainNav> = (args) => (
+  <MainNav {...args} />
+);
+
+/**
+ * MainNav Stories - Default
+ */
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    { id: 'home', label: 'Home', href: '#home' },
+    { id: 'blog', label: 'Blog', href: '#blog' },
+    { id: 'projects', label: 'Projects', href: '#projects' },
+    { id: 'contact', label: 'Contact', href: '#contact' },
+  ],
+};
+
+/**
+ * MainNav Stories - WithLogo
+ */
+export const WithLogo = Template.bind({});
+WithLogo.args = {
+  items: [
+    {
+      id: 'home',
+      label: 'Home',
+      href: '#home',
+      logo: <Icon aria-hidden shape="home" />,
+    },
+    {
+      id: 'blog',
+      label: 'Blog',
+      href: '#blog',
+      logo: <Icon aria-hidden shape="posts-stack" />,
+    },
+    {
+      id: 'projects',
+      label: 'Projects',
+      href: '#projects',
+      logo: <Icon aria-hidden shape="computer" />,
+    },
+    {
+      id: 'contact',
+      label: 'Contact',
+      href: '#contact',
+      logo: <Icon aria-hidden shape="envelop" />,
+    },
+  ],
+};