crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Henrik Larsson
2023-08-08 16:20:45 +02:00
parent 3e513eaf99
commit 22aab2f657
39 changed files with 1259 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/layout/header/header.tsx
View File

@@ -1,27 +1,42 @@
import Cart from 'components/cart';
import OpenCart from 'components/cart/open-cart';
import Logo from 'components/ui/logo/logo';
import { useLocale } from 'next-intl';
import Link from 'next/link';
import { Suspense } from 'react';
import HeaderRoot from './header-root';
import MobileModal from './mobile-modal';
const Header = () => {
const locale = useLocale();
interface HeaderProps {
locale: string;
}
const Header = ({ locale }: HeaderProps) => {
return (
<HeaderRoot>
<div className="relative flex flex-col">
<div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
<div className="md:hidden">
<MobileModal />
</div>
<div className="flex items-center">
<Link
href={`/${locale}`}
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out md:relative md:left-0 md:top-0 md:translate-x-0 md:translate-y-0"
aria-label="Logo"
>
<Logo />
</Link>
</div>
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
Menu
<div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
Desktop Menu
</div>
<div className="flex justify-end md:w-1/3">
<Suspense fallback={<OpenCart />}>
{/*// @ts-ignore */}
<Cart />
</Suspense>
</div>
</div>
</div>