this repo has no description
1import { NextLogo } from '#/components/next-logo';
2import {
3 MagnifyingGlassIcon,
4 ShoppingCartIcon,
5} from '@heroicons/react/24/solid';
6import Image from 'next/image';
7import { CartCount } from '#/components/cart-count';
8import { cookies } from 'next/headers';
9import { Suspense } from 'react';
10
11async function CartCountFromCookies() {
12 const cartCount = Number(cookies().get('_cart_count')?.value || '0');
13 return <CartCount initialCartCount={cartCount} />;
14}
15
16export function Header() {
17 return (
18 <div className="flex items-center justify-between gap-x-3 rounded-lg bg-gray-800 px-3 py-3 lg:px-5 lg:py-4">
19 <div className="flex gap-x-3">
20 <div className="h-10 w-10 hover:opacity-70">
21 <NextLogo />
22 </div>
23
24 <div className="relative flex-1">
25 <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
26 <MagnifyingGlassIcon className="h-5 w-5 text-gray-300" />
27 </div>
28 <input
29 aria-label="Search"
30 type="search"
31 name="search"
32 id="search"
33 className="block w-full rounded-full border-none bg-gray-600 pl-10 font-medium text-gray-200 focus:border-vercel-pink focus:ring-2 focus:ring-vercel-pink"
34 autoComplete="off"
35 />
36 </div>
37 </div>
38
39 <div className="flex shrink-0 gap-x-3">
40 <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-600 text-white">
41 <ShoppingCartIcon className="w-6 text-white" />
42 <div className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-vercel-cyan text-sm font-bold text-cyan-800">
43 <Suspense fallback={<span></span>}>
44 <CartCountFromCookies />
45 </Suspense>
46 </div>
47 </div>
48
49 <Image
50 src="/prince-akachi-LWkFHEGpleE-unsplash.jpg"
51 className="rounded-full"
52 width={40}
53 height={40}
54 alt="User"
55 priority
56 />
57 </div>
58 </div>
59 );
60}