RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add home logo link to app page headers.

Browse Source 
Show a pixel pet logo in the top-right of AppPageHeader that links to the pet home screen.
This commit is contained in:
Harkamal Randhawa
2026-05-24 04:06:39 -06:00
parent 5fefc65412
commit 9e73eaaea7
2 changed files with 61 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/layout/app-page-header.tsx
View File

@@ -1,3 +1,4 @@
import { HomeLogoLink } from "@/components/layout/home-logo-link";
import { cn } from "@/lib/utils";
type AppPageHeaderProps = {
@@ -15,18 +16,26 @@ export function AppPageHeader({
}: AppPageHeaderProps) {
return (
<header className="border-b-2 border-border bg-card/60 shadow-[var(--retro-shadow-sm)]">
<div className={cn("mx-auto px-5 py-5", wide ? "max-w-6xl" : "max-w-lg")}>
{eyebrow ? (
<p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
{eyebrow}
</p>
) : null}
<h1 className="text-sm">{title}</h1>
{description ? (
<p className="mt-2 text-xs leading-relaxed text-muted-foreground">
{description}
</p>
) : null}
<div
className={cn(
"mx-auto flex items-start justify-between gap-4 px-5 py-5",
wide ? "max-w-6xl" : "max-w-lg",
)}
>
<div className="min-w-0 flex-1">
{eyebrow ? (
<p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
{eyebrow}
</p>
) : null}
<h1 className="text-sm">{title}</h1>
{description ? (
<p className="mt-2 text-xs leading-relaxed text-muted-foreground">
{description}
</p>
) : null}
</div>
<HomeLogoLink className="mt-0.5" />
</div>
</header>
);

40
components/layout/home-logo-link.tsx Normal file
View File

@@ -0,0 +1,40 @@
import Link from "next/link";
import { routes } from "@/lib/routes";
import { cn } from "@/lib/utils";
type HomeLogoLinkProps = {
className?: string;
};
export function HomeLogoLink({ className }: HomeLogoLinkProps) {
return (
<Link
href={routes.avatar}
aria-label="Go to home"
className={cn(
"group flex shrink-0 items-center justify-center border-2 border-border bg-card/80 p-2 shadow-[var(--retro-shadow-sm)] transition-transform hover:-translate-y-0.5 hover:border-primary/60",
className,
)}
>
<svg
viewBox="0 0 16 16"
aria-hidden="true"
className="size-8"
style={{ imageRendering: "pixelated" }}
>
<rect x="5" y="2" width="6" height="5" fill="#fdba74" stroke="#1e1b4b" strokeWidth="1" />
<rect x="4" y="3" width="1" height="1" fill="#1e1b4b" />
<rect x="11" y="3" width="1" height="1" fill="#1e1b4b" />
<rect x="6" y="5" width="1" height="1" fill="#1e1b4b" />
<rect x="9" y="5" width="1" height="1" fill="#1e1b4b" />
<rect x="7" y="6" width="2" height="1" fill="#f472b6" />
<rect x="4" y="7" width="8" height="5" fill="#6366f1" stroke="#1e1b4b" strokeWidth="1" />
<rect x="5" y="12" width="2" height="3" fill="#334155" />
<rect x="9" y="12" width="2" height="3" fill="#334155" />
<rect x="2" y="4" width="1" height="1" fill="#f472b6" className="opacity-0 group-hover:opacity-100" />
<rect x="13" y="4" width="1" height="1" fill="#f472b6" className="opacity-0 group-hover:opacity-100" />
</svg>
</Link>
);
}