feat(27-03): remove hero section from landing page
- Delete HeroSection function (Discover Gear heading, search bar, Go to Collection link) - Remove unused imports: Link, Search (lucide-react), useAuth, useUIStore - LandingPage now starts directly with PopularSetupsSection - Search now exclusively in TopNav bar
This commit is contained in:
@@ -1,30 +1,19 @@
|
|||||||
import { createFileRoute, Link } from "@tanstack/react-router";
|
import { createFileRoute } from "@tanstack/react-router";
|
||||||
import { Search } from "lucide-react";
|
|
||||||
import { GlobalItemCard } from "../components/GlobalItemCard";
|
import { GlobalItemCard } from "../components/GlobalItemCard";
|
||||||
import { PublicSetupCard } from "../components/PublicSetupCard";
|
import { PublicSetupCard } from "../components/PublicSetupCard";
|
||||||
import { useAuth } from "../hooks/useAuth";
|
|
||||||
import {
|
import {
|
||||||
useDiscoveryCategories,
|
useDiscoveryCategories,
|
||||||
useDiscoveryItems,
|
useDiscoveryItems,
|
||||||
useDiscoverySetups,
|
useDiscoverySetups,
|
||||||
} from "../hooks/useDiscovery";
|
} from "../hooks/useDiscovery";
|
||||||
import { useUIStore } from "../stores/uiStore";
|
|
||||||
|
|
||||||
export const Route = createFileRoute("/")({
|
export const Route = createFileRoute("/")({
|
||||||
component: LandingPage,
|
component: LandingPage,
|
||||||
});
|
});
|
||||||
|
|
||||||
function LandingPage() {
|
function LandingPage() {
|
||||||
const { data: auth } = useAuth();
|
|
||||||
const isAuthenticated = !!auth?.user;
|
|
||||||
const openCatalogSearch = useUIStore((s) => s.openCatalogSearch);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
<HeroSection
|
|
||||||
isAuthenticated={isAuthenticated}
|
|
||||||
onSearchFocus={() => openCatalogSearch("collection")}
|
|
||||||
/>
|
|
||||||
<PopularSetupsSection />
|
<PopularSetupsSection />
|
||||||
<RecentItemsSection />
|
<RecentItemsSection />
|
||||||
<TrendingCategoriesSection />
|
<TrendingCategoriesSection />
|
||||||
@@ -32,45 +21,6 @@ function LandingPage() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function HeroSection({
|
|
||||||
isAuthenticated,
|
|
||||||
onSearchFocus,
|
|
||||||
}: {
|
|
||||||
isAuthenticated: boolean;
|
|
||||||
onSearchFocus: () => void;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className="text-center mb-16">
|
|
||||||
<h1 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-2">
|
|
||||||
Discover Gear
|
|
||||||
</h1>
|
|
||||||
<p className="text-gray-500 mb-8">Browse what other people carry</p>
|
|
||||||
<div
|
|
||||||
onClick={onSearchFocus}
|
|
||||||
onKeyDown={(e) => e.key === "Enter" && onSearchFocus()}
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
className="max-w-xl mx-auto flex items-center gap-3 px-4 py-3 bg-white rounded-xl border border-gray-200 hover:border-gray-300 cursor-pointer shadow-sm transition-all"
|
|
||||||
>
|
|
||||||
<Search className="w-5 h-5 text-gray-400 shrink-0" />
|
|
||||||
<span className="text-sm text-gray-400 flex-1 text-left">
|
|
||||||
Search the catalog...
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{isAuthenticated && (
|
|
||||||
<div className="mt-4">
|
|
||||||
<Link
|
|
||||||
to="/collection"
|
|
||||||
className="text-sm text-gray-600 hover:text-gray-900 underline underline-offset-2 cursor-pointer"
|
|
||||||
>
|
|
||||||
Go to Collection
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function PopularSetupsSection() {
|
function PopularSetupsSection() {
|
||||||
const { data, isLoading } = useDiscoverySetups(6);
|
const { data, isLoading } = useDiscoverySetups(6);
|
||||||
const setups = data?.items ?? [];
|
const setups = data?.items ?? [];
|
||||||
|
|||||||
Reference in New Issue
Block a user