diff --git a/src/components/BreadcrumbBar.stories.tsx b/src/components/BreadcrumbBar.stories.tsx new file mode 100644 index 00000000..973ccaad --- /dev/null +++ b/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 + +export default meta +type Story = StoryObj + +export const Default: Story = { + args: { + breadcrumbList: ['Nodes', 'Nimbus', 'Connect Device'], + }, +} diff --git a/src/components/BreadcrumbBar.tsx b/src/components/BreadcrumbBar.tsx index 1909d649..0af4e9af 100644 --- a/src/components/BreadcrumbBar.tsx +++ b/src/components/BreadcrumbBar.tsx @@ -1,12 +1,16 @@ import './breadcrumbbar.css' -function BreadcrumbBar() { +type BreadcrumbBarProps = { + breadcrumbList: string[] +} + +function BreadcrumbBar({ breadcrumbList }: BreadcrumbBarProps) { return ( ) diff --git a/src/components/breadcrumbbar.css b/src/components/breadcrumbbar.css index a70ee33c..16ae9476 100644 --- a/src/components/breadcrumbbar.css +++ b/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%); } diff --git a/src/index.css b/src/index.css index 0f75dbe6..fbc69b3a 100644 --- a/src/index.css +++ b/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;