cf068ce4ec
This brings the long-untracked @limitless/ui source tree under version
control. Until now /srv/k8s/templates/limitless-ui has been a plain
file: dependency consumed by gscChronos / gscCRM / gscAdmin, with
copies scattered across web/gsc{Portal,WWW,Aether,Register}/ and
apps/gsc{Meet,Share}/. None were git-tracked.
Treating /srv/k8s/templates/limitless-ui as the canonical going
forward; secondary copies should be replaced with this version
in their consumers' Dockerfiles when they next get touched.
Changes in this initial commit beyond the snapshot:
- Add src/layout/AppShell.tsx — runtime-loaded chrome (header,
sidebar, footer) backed by gsc-shell-api. Public surface:
AppShell, ShellProvider, useShell, ShellConfig types
Framework-agnostic (no Next.js dep). Apps pass appKey + apiUrl +
getToken; AppShell composes the existing PageShell / Navbar /
Sidebar / Footer primitives with API data.
- Re-export AppShell from src/index.ts.
- Fix build script: `tsc -p tsconfig.json --noEmit false`. The bare
`tsc` command was a no-op because tsconfig.json sets noEmit:true
for typecheck speed. Existing dist/ only existed because of an
earlier emit; clean rebuilds were silently broken.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs';
|
|
|
|
export type PageHeaderProps = {
|
|
/** Page title */
|
|
title: React.ReactNode;
|
|
/** Subtitle shown after title */
|
|
subtitle?: React.ReactNode;
|
|
/** Icon before title */
|
|
icon?: React.ReactNode;
|
|
/** Breadcrumb items */
|
|
breadcrumbs?: BreadcrumbItem[];
|
|
/** Breadcrumb line actions (right side of breadcrumb line) */
|
|
breadcrumbActions?: React.ReactNode;
|
|
/** Header actions (buttons, dropdowns on right side of page title) */
|
|
actions?: React.ReactNode;
|
|
/** Additional className */
|
|
className?: string;
|
|
/** Show breadcrumb line (default true) */
|
|
showBreadcrumbLine?: boolean;
|
|
};
|
|
|
|
/**
|
|
* Layout 3 page header component.
|
|
*
|
|
* Structure:
|
|
* - breadcrumb-line (optional): breadcrumbs + header-elements
|
|
* - page-header-content: page-title + header-elements with actions
|
|
*/
|
|
export function PageHeader({
|
|
title,
|
|
subtitle,
|
|
icon,
|
|
breadcrumbs,
|
|
breadcrumbActions,
|
|
actions,
|
|
className = '',
|
|
showBreadcrumbLine = true
|
|
}: PageHeaderProps) {
|
|
return (
|
|
<div className={`page-header ${className}`.trim()}>
|
|
{/* Breadcrumb line */}
|
|
{showBreadcrumbLine && breadcrumbs && (
|
|
<div className="breadcrumb-line breadcrumb-line-light header-elements-md-inline">
|
|
<div className="d-flex">
|
|
<Breadcrumbs items={breadcrumbs} className="mb-0" />
|
|
<a href="#" className="header-elements-toggle text-default d-md-none">
|
|
<i className="icon-more"></i>
|
|
</a>
|
|
</div>
|
|
{breadcrumbActions && (
|
|
<div className="header-elements d-none">
|
|
<div className="breadcrumb justify-content-center">
|
|
{breadcrumbActions}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Page header content */}
|
|
<div className="page-header-content header-elements-md-inline">
|
|
<div className="page-title d-flex">
|
|
<h4>
|
|
{icon && <span className="me-2">{icon}</span>}
|
|
<span className="fw-semibold">{title}</span>
|
|
{subtitle && <span> - {subtitle}</span>}
|
|
</h4>
|
|
<a href="#" className="header-elements-toggle text-default d-md-none">
|
|
<i className="icon-more"></i>
|
|
</a>
|
|
</div>
|
|
|
|
{actions && (
|
|
<div className="header-elements d-none mb-3 mb-md-0">
|
|
{actions}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type BreadcrumbElementProps = {
|
|
icon?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
href?: string;
|
|
};
|
|
|
|
/**
|
|
* Breadcrumb action element for page header.
|
|
*/
|
|
export function BreadcrumbElement({ icon, children, href = '#' }: BreadcrumbElementProps) {
|
|
return (
|
|
<a href={href} className="breadcrumb-elements-item">
|
|
{icon && <span className="me-2">{icon}</span>}
|
|
{children}
|
|
</a>
|
|
);
|
|
}
|