mirror of
https://github.com/langbot-app/LangBot.git
synced 2026-06-21 21:14:20 +00:00
RockChinQ
876e8bf804
- PanelToolbar: allow wrapping and tighten padding on small screens so the primary action (e.g. "创建 API 密钥") no longer runs off the dialog edge. - ProviderCard header: let the provider name truncate and pin the model-count badge and right-side action group with shrink-0 so credits / + controls stay inside the card on narrow viewports.
51 lines
1.1 KiB
TypeScript
51 lines
1.1 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 flex-wrap items-center justify-between gap-2 border-b px-3 py-3 sm:gap-3 sm:px-6',
|
|
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-3 py-4 sm:px-6 sm:py-5',
|
|
className,
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|