29 lines
983 B
TypeScript
29 lines
983 B
TypeScript
|
import React from 'react';
|
||
|
|
|
||
|
|
interface VSCodeHeaderProps {
|
||
|
|
title: string;
|
||
|
|
showBack?: boolean;
|
||
|
|
onBack?: () => void;
|
||
|
|
actions?: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function VSCodeHeader({ title, showBack, onBack, actions }: VSCodeHeaderProps) {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-border bg-background/80 backdrop-blur-sm sticky top-0 z-10">
|
||
|
|
{showBack && (
|
||
|
|
<button
|
||
|
|
onClick={onBack}
|
||
|
|
className="p-1 -ml-1 rounded hover:bg-muted transition-colors"
|
||
|
|
aria-label="Go back"
|
||
|
|
>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
|
||
|
|
<path d="M11 2L5 8l6 6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
<h1 className="flex-1 text-sm font-medium truncate">{title}</h1>
|
||
|
|
{actions && <div className="flex items-center gap-1">{actions}</div>}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|