Add initial project files

2026-09-01 13:03:41 +03:00
parent 22e111bb44
commit 74cb5b6176
1841 changed files with 242819 additions and 30 deletions
@@ -0,0 +1,83 @@
+import { Fragment, ReactNode } from 'react';
+import { Link, useLocation } from 'react-router-dom';
+import { cn } from '@crux-kit/utils';
+import { MenuItem } from '#app/config/types';
+import { useMenuConfig } from '#app/menu';
+import { useMenu } from '#shared/hooks/useMenu';
+import { Container } from '#shared/widgets/common/Container';
+
+export interface ToolbarHeadingProps {
+  title?: string | ReactNode;
+  description?: string | ReactNode;
+}
+
+function Toolbar({ children }: { children?: ReactNode }) {
+  return (
+    <div className="mb-5 lg:mb-7.5">
+      <Container className="flex flex-wrap items-center justify-between gap-5">
+        {children}
+      </Container>
+    </div>
+  );
+}
+
+function ToolbarActions({ children }: { children?: ReactNode }) {
+  return <div className="flex items-center gap-2.5">{children}</div>;
+}
+
+function ToolbarBreadcrumbs() {
+  const menuConfig = useMenuConfig();
+  const { pathname } = useLocation();
+  const { getBreadcrumb, isActive } = useMenu(pathname);
+  const items: MenuItem[] = getBreadcrumb(menuConfig);
+
+  if (items.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="breadcrumb flex items-center gap-1 text-sm">
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+        const active = item.path ? isActive(item.path) : false;
+
+        return (
+          <Fragment key={index}>
+            {item.path ? (
+              <Link
+                to={item.path}
+                className={cn(
+                  'flex items-center gap-1',
+                  active ? 'text-mono' : 'text-secondary-foreground hover:text-primary'
+                )}
+              >
+                {item.title}
+              </Link>
+            ) : (
+              <span className={cn(isLast ? 'text-mono' : 'text-secondary-foreground')}>
+                {item.title}
+              </span>
+            )}
+            {!isLast && <span className="text-muted-foreground">/</span>}
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+const ToolbarHeading = ({ title = '' }: ToolbarHeadingProps) => {
+  const { pathname } = useLocation();
+  const { getCurrentItem } = useMenu(pathname);
+  const menuConfig = useMenuConfig();
+  const item = getCurrentItem(menuConfig);
+
+  return (
+    <div className="flex flex-col flex-wrap gap-1 md:flex-row md:items-center lg:gap-5">
+      <h1 className="text-mono text-lg font-medium">{title || item?.title}</h1>
+      <ToolbarBreadcrumbs />
+    </div>
+  );
+};
+
+export { Toolbar, ToolbarActions, ToolbarBreadcrumbs, ToolbarHeading };