fetch breadcrumbs from api; button disabled support; component fix

src/components/App/index.tsx

@@ -8,6 +8,8 @@ import { Content } from '../Content'
 import { Block } from '../Block'
 import { Breadcrumbs } from '../Breadcrumbs'
 import { IBreadcumbsPart } from 'src/types'
+import { useRouter } from 'next/router'
+import { route } from 'next/dist/next-server/server/router'
 
 const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), {
     ssr: false,
@@ -21,6 +23,7 @@ export interface IAppProps {
 }
 
 export const App: React.FC<IAppProps> = props => {
+    const router = useRouter()
     const wide = props.wide ?? false
     const blockStyle = {
         alignItems: 'center'
@@ -36,7 +39,8 @@ export const App: React.FC<IAppProps> = props => {
                             <Block direction={'vertical'} style={blockStyle}>
                                 <Content wide={wide}>
                                     <Breadcrumbs
-                                        path={props.breadcrumbs}
+                                        items={props.breadcrumbs}
+                                        path={router.asPath}
                                     />
                                 </Content>
                             </Block>

src/components/Breadcrumbs/index.tsx

@@ -2,30 +2,41 @@ import './styles.css'
 
 import { IBreadcumbsPart } from 'src/types'
 import { Button } from '../Button'
+import { insertBetween } from 'src/lib/array'
 
 export type BreadcrumbsProps = {
     style?: React.CSSProperties
-    path: IBreadcumbsPart[]
+    items: IBreadcumbsPart[]
+    path: string
 }
 
 export const Breadcrumbs: React.FC<BreadcrumbsProps> = props => {
+    const items = insertBetween(props.items, () => '/')
+
     return (
         <nav className={'breadcrumbs'} style={props.style}>
-            {props.path.map((x, i) => (
-                <li key={x.href}>
-                    <Button
-                        href={x.href}
-                        theme={'ghost'}
-                        size={'small'}
-                    >
-                        {x.name}
-                    </Button>
+            {items.map((x, i) => {
+                if (typeof x === 'string') {
+                    return (
+                        <li key={i}>
+                            <span style={{ margin: '0 var(--size-xs)' }}>{x}</span>
+                        </li>
+                    )
+                }
 
-                    {!(i < props.path.length - 1) ? null : (
-                        <span style={{ margin: '0 var(--size-xs)' }}>/</span>
-                    )}
-                </li>
-            ))}
-        </nav>
+                return (
+                    <li key={x.href}>
+                        <Button
+                            href={x.href}
+                            theme={'ghost'}
+                            size={'small'}
+                            disabled={x.href === props.path}
+                        >
+                            {x.name}
+                        </Button>
+                    </li>
+                )
+            })}
+        </nav >
     )
 }

src/components/Breadcrumbs/styles.css

@@ -5,3 +5,9 @@
     position: relative;
     right: var(--size-s);
 }
+
+.breadcrumbCurrent {
+    color: var(--color-text-second);
+    font-size: var(--font-size-second);
+    text-overflow: ellipsis;
+}

src/components/Button/index.tsx

@@ -8,13 +8,18 @@ export type ButtonProps = {
     href?: string
     theme?: 'default' | 'ghost'
     size?: 'default' | 'small'
+    disabled?: boolean
 }
 
-export const Button: React.FC<ButtonProps> = ({ size='default', theme = 'default', ...props }) => {
+export const Button: React.FC<ButtonProps> = ({ size = 'default', theme = 'default', disabled = false, ...props }) => {
+    const className = cx('button', theme, size, {
+        disabled
+    })
+
     if (props.href) {
         return (
             <Link href={props.href}>
-                <a className={cx('button', theme, size)} style={props.style}>
+                <a className={className} style={props.style}>
                     {props.children}
                 </a>
             </Link>
@@ -22,7 +27,7 @@ export const Button: React.FC<ButtonProps> = ({ size='default', theme = 'default
     }
 
     return (
-        <button className={'button'} style={props.style}>
+        <button className={className} style={props.style}>
             {props.children}
         </button>
     )

src/components/Button/styles.css

@@ -24,6 +24,13 @@
     box-shadow: var(--shadow-active);
 }
 
+/* MODIFICATORS */
+
+.button.disabled {
+    pointer-events: none;
+    color: var(--color-text-second);
+}
+
 /* THEME */
 
 .button.ghost {