Sebastian Krüger
413c677173
AppHeader: - Remove shadcn Button → native 8×8 rounded glass icon buttons - Shrink to h-14 (from h-16) to match sidebar header - Add current tool name breadcrumb (navTitle) next to collapse toggle; shows context when sidebar is collapsed or on mobile AppSidebar: - Remove shadcn Button → native button for mobile close - Sidebar narrows to w-60 (from w-64); matches h-14 header - Active state: slim absolute left-bar (0.5px) replaces harsh border-l-2; bg-primary/10 tint kept; no border on the link itself - Nav item text refined: 13px font-medium title + 9px mono description - Border opacity drops to border-border/20 throughout (from border-border) - Footer: smaller mono text, lighter icon opacity AppPage: - Shrink from py-8 / text-2xl to py-5 / text-lg font-semibold - Icon wrapped in 7×7 glass pill (bg-primary/10) matching tool cards - Description moved inline under title as 10px mono, truncated - border-b border-border/20 separator between header and tool content Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface AppPageProps {
|
|
title: string;
|
|
description?: string;
|
|
icon?: React.ElementType;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function AppPage({ title, description, icon: Icon, children, className }: AppPageProps) {
|
|
return (
|
|
<div className={cn('min-h-screen', className)}>
|
|
<div className="max-w-7xl mx-auto px-6 lg:px-8 animate-fade-in">
|
|
|
|
{/* Page header */}
|
|
<div className="py-5 border-b border-border/20 mb-6">
|
|
<div className="flex items-center gap-3">
|
|
{Icon && (
|
|
<div className="w-7 h-7 rounded-lg bg-primary/10 flex items-center justify-center shrink-0">
|
|
<Icon className="w-3.5 h-3.5 text-primary" />
|
|
</div>
|
|
)}
|
|
<div className="min-w-0">
|
|
<h1 className="text-lg font-semibold text-foreground leading-tight">{title}</h1>
|
|
{description && (
|
|
<p className="text-[10px] text-muted-foreground/50 font-mono mt-0.5 truncate">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pb-8">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|