feat: add BreadcrumbBar.stories.tsx

src/components/BreadcrumbBar.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BreadcrumbBar from './BreadcrumbBar'
+
+const meta = {
+  title: 'General/BreadcrumbBar',
+  component: BreadcrumbBar,
+  parameters: {
+    layout: 'top',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof BreadcrumbBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    breadcrumbList: ['Nodes', 'Nimbus', 'Connect Device'],
+  },
+}

src/components/BreadcrumbBar.tsx

@@ -1,12 +1,16 @@
 import './breadcrumbbar.css'
 
-function BreadcrumbBar() {
+type BreadcrumbBarProps = {
+  breadcrumbList: string[]
+}
+
+function BreadcrumbBar({ breadcrumbList }: BreadcrumbBarProps) {
   return (
     <nav className="breadcrumb-bar-nav">
       <ul className="breadcrumb-bar-ul">
-        <li className="breadcrumb-bar-li">Nodes</li>
-        <li className="breadcrumb-bar-li">Nimbus</li>
-        <li className="breadcrumb-bar-li">Connect Device</li>
+        {breadcrumbList.map(item => (
+          <li className="breadcrumb-bar-li">{item}</li>
+        ))}
       </ul>
     </nav>
   )

src/components/breadcrumbbar.css

@@ -22,7 +22,7 @@
     content: url("../assets/chevron.svg");
     color: #09101C;
     position: absolute;
-    top: -2px;
+    top: 2px;
     left: 100%;
     transform: translateX(-50%);
 }

src/index.css

@@ -37,8 +37,8 @@ h1 {
 
 a {
   font-weight: 500;
-  color: #646cff;
   text-decoration: inherit;
+  cursor: pointer;
 }
 a:hover {
   color: #535bf2;
@@ -46,7 +46,7 @@ a:hover {
 button {
   border-radius: 12px;
   border: 1px solid transparent;
-  /* padding: 0.6em 1.2em; */
+  padding: 0.6em 1.2em;
   font-size: 15px;
   font-weight: 500;
   font-family: inherit;