mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-07-17 01:46:07 +00:00
RockChinQ
f592656680
- Add PanelToolbar/PanelBody primitives so all four settings tabs share the same top-toolbar + scrollable-body rhythm under the unified header. - API panel: drop the heavy gray shadowed TabsList; move the create action into the toolbar next to the tabs, lighten per-tab hints. - Storage panel: reuse PanelToolbar for the generated-at/refresh bar. - Account panel: wrap content in PanelBody for consistent padding. - Models panel: keep the pinned LangBot Models (Space) card at the very top, above the add-custom-provider row (intentional pin), using PanelBody instead of a top toolbar.
46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* Shared layout primitives for the settings-dialog panels.
|
|
*
|
|
* Every section renders under the dialog's unified header, so the panels
|
|
* themselves should share the same vertical rhythm: an optional top toolbar
|
|
* (meta on the left, primary action on the right) followed by a scrollable
|
|
* body with consistent padding. Keeping these in one place is what makes the
|
|
* tabs feel like one cohesive surface instead of four separately-styled views.
|
|
*/
|
|
|
|
export function PanelToolbar({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex shrink-0 items-center justify-between gap-3 border-b px-6 py-3',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function PanelBody({
|
|
className,
|
|
children,
|
|
}: {
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<div className={cn('min-h-0 flex-1 overflow-auto px-6 py-5', className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|