feat(260411-022): compact global items catalog header

- Replace arrow entity + "Dashboard" back link with ArrowLeft icon + "Discover"
- Consolidate title and search into a single flex row (wraps on mobile)
- Reduce outer padding from py-6 to py-4
- Remove subtitle paragraph and separate mb-6/mb-8 section margins
This commit is contained in:
2026-04-11 00:06:03 +02:00
parent a576f53d33
commit 4aab1fe1f8

View File

@@ -1,4 +1,5 @@
import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowLeft } from "lucide-react";
import { useEffect, useState } from "react";
import { GlobalItemCard } from "../../components/GlobalItemCard";
import { useGlobalItems } from "../../hooks/useGlobalItems";
@@ -23,28 +24,24 @@ function GlobalItemsCatalog() {
);
return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<div className="mb-6">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
{/* Back link */}
<div className="mb-3">
<Link
to="/"
className="text-sm text-gray-400 hover:text-gray-600 transition-colors"
className="inline-flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-700 transition-colors"
>
&larr; Dashboard
<ArrowLeft className="w-3.5 h-3.5" />
Discover
</Link>
</div>
<div className="mb-8">
<h1 className="text-2xl font-bold text-gray-900 mb-1">
{/* Title + search row */}
<div className="flex flex-wrap items-center justify-between gap-4 mb-4">
<h1 className="text-lg font-semibold text-gray-900">
Global Gear Catalog
</h1>
<p className="text-sm text-gray-500">
Browse and discover gear from the shared catalog
</p>
</div>
{/* Search */}
<div className="mb-8">
<div className="relative max-w-md">
<div className="relative w-full sm:w-auto sm:max-w-xs">
<svg
className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
fill="none"