43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import { AppHeader } from "./AppHeader";
|
||
|
||
interface HeaderProps {
|
||
title?: string;
|
||
action?: string;
|
||
showBack?: boolean;
|
||
onBack?: () => void;
|
||
onActionClick?: () => void;
|
||
}
|
||
|
||
const headerActionStyle = {
|
||
backgroundImage: `
|
||
linear-gradient(180deg, #2E1B3D 0%, #23183E 100%),
|
||
linear-gradient(120deg, #7c3aed 0%, #f97316 58%, #facc15 100%)
|
||
`,
|
||
backgroundOrigin: "border-box",
|
||
backgroundClip: "padding-box, border-box",
|
||
border: "0.5px solid transparent",
|
||
boxShadow:
|
||
"0 -7px 20px rgba(7, 0, 18, 0.5), 0 6px 14px rgba(5, 2, 12, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 2px 5px rgba(255, 222, 255, 0.09), inset 0 -2px 0 rgba(12, 7, 27, 0.72), inset 0 -8px 14px rgba(8, 4, 18, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.045), inset 0 0 0 2px rgba(17, 10, 35, 0.32)",
|
||
backdropFilter: "blur(14px)",
|
||
WebkitBackdropFilter: "blur(14px)",
|
||
} as const;
|
||
|
||
export function Header({ showBack = false, onBack, action, onActionClick }: HeaderProps) {
|
||
return (
|
||
<header className="app-header relative">
|
||
<AppHeader showBack={showBack} onBack={onBack} />
|
||
{action === "history" && onActionClick && (
|
||
<button
|
||
type="button"
|
||
onClick={onActionClick}
|
||
className="absolute right-[64px] top-3 h-10 px-3 rounded-full text-white text-xs font-bold border-[0.5px] border-transparent z-30"
|
||
style={headerActionStyle}
|
||
aria-label="تاریخچه چت"
|
||
>
|
||
تاریخچه
|
||
</button>
|
||
)}
|
||
</header>
|
||
);
|
||
}
|