mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-07-26 23:51:14 +02:00
refactor(artifacts-panel): improve header layout and button styles for better UI consistency
This commit is contained in:
parent
fc2366c81e
commit
bf9d536757
1 changed files with 19 additions and 13 deletions
|
|
@ -70,19 +70,25 @@ export function ArtifactsPanelContent({ onClose }: { onClose?: () => void }) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-12 shrink-0 items-center justify-between border-b px-3">
|
||||
<h2 className="select-none text-lg font-semibold">Artifacts</h2>
|
||||
{onClose && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
className="h-8 w-8 shrink-0 rounded-full text-muted-foreground hover:text-accent-foreground"
|
||||
>
|
||||
<XIcon className="h-4 w-4" />
|
||||
<span className="sr-only">Close artifacts panel</span>
|
||||
</Button>
|
||||
)}
|
||||
<div className="shrink-0">
|
||||
<div className="grid h-12 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b px-4">
|
||||
<div className="min-w-0 flex flex-1 items-center gap-2">
|
||||
<p className="truncate text-sm text-muted-foreground">Artifacts</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
{onClose && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={onClose}
|
||||
className="size-6 shrink-0 rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
|
||||
>
|
||||
<XIcon className="size-4" />
|
||||
<span className="sr-only">Close artifacts panel</span>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ArtifactGroups artifacts={artifacts} />
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue