feat(components/navigation): add Navigation

.gitignore

@@ -38,3 +38,7 @@ yarn-error.log*
 next-env.d.ts
 
 *storybook.log
+
+#lock
+yarn.lock
+package-lock.json

src/components/Navigation/Navigation.props.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'react';
+
+export interface Props extends HTMLAttributes<HTMLDivElement> {
+    activePath?: string;
+}

src/components/Navigation/Navigation.stories.tsx

@@ -0,0 +1,24 @@
+import {Meta, StoryObj} from '@storybook/react';
+import {Props} from './Navigation.props';
+import Navigation from './';
+
+const actionsData = {};
+
+const meta: Meta<Props> = {
+    component: Navigation,
+    args: {...actionsData},
+};
+
+export default meta;
+
+type Story = StoryObj<Props>;
+
+export const Deafult:  Story = {
+    args: {},
+};
+
+export const SchemeSelected: Story = {
+    args: {
+        activePath: '/scheme'
+    },
+};

src/components/Navigation/index.tsx

@@ -0,0 +1,54 @@
+import type {FC} from 'react';
+import {Props} from './Navigation.props';
+import Link from 'next/link';
+import {usePathname} from 'next/navigation';
+
+interface NavigationTab {
+    title: string;
+    path: string;
+}
+
+const navigationTabs: NavigationTab[] = [
+    {title: 'Схема', path: '/scheme'},
+    {title: 'Рассылки', path: '/posts'},
+    {title: 'Настройки', path: '/settings'},
+];
+
+const getTabTileClassNames = ({isActive}: {isActive: boolean}): string => {
+    return `
+        align-baseline
+        py-2
+        font-normal
+        text-2xl
+        hover:text-white hover:underline 
+        underline-offset-8 transition-all duration-200  decoration-2 decoration-color-white-underline
+        text-nowrap
+        ${isActive ? ' underline text-white' : 'text-color-white-unselected'} 
+    `;
+};
+
+const Navigation: FC<Props> = ({activePath, className, ...props}) => {
+    const activeNextPathName = usePathname();
+    activePath = activePath === undefined ? activeNextPathName : activePath;
+    return (
+        <div className={`${className} w-full max-w-10`} {...props}>
+            <ul className='flex gap-4 '>
+                {navigationTabs.map((item, index) => {
+                    return (
+                        <li key={index}>
+                            <Link
+                                href={item.path}
+                                className={`${getTabTileClassNames({
+                                    isActive: item.path === activePath,
+                                })}`}>
+                                {item.title}{' '}
+                            </Link>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};
+
+export default Navigation;

tailwind.config.ts

@@ -1,36 +1,38 @@
-import type { Config } from "tailwindcss";
-import defaultTheme from 'tailwindcss/defaultTheme'
+import type {Config} from 'tailwindcss';
+import defaultTheme from 'tailwindcss/defaultTheme';
 
 const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Roboto', ...defaultTheme.fontFamily.sans],
-      },
-      colors: {
-        'support-separator': '#33FFFFFF',
-        'support-overlay' : '#52000000',
-        'label-primary': '#FFFFFF',
-        'label-secondary': '#99FFFFFF',
-        'label-tertiary': '#66FFFFFF',
-        'label-disable': '#26FFFFFF',
-        'color-red': '#FF453A',
-        'color-green': '#32D74B',
-        'color-blue': '#0A84FF',
-        'color-grey': '#8E8E93',
-        'color-gray-light': '#48484A',
-        'color-white': '#FFFFFF',
-        'back-primary': '#161618',
-        'back-secondary': '#252528',
-        'back-elevated': '#3C3C3F',
-      }
+    content: [
+        './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+        './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    ],
+    theme: {
+        extend: {
+            fontFamily: {
+                sans: ['Roboto', ...defaultTheme.fontFamily.sans],
+            },
+            colors: {
+                'support-separator': '#33FFFFFF',
+                'support-overlay': '#52000000',
+                'label-primary': '#FFFFFF',
+                'label-secondary': '#99FFFFFF',
+                'label-tertiary': '#66FFFFFF',
+                'label-disable': '#26FFFFFF',
+                'color-red': '#FF453A',
+                'color-green': '#32D74B',
+                'color-blue': '#0A84FF',
+                'color-grey': '#8E8E93',
+                'color-gray-light': '#48484A',
+                'color-white': '#FFFFFF',
+                'color-white-unselected': 'rgba(255, 255, 255, 0.6)',
+                'color-white-underline': 'rgba(255, 255, 255, 0.8)',
+                'back-primary': '#161618',
+                'back-secondary': '#252528',
+                'back-elevated': '#3C3C3F',
+            },
+        },
     },
-  },
-  plugins: [],
+    plugins: [],
 };
 export default config;