makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

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

Browse Source 
- 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:
Jean-Luc Makiola
2026-04-11 00:06:03 +02:00
parent a576f53d33
commit 4aab1fe1f8
1 changed files with 11 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/client/routes/global-items/index.tsx
View File

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