added tons of features

components/shared/header/cabinet-button.tsx

@@ -0,0 +1,33 @@
+import {CircleUserRound} from 'lucide-react'
+import Link from 'next/link'
+
+import {auth} from '@/auth'
+import {avatarFallback} from '@/lib/utils'
+import {Avatar, AvatarFallback, AvatarImage} from '@/ui/avatar'
+
+export default async function CabinetButton() {
+	const session = await auth()
+
+	return (
+		<Link href='/cabinet' className='header-button' aria-label='Кабінет'>
+			<button className='flex flex-col items-center' role='button'>
+				{session ? (
+					<>
+						<Avatar className='hs1-[21px] w1-[21px] border2-2 border2-brand-violet'>
+							<AvatarImage src={session.user?.image as string} alt='avatar' />
+							<AvatarFallback className='text-xs'>
+								{avatarFallback(session.user?.name as string)}
+							</AvatarFallback>
+						</Avatar>
+					</>
+				) : (
+					<>
+						<CircleUserRound className='h-[21px] w-[21px]' />
+						GA4_Ecommerce_View_Item_List_Trigger
+					</>
+				)}
+				{/*<span className='text-sm'>Кабінет</span>*/}
+			</button>
+		</Link>
+	)
+}

components/shared/header/controls.tsx

@@ -0,0 +1,34 @@
+import {Heart, ShoppingCartIcon, UserIcon} from 'lucide-react'
+import {useTranslations} from 'next-intl'
+
+import CabinetButton from '@/components/shared/header/cabinet-button'
+import {Link} from '@/i18n/routing'
+
+export default function HeaderControls() {
+	const t = useTranslations('cart')
+
+	return (
+		<div className='flex w-full justify-end gap-x-9 text-brand-violet'>
+			<CabinetButton />
+
+			<Link href={'#' as never} className='header-button' aria-label='Вибране'>
+				<button className='flex flex-col items-center' role='button'>
+					<Heart className='h-[21px] w-[21px]' />
+					<span className='font1-bold text-sm'>{t('favorites')}</span>
+				</button>
+			</Link>
+
+			<Link
+				href={'/checkout' as never}
+				className='header-button'
+				aria-label='Кошик'
+			>
+				<button className='flex flex-col items-center' role='button'>
+					<ShoppingCartIcon className='h-[21px] w-[21px]' />
+
+					<span className='font1-bold text-sm'>{t('basket')}</span>
+				</button>
+			</Link>
+		</div>
+	)
+}

components/shared/header/index.tsx

@@ -0,0 +1,54 @@
+import {Menu} from '@radix-ui/react-menu'
+
+import HeaderControls from './controls'
+import Logo from '@/components/shared/home/logo'
+import LocaleSwitcher from '@/components/shared/locale-switcher'
+import Navbar from '@/components/shared/navbar'
+import SearchForm from '@/components/shared/search/form'
+import SocialMediaPanel from '@/components/shared/social-media-panel'
+import {Switch} from '@/ui/switch'
+
+type MenuProps = {
+	name: string
+	slug: string
+	href: string
+}
+
+export default async function Header() {
+	/*{
+		searchParams
+	}: {
+		searchParams: Promise<{query?: string}>
+	}*/
+	//const query = (await searchParams).query
+
+	return (
+		<header className='w-full border-none bg-background text-white'>
+			<div className='container flex'>
+				<div className='bw-layout-col-left'>
+					<Logo />
+				</div>
+				<div className='bw-layout-col-right flex-col'>
+					<div className='mt-1.5 flex h-10 items-center'>
+						<div className='bw-header-col-left flex justify-between gap-x-10'>
+							<Navbar />
+							<SocialMediaPanel size={16} className='gap-x-3 pr-1' />
+						</div>
+						<div className='bw-header-col-right flex justify-end text-stone'>
+							<LocaleSwitcher />
+						</div>
+					</div>
+
+					<div className='flex items-center'>
+						<div className='bw-header-col-left'>
+							<SearchForm />
+						</div>
+						<div className='bw-header-col-right'>
+							<HeaderControls />
+						</div>
+					</div>
+				</div>
+			</div>
+		</header>
+	)
+}