Establish NODE.DC design system baseline

2026-07-10 02:34:36 +03:00
commit 73629d68c3
63 changed files with 6701 additions and 0 deletions
@@ -0,0 +1,56 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { cn } from "./cn";
+
+export interface AppHeaderProps extends HTMLAttributes<HTMLElement> {
+  brand: ReactNode;
+  brandHref?: string;
+  brandLabel?: string;
+  left?: ReactNode;
+  center?: ReactNode;
+  right?: ReactNode;
+}
+
+export function AppHeader({
+  brand,
+  brandHref,
+  brandLabel = "NODE.DC",
+  left,
+  center,
+  right,
+  className,
+  ...props
+}: AppHeaderProps) {
+  const brandNode = brandHref ? (
+    <a className="nodedc-header__brand" href={brandHref} aria-label={brandLabel}>{brand}</a>
+  ) : (
+    <span className="nodedc-header__brand" aria-label={brandLabel}>{brand}</span>
+  );
+
+  return (
+    <header className={cn("nodedc-header-shell", className)} {...props}>
+      <div className="nodedc-header">
+        <div className="nodedc-header__left">{brandNode}{left}</div>
+        <div className="nodedc-header__center">{center}</div>
+        <div className="nodedc-header__right">{right}</div>
+      </div>
+    </header>
+  );
+}
+
+export function HeaderProfile({ children, className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("nodedc-header__profile", className)} {...props}>{children}</div>;
+}
+
+export interface HeaderWorkspaceProps extends HTMLAttributes<HTMLSpanElement> {
+  label: string;
+  imageUrl?: string;
+}
+
+export function HeaderWorkspace({ label, imageUrl, className, ...props }: HeaderWorkspaceProps) {
+  return (
+    <span className={cn("nodedc-header__workspace", className)} title={label} {...props}>
+      {imageUrl ? <img src={imageUrl} alt="" /> : label.slice(0, 2).toUpperCase()}
+    </span>
+  );
+}
+