Spaces:
Running
Running
| import type { ReactNode } from "react"; | |
| import { | |
| Button, | |
| CodeBlock, | |
| PageHeader, | |
| PageHeaderActions, | |
| PageHeaderContent, | |
| PageHeaderDescription, | |
| PageHeaderTitle, | |
| } from "lumen-ui-kit"; | |
| import { CloseIcon, Icon } from "lumen-ui-kit/icons"; | |
| export function InlineField({ | |
| id, | |
| label, | |
| children, | |
| className = "", | |
| }: { | |
| id: string; | |
| label: ReactNode; | |
| children: ReactNode; | |
| className?: string; | |
| }) { | |
| return ( | |
| <div | |
| className={`flex min-w-0 flex-row flex-wrap items-center gap-2 ${className}`.trim()} | |
| > | |
| <label | |
| htmlFor={id} | |
| className="mb-0 shrink-0 whitespace-nowrap text-sm font-medium text-lumen-muted-foreground" | |
| > | |
| {label} | |
| </label> | |
| <div className="min-w-0 [&_[data-slot=input]]:h-9 [&_[data-slot=select]]:h-9 [&_input]:h-9 [&_select]:h-9"> | |
| {children} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export function HeaderActions({ | |
| children, | |
| className = "", | |
| }: { | |
| children: ReactNode; | |
| className?: string; | |
| }) { | |
| return ( | |
| <PageHeaderActions | |
| className={`flex flex-wrap items-center gap-2 ${className}`.trim()} | |
| > | |
| {children} | |
| </PageHeaderActions> | |
| ); | |
| } | |
| export function FilterBar({ | |
| children, | |
| className = "", | |
| }: { | |
| children: ReactNode; | |
| className?: string; | |
| }) { | |
| return ( | |
| <div | |
| className={`flex flex-wrap items-center gap-2 ${className}`.trim()} | |
| role="group" | |
| > | |
| {children} | |
| </div> | |
| ); | |
| } | |
| export function Workbench({ | |
| title, | |
| description, | |
| actions, | |
| toolbar, | |
| children, | |
| inspector, | |
| flush = false, | |
| }: { | |
| title: ReactNode; | |
| description?: ReactNode; | |
| actions?: ReactNode; | |
| toolbar?: ReactNode; | |
| children: ReactNode; | |
| inspector?: ReactNode; | |
| flush?: boolean; | |
| }) { | |
| return ( | |
| <div className="flex min-h-0 flex-1 flex-col"> | |
| <div className={"mb-4 px-4 pt-6 sm:px-6"}> | |
| <PageHeader className="sm:items-center"> | |
| <PageHeaderContent> | |
| <PageHeaderTitle>{title}</PageHeaderTitle> | |
| {description ? ( | |
| <PageHeaderDescription>{description}</PageHeaderDescription> | |
| ) : null} | |
| </PageHeaderContent> | |
| {actions ? <HeaderActions>{actions}</HeaderActions> : null} | |
| </PageHeader> | |
| {toolbar ? <div className="mt-4">{toolbar}</div> : null} | |
| </div> | |
| <div | |
| className={ | |
| flush | |
| ? "flex min-h-0 flex-1 px-4 pb-4 sm:px-6" | |
| : "mt-4 flex min-h-0 flex-1 gap-0 px-4 pb-6 sm:px-6" | |
| } | |
| > | |
| <div | |
| className={ | |
| flush | |
| ? "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden" | |
| : "min-h-0 min-w-0 flex-1 overflow-auto border border-lumen-border bg-lumen-surface" | |
| } | |
| > | |
| {children} | |
| </div> | |
| {inspector} | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export function DetailInspector({ | |
| title, | |
| subtitle, | |
| onClose, | |
| children, | |
| }: { | |
| title: ReactNode; | |
| subtitle?: ReactNode; | |
| onClose: () => void; | |
| children: ReactNode; | |
| }) { | |
| return ( | |
| <aside | |
| className="flex w-full shrink-0 flex-col border-t border-lumen-border bg-lumen-surface xl:w-[var(--lumen-layout-rail-width)] xl:border-l xl:border-t-0" | |
| aria-label="Record detail" | |
| > | |
| <div className="flex items-center justify-between gap-3 border-b border-lumen-border px-4 py-3"> | |
| <div className="min-w-0"> | |
| <h2 className="truncate text-sm font-semibold text-lumen-foreground"> | |
| {title} | |
| </h2> | |
| {subtitle ? ( | |
| <p className="mt-0.5 truncate font-mono text-[11px] text-lumen-muted-foreground"> | |
| {subtitle} | |
| </p> | |
| ) : null} | |
| </div> | |
| <Button | |
| type="button" | |
| size="icon" | |
| variant="ghost" | |
| aria-label="Close detail panel" | |
| onClick={onClose} | |
| > | |
| <Icon source={CloseIcon} /> | |
| </Button> | |
| </div> | |
| <div className="min-h-0 flex-1 overflow-auto p-4">{children}</div> | |
| </aside> | |
| ); | |
| } | |
| export function JsonInspector({ | |
| title, | |
| subtitle, | |
| value, | |
| onClose, | |
| }: { | |
| title: ReactNode; | |
| subtitle?: ReactNode; | |
| value: unknown; | |
| onClose: () => void; | |
| }) { | |
| return ( | |
| <DetailInspector | |
| title={title} | |
| subtitle={subtitle} | |
| onClose={onClose} | |
| > | |
| <CodeBlock className="text-[11px] leading-relaxed"> | |
| {JSON.stringify(value, null, 2)} | |
| </CodeBlock> | |
| </DetailInspector> | |
| ); | |
| } | |
| export function PageFrame({ | |
| children, | |
| className = "", | |
| }: { | |
| children: ReactNode; | |
| className?: string; | |
| }) { | |
| return ( | |
| <div className={`px-4 py-6 sm:px-6 ${className}`.trim()}>{children}</div> | |
| ); | |
| } | |