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

Locale switcher updates

Browse Source
This commit is contained in:
Henrik Larsson
2023-07-07 12:56:33 +02:00
parent 4327a10dc9
commit 5c2f3d5e3e
5 changed files with 92 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,63 +1,64 @@
'use client'
'use client';
import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher'
import Logo from 'components/ui/logo/logo'
import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
import Logo from 'components/ui/logo/logo';
import {
NavigationMenu,
NavigationMenuItem,
NavigationMenuLink,
NavigationMenuList,
navigationMenuTriggerStyle,
} from 'components/ui/navigation-menu'
import Link from 'next/link'
import { FC } from 'react'
import HeaderRoot from './header-root'
navigationMenuTriggerStyle
} from 'components/ui/navigation-menu';
import { useLocale } from 'next-intl';
import Link from 'next/link';
import { FC } from 'react';
import HeaderRoot from './header-root';
interface HeaderProps {}
interface HeaderProps {
localeData: {
type: string;
locale: string;
translations: [];
};
}
const Header: FC<HeaderProps> = () => {
const Header: FC<HeaderProps> = ({ localeData }: HeaderProps) => {
const locale = useLocale();
return (
<HeaderRoot>
<div className="relative flex flex-col">
<div className="relative flex items-center w-full justify-between py-2 px-4 h-14 lg:h-16 lg:py-3 lg:px-8 2xl:px-16">
<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="flex items-center">
<Link
href="/"
className="cursor-pointer duration-100 ease-in-out absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
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"
aria-label="Logo"
>
<Logo />
</Link>
</div>
<div className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
<NavigationMenu delayDuration={0} className="hidden lg:block">
<NavigationMenuList>
<NavigationMenuItem>
<Link href={'/kategori/junior'} legacyBehavior passHref>
<NavigationMenuLink
className={navigationMenuTriggerStyle()}
>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Junior
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href={'/kategori/trojor'} legacyBehavior passHref>
<NavigationMenuLink
className={navigationMenuTriggerStyle()}
>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Tröjor
</NavigationMenuLink>
</Link>
</NavigationMenuItem>
<NavigationMenuItem>
<Link href={'/kategori/byxor'} legacyBehavior passHref>
<NavigationMenuLink
className={navigationMenuTriggerStyle()}
>
<NavigationMenuLink className={navigationMenuTriggerStyle()}>
Byxor
</NavigationMenuLink>
</Link>
@@ -66,12 +67,12 @@ const Header: FC<HeaderProps> = () => {
</NavigationMenu>
</div>
<div>
<LocaleSwitcher />
<LocaleSwitcher localeData={localeData} currentLocale={locale} />
</div>
</div>
</div>
</HeaderRoot>
)
}
);
};
export default Header
export default Header;