mercury-web/src/features/assets/DetailHeader.tsx

47 lines
1.2 KiB
TypeScript

"use client";
import Link from "next/link";
import { Icon } from "@/ds";
import { assetsStrings as s } from "./strings";
/**
* Shared header for the account / manual-asset / lending detail pages: a
* round back button + title, matching the row/typography language used
* across the rest of the Assets feature.
*/
export function DetailHeader({ title }: { title: string }) {
return (
<header style={{ display: "flex", alignItems: "center", gap: 12 }}>
<Link
href="/assets"
aria-label={s.common.back}
style={{
display: "grid",
placeItems: "center",
width: 36,
height: 36,
flexShrink: 0,
borderRadius: 12,
background: "var(--seed-color-bg-neutral-subtle, #eef0f2)",
color: "var(--seed-color-fg-neutral)",
}}
>
<Icon name="chevron-left" size={20} />
</Link>
<h1
style={{
margin: 0,
fontSize: 18,
fontWeight: 700,
flex: 1,
minWidth: 0,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{title}
</h1>
</header>
);
}