Sebastian Krüger
a400f694fe
- Create lib/tools.tsx as single source of truth for all tool metadata (title, shortTitle, navTitle, description, summary, icon, etc.) - Update AppSidebar to render nav from centralized tools list with descriptions, remove collapse footer button - Update AppHeader with sidebar collapse toggle, tool short title, and app logo; remove breadcrumbs - Update AppPage to auto-resolve tool icon from pathname - Update ToolsGrid/ToolCard to use shared tools data, remove per-card gradients for uniform styling - Add per-tool HTML title via metadata exports (title template in root layout) - Style landing page and 404 headings with primary theme color - Add Toolbox icon to hero CTA, GitFork icon link in footer - Remove footer from error page and "View on Dev" buttons - Extract ColorPage client component for RSC metadata compatibility Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { cn } from '@/lib/utils';
|
|
import { getToolByHref } from '@/lib/tools';
|
|
|
|
interface AppPageProps {
|
|
title: string;
|
|
description?: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function AppPage({ title, description, children, className }: AppPageProps) {
|
|
const pathname = usePathname();
|
|
const firstSegment = pathname.split('/').filter(Boolean)[0];
|
|
const tool = getToolByHref(`/${firstSegment ?? ''}`);
|
|
const Icon = tool?.icon;
|
|
|
|
return (
|
|
<div className={cn("min-h-screen py-8", className)}>
|
|
<div className="max-w-7xl mx-auto px-8 space-y-6 animate-fade-in">
|
|
<div>
|
|
<div className="flex items-center gap-3 mb-1">
|
|
{Icon && <Icon className="h-6 w-6 text-primary shrink-0" />}
|
|
<h1 className="text-2xl font-bold">{title}</h1>
|
|
</div>
|
|
{description && (
|
|
<p className="text-sm text-muted-foreground">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|