Arda Samadi
f8289898bc
Replace the mobile home scroll-tab bar with the redesign's search-first chrome: logo + ویترون wordmark, notification (bell) and cart (bag) icon buttons with unread dot / count badges, and a prominent tap-to-search field that opens /explore. Mobile only (stays inside lg:hidden), so the desktop DesktopHeader is unaffected. Keeps the existing pinar font and color tokens; preserves the safe-area-inset top padding. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
import { memo, useCallback } from "react";
|
||
import { Link } from "@remix-run/react";
|
||
import { Bell, Search, ShoppingBag } from "lucide-react";
|
||
import logo from "../../assets/logo/SVG-07.svg";
|
||
import { useCartCount } from "~/requestHandler/use-cart-hooks";
|
||
import { useBadgeCounts } from "~/hooks/useBadgeCounts";
|
||
import { useRootData } from "~/hooks/use-root-data";
|
||
|
||
const HomePageTopBar = memo(() => {
|
||
const { user } = useRootData();
|
||
const isLoggedIn = !!user?.access_token;
|
||
const cartCount = useCartCount();
|
||
const { data: badgeCounts } = useBadgeCounts();
|
||
const accountUnread =
|
||
(badgeCounts?.chat || 0) + (badgeCounts?.order_updates || 0);
|
||
|
||
const scrollToTop = useCallback(() => {
|
||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||
}, []);
|
||
|
||
return (
|
||
<div className="bg-WHITE sticky top-0 z-30 pt-[env(safe-area-inset-top)]">
|
||
<div className="px-4 pt-2.5 pb-3 flex flex-col gap-3">
|
||
{/* Brand row */}
|
||
<div className="flex items-center gap-2.5">
|
||
<button
|
||
onClick={scrollToTop}
|
||
className="flex items-center gap-2"
|
||
aria-label="ویترون"
|
||
>
|
||
<img src={logo} className="w-7 h-8 object-contain" alt="" />
|
||
<b className="text-[21px] font-extrabold text-BLACK tracking-tight">
|
||
ویترون
|
||
</b>
|
||
</button>
|
||
<span className="flex-1" />
|
||
<Link
|
||
to="/profile"
|
||
prefetch="intent"
|
||
aria-label="اعلانها"
|
||
className="relative w-10 h-10 rounded-xl bg-WHITE2 grid place-items-center text-BLACK"
|
||
>
|
||
{isLoggedIn && accountUnread > 0 ? (
|
||
<span className="absolute top-2 left-2.5 w-2 h-2 rounded-full bg-RED border-[1.5px] border-WHITE2" />
|
||
) : null}
|
||
<Bell size={21} />
|
||
</Link>
|
||
<Link
|
||
to="/cart"
|
||
prefetch="intent"
|
||
aria-label="سبد خرید"
|
||
className="relative w-10 h-10 rounded-xl bg-WHITE2 grid place-items-center text-BLACK"
|
||
>
|
||
{isLoggedIn && cartCount > 0 ? (
|
||
<span className="absolute top-1 left-1 min-w-[16px] h-4 px-1 rounded-full bg-RED text-white text-[10px] font-bold grid place-items-center border-[1.5px] border-WHITE2">
|
||
{cartCount > 99 ? "99+" : cartCount}
|
||
</span>
|
||
) : null}
|
||
<ShoppingBag size={21} />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Search-first */}
|
||
<Link
|
||
to="/explore"
|
||
prefetch="intent"
|
||
className="flex items-center gap-2.5 h-[46px] px-3.5 bg-WHITE3 rounded-2xl text-GRAY"
|
||
>
|
||
<Search size={19} className="shrink-0" />
|
||
<span className="text-R14">جستجوی محصول، برند یا فروشگاه…</span>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|
||
|
||
HomePageTopBar.displayName = "HomePageTopBar";
|
||
|
||
export default HomePageTopBar;
|