📕 create story for Logo

src/components/ui/Logo/Logo.module.scss

@@ -1,12 +1,14 @@
 a.logo {
-  @apply flex items-center;
+  &.sidebar {
+    @apply flex items-center justify-start;
 
-  padding: var(--p-level-2);
-  gap: var(--p-level-5);
-  font-size: var(--p24);
+    padding: var(--p-level-3);
+    gap: var(--p-level-5);
+    font-size: var(--p24);
 
-  // Border
-  border-color: inherit;
-  border-bottom-style: solid;
-  border-bottom-width: 1px;
+    // Border
+    border-color: inherit;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+  }
 }

src/components/ui/Logo/Logo.props.ts

@@ -1 +1,3 @@
-export interface LogoProps {}
+export interface LogoProps {
+  variant?: 'sidebar';
+}

src/components/ui/Logo/Logo.stories.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Logo from './Logo';
+
+const meta = {
+  title: 'UI/Logo',
+  component: Logo,
+  tags: ['autodoc'],
+  parameters: {
+    // layout: 'centered',
+  },
+} satisfies Meta<typeof Logo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Sidebar: Story = {
+  args: {
+    variant: 'sidebar',
+  },
+};

src/components/ui/Logo/Logo.tsx

@@ -1,7 +1,8 @@
-import type { VariableFC } from '@xenopomp/advanced-types';
+import type { Defined, VariableFC } from '@xenopomp/advanced-types';
 import cn from 'classnames';
 import { SquareGanttChart } from 'lucide-react';
 import Link from 'next/link';
+import { type ComponentProps } from 'react';
 
 import { AppConstants } from '@/app/app.constants.ts';
 
@@ -10,12 +11,22 @@ import type { LogoProps } from './Logo.props';
 
 const Logo: VariableFC<typeof Link, LogoProps, 'children' | 'href'> = ({
   className,
+  variant = 'sidebar',
   ...props
 }) => {
+  const variantsMap: Record<
+    Defined<typeof variant>,
+    Pick<ComponentProps<typeof Link>, 'className'>
+  > = {
+    sidebar: {
+      className: styles.sidebar,
+    },
+  };
+
   return (
     <Link
       href={'/'}
-      className={cn(styles.logo, className)}
+      className={cn(styles.logo, variantsMap[variant].className, className)}
       {...props}
     >
       <SquareGanttChart