@vendure-platform/create 0.4.0 → 0.5.1

package/dist/assets/storefront/src/components/commerce/subcollection-tiles.tsx

@@ -1,8 +1,8 @@
+import { Link } from '@/i18n/navigation';
+import type { GetCollectionProductsQuery } from '@/lib/vendure/queries';
+import type { ResultOf } from 'gql.tada';
+import { Layers } from 'lucide-react';
 import Image from 'next/image';
-import {Link} from '@/i18n/navigation';
-import {Layers} from 'lucide-react';
-import type {ResultOf} from 'gql.tada';
-import type {GetCollectionProductsQuery} from '@/lib/vendure/queries';
 
 // Derived from the GetCollectionProductsQuery so the shape stays in sync with
 // the actual GraphQL response. The `children` field is `null | undefined |
@@ -14,7 +14,7 @@ interface SubcollectionTilesProps {
     collections: SubcollectionTile[];
 }
 
-export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
+export function SubcollectionTiles({ collections }: SubcollectionTilesProps) {
     if (!collections.length) return null;
 
     return (
@@ -22,10 +22,7 @@ export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
             <ul className="flex gap-3 overflow-x-auto pb-1 -mx-1 px-1 snap-x">
                 {collections.map((c) => (
                     <li key={c.id} className="snap-start shrink-0">
-                        <Link
-                            href={`/collection/${c.slug}`}
-                            className="group block w-[160px]"
-                        >
+                        <Link href={`/collection/${c.slug}`} className="group block w-[160px]">
                             <div className="relative h-[120px] w-full overflow-hidden rounded-md bg-muted border border-border group-hover:border-primary/40 transition-colors">
                                 {c.featuredAsset?.preview ? (
                                     <Image
@@ -40,11 +37,12 @@ export function SubcollectionTiles({collections}: SubcollectionTilesProps) {
                                         <Layers className="h-8 w-8 text-muted-foreground/40" />
                                     </div>
                                 )}
-                                <div aria-hidden className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
+                                <div
+                                    aria-hidden
+                                    className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent"
+                                />
                                 <div className="absolute inset-x-0 bottom-0 p-2 text-white">
-                                    <p className="text-xs font-medium line-clamp-2 drop-shadow">
-                                        {c.name}
-                                    </p>
+                                    <p className="text-xs font-medium line-clamp-2 drop-shadow">{c.name}</p>
                                 </div>
                             </div>
                         </Link>

package/dist/assets/storefront/src/components/layout/auth-page-shell.tsx

@@ -1,4 +1,4 @@
-import type {ReactNode} from 'react';
+import type { ReactNode } from 'react';
 
 /**
  * Wraps auth-flow pages (sign-in, register, verify, etc.) in a vertically
@@ -6,7 +6,7 @@ import type {ReactNode} from 'react';
  * `--page-top-offset` CSS variable. The content is centered horizontally
  * inside a max-width-md column.
  */
-export function AuthPageShell({children}: {children: ReactNode}) {
+export function AuthPageShell({ children }: { children: ReactNode }) {
     return (
         <div className="flex min-h-[calc(100vh-var(--page-top-offset))] mt-[var(--page-top-offset)] items-center justify-center px-4 py-8">
             <div className="w-full max-w-md space-y-6">{children}</div>

package/dist/assets/storefront/src/components/layout/draft-mode-indicator.tsx

@@ -1,14 +1,9 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { Hammer } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { isDraftModeEnabled } from './draft-mode-action';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger,
-} from '@/components/ui/tooltip';
 
 export function DraftModeIndicator() {
     const [active, setActive] = useState(false);

package/dist/assets/storefront/src/components/layout/draft-mode-link.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import { useEffect, useState } from 'react';
 import { usePathname } from '@/i18n/navigation';
 import { Hammer } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import { isDraftModeEnabled } from './draft-mode-action';
 
 export function DraftModeLink() {
@@ -20,7 +20,9 @@ export function DraftModeLink() {
     return (
         <a
             href={href}
-            className={`transition-colors inline-flex items-center gap-1.5 ${active ? 'text-amber-500 hover:text-amber-600' : 'hover:text-primary'}`}
+            className={`transition-colors inline-flex items-center gap-1.5 ${
+                active ? 'text-amber-500 hover:text-amber-600' : 'hover:text-primary'
+            }`}
         >
             <Hammer className="h-3.5 w-3.5" />
             {active ? 'Disable Draft Mode' : 'Enable Draft Mode'}

package/dist/assets/storefront/src/components/layout/footer.tsx

@@ -1,17 +1,16 @@
-import {cacheLife} from 'next/cache';
-import {getTranslations, setRequestLocale} from 'next-intl/server';
-import {getTopCollections} from '@/lib/vendure/cached';
-import {getActiveCustomer} from '@/lib/vendure/actions';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import Image from "next/image";
-import NextLink from "next/link";
-import {Link} from "@/i18n/navigation";
+import { getBranding } from '@/config/branding';
+import { Link } from '@/i18n/navigation';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { getActiveCustomer } from '@/lib/vendure/actions';
+import { getTopCollections } from '@/lib/vendure/cached';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
+import { cacheLife } from 'next/cache';
+import Image from 'next/image';
+import NextLink from 'next/link';
 import { DraftModeLink } from './draft-mode-link';
-import {getBranding} from '@/config/branding';
 
-
-async function Copyright({allRightsReserved}: {allRightsReserved: string}) {
-    'use cache'
+async function Copyright({ allRightsReserved }: { allRightsReserved: string }) {
+    'use cache';
     cacheLife('days');
 
     const { footer } = getBranding();
@@ -19,11 +18,11 @@ async function Copyright({allRightsReserved}: {allRightsReserved: string}) {
         <div>
             &copy; {new Date().getFullYear()} {footer.copyright}. {allRightsReserved}
         </div>
-    )
+    );
 }
 
-async function FooterCollections({locale, channelToken}: {locale: string; channelToken?: string}) {
-    'use cache'
+async function FooterCollections({ locale, channelToken }: { locale: string; channelToken?: string }) {
+    'use cache';
     cacheLife('days');
 
     const collections = await getTopCollections(locale, channelToken);
@@ -49,7 +48,7 @@ async function FooterCollections({locale, channelToken}: {locale: string; channe
     );
 }
 
-async function FooterAuthLink({label}: {label: string}) {
+async function FooterAuthLink({ label }: { label: string }) {
     const customer = await getActiveCustomer();
     if (customer) {
         return null;
@@ -63,10 +62,10 @@ async function FooterAuthLink({label}: {label: string}) {
     );
 }
 
-export async function Footer({locale}: {locale: string}) {
+export async function Footer({ locale }: { locale: string }) {
     setRequestLocale(locale);
     const [t, channelToken] = await Promise.all([
-        getTranslations({locale, namespace: 'Footer'}),
+        getTranslations({ locale, namespace: 'Footer' }),
         getActiveChannelToken(),
     ]);
     const { footer, logo, logoInverted } = getBranding();
@@ -86,27 +85,47 @@ export async function Footer({locale}: {locale: string}) {
                         <h4 className="text-sm font-semibold mb-4 text-foreground">{t('account')}</h4>
                         <ul className="space-y-2 text-sm text-muted-foreground">
                             <li>
-                                <Link href="/account/orders" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/orders"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('orders')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/quotes" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/quotes"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('quotes')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/company" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/company"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('company')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/addresses" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/addresses"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('addresses')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/account/profile" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/account/profile"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('profile')}
                                 </Link>
                             </li>
@@ -118,12 +137,20 @@ export async function Footer({locale}: {locale: string}) {
                         <h4 className="text-sm font-semibold mb-4 text-foreground">{t('customerService')}</h4>
                         <ul className="space-y-2 text-sm text-muted-foreground">
                             <li>
-                                <Link href="/search" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/search"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('browseProducts')}
                                 </Link>
                             </li>
                             <li>
-                                <Link href="/register-company" prefetch={false} className="hover:text-primary transition-colors">
+                                <Link
+                                    href="/register-company"
+                                    prefetch={false}
+                                    className="hover:text-primary transition-colors"
+                                >
                                     {t('openTradeAccount')}
                                 </Link>
                             </li>
@@ -155,11 +182,26 @@ export async function Footer({locale}: {locale: string}) {
 
                 {/* Bottom bar */}
                 <div className="mt-10 pt-6 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4 text-sm text-muted-foreground">
-                    <Copyright allRightsReserved={t('allRightsReserved')}/>
+                    <Copyright allRightsReserved={t('allRightsReserved')} />
                     <div className="flex items-center gap-4">
                         <DraftModeLink />
-                        <a href={`${(process.env.VENDURE_SHOP_API_URL ?? 'http://localhost:3500/shop-api').replace(/\/shop-api$/, '')}/dev-mailbox/ui`} target="_blank" rel="noopener noreferrer" className="hover:text-primary transition-colors">{t('demoMailbox')}</a>
-                        <Image src={footerLogo.src} alt={footerLogo.alt} width={footerLogo.width} height={footerLogo.height} className="h-4 w-auto invert" />
+                        <a
+                            href={`${(
+                                process.env.VENDURE_SHOP_API_URL ?? 'http://localhost:3500/shop-api'
+                            ).replace(/\/shop-api$/, '')}/dev-mailbox/ui`}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="hover:text-primary transition-colors"
+                        >
+                            {t('demoMailbox')}
+                        </a>
+                        <Image
+                            src={footerLogo.src}
+                            alt={footerLogo.alt}
+                            width={footerLogo.width}
+                            height={footerLogo.height}
+                            className="h-4 w-auto invert"
+                        />
                     </div>
                 </div>
             </div>

package/dist/assets/storefront/src/components/layout/navbar/actions.ts

@@ -1,17 +1,14 @@
 'use server';
 
-import {readFragment} from '@/graphql';
-import {client} from '@/lib/vendure/api';
-import {SwitchBusinessUnitMutation} from '@/lib/vendure/mutations';
-import {CompanyBusinessUnitFragment} from '@/lib/vendure/fragments';
-import {setCompanyId, setBusinessUnitId, clearBusinessUnitId} from '@/lib/company-context';
-import {revalidatePath, revalidateTag} from 'next/cache';
+import { readFragment } from '@/graphql';
+import { clearBusinessUnitId, setBusinessUnitId, setCompanyId } from '@/lib/company-context';
+import { client } from '@/lib/vendure/api';
+import { CompanyBusinessUnitFragment } from '@/lib/vendure/fragments';
+import { SwitchBusinessUnitMutation } from '@/lib/vendure/mutations';
+import { revalidatePath, revalidateTag } from 'next/cache';
 
 export async function switchBusinessUnitAction(businessUnitId: string) {
-    const [result, error] = await client.mutate(
-        SwitchBusinessUnitMutation,
-        {businessUnitId},
-    );
+    const [result, error] = await client.mutate(SwitchBusinessUnitMutation, { businessUnitId });
     if (error) throw error;
 
     const account = result.data.switchBusinessUnit;
@@ -20,7 +17,7 @@ export async function switchBusinessUnitAction(businessUnitId: string) {
         await setBusinessUnitId(activeBu.id);
     }
 
-    revalidateTag('active-customer', {expire: 0});
+    revalidateTag('active-customer', { expire: 0 });
     revalidatePath('/', 'layout');
 }
 
@@ -28,6 +25,6 @@ export async function switchCompanyAction(companyId: string) {
     await setCompanyId(companyId);
     await clearBusinessUnitId();
 
-    revalidateTag('active-customer', {expire: 0});
+    revalidateTag('active-customer', { expire: 0 });
     revalidatePath('/', 'layout');
 }

package/dist/assets/storefront/src/components/layout/navbar/cart-icon.tsx

@@ -1,15 +1,15 @@
 'use client';
 
-import {Clock, ShoppingCart} from "lucide-react";
-import {Button} from "@/components/ui/button";
-import {Link} from "@/i18n/navigation";
-import {useCartCount} from "@/lib/cart-count-context";
-import {useTranslations} from 'next-intl';
+import { Button } from '@/components/ui/button';
+import { Link } from '@/i18n/navigation';
+import { useCartCount } from '@/lib/cart-count-context';
+import { Clock, ShoppingCart } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 export function CartIcon() {
     const t = useTranslations('Navigation');
     const tCart = useTranslations('Cart');
-    const {count, awaitingApprovalOrderCode} = useCartCount();
+    const { count, awaitingApprovalOrderCode } = useCartCount();
     const display = count > 99 ? '99+' : count;
 
     if (awaitingApprovalOrderCode) {
@@ -17,12 +17,12 @@ export function CartIcon() {
         return (
             <Button variant="ghost" size="icon" asChild className="relative">
                 <Link href="/cart" prefetch={false} aria-label={label} title={label}>
-                    <ShoppingCart className="h-5 w-5 text-muted-foreground"/>
+                    <ShoppingCart className="h-5 w-5 text-muted-foreground" />
                     <span
                         className="absolute -top-1 -right-1 bg-amber-500 text-white rounded-full h-4 w-4 flex items-center justify-center"
                         aria-hidden
                     >
-                        <Clock className="h-3 w-3"/>
+                        <Clock className="h-3 w-3" />
                     </span>
                     <span className="sr-only">{label}</span>
                 </Link>
@@ -33,7 +33,7 @@ export function CartIcon() {
     return (
         <Button variant="ghost" size="icon" asChild className="relative">
             <Link href="/cart" prefetch={false}>
-                <ShoppingCart className="h-5 w-5"/>
+                <ShoppingCart className="h-5 w-5" />
                 {count > 0 && (
                     <span
                         className={`absolute -top-1 -right-1 bg-primary text-primary-foreground text-xs font-bold rounded-full flex items-center justify-center ${

package/dist/assets/storefront/src/components/layout/navbar/channel-picker-wrapper.tsx

@@ -1,6 +1,6 @@
-import {getChannelsConfig} from '@/config/scenario';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {ChannelPicker} from './channel-picker';
+import { getChannelsConfig } from '@/config/scenario';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { ChannelPicker } from './channel-picker';
 
 export async function ChannelPickerWrapper() {
     const channelsConfig = getChannelsConfig();
@@ -10,10 +10,5 @@ export async function ChannelPickerWrapper() {
     // when channelsConfig is set (checked above), so it can never be undefined here.
     const activeToken = (await getActiveChannelToken())!;
 
-    return (
-        <ChannelPicker
-            channels={channelsConfig.available}
-            activeToken={activeToken}
-        />
-    );
+    return <ChannelPicker channels={channelsConfig.available} activeToken={activeToken} />;
 }

package/dist/assets/storefront/src/components/layout/navbar/channel-picker.tsx

@@ -1,26 +1,26 @@
 'use client';
 
-import {useTransition} from 'react';
-import {MapPin} from 'lucide-react';
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {switchChannel} from '@/lib/actions/switch-channel';
-import type {ChannelOption} from '@/config/scenario';
+import type { ChannelOption } from '@/config/scenario';
+import { switchChannel } from '@/lib/actions/switch-channel';
+import { MapPin } from 'lucide-react';
+import { useTransition } from 'react';
 
 interface ChannelPickerProps {
     channels: ChannelOption[];
     activeToken: string;
 }
 
-export function ChannelPicker({channels, activeToken}: ChannelPickerProps) {
+export function ChannelPicker({ channels, activeToken }: ChannelPickerProps) {
     const [isPending, startTransition] = useTransition();
 
-    const active = channels.find(c => c.token === activeToken) ?? channels[0];
+    const active = channels.find((c) => c.token === activeToken) ?? channels[0];
 
     function handleSwitch(token: string) {
         startTransition(async () => {
@@ -31,7 +31,12 @@ export function ChannelPicker({channels, activeToken}: ChannelPickerProps) {
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-9 gap-1 px-2 text-xs font-medium" disabled={isPending}>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-9 gap-1 px-2 text-xs font-medium"
+                    disabled={isPending}
+                >
                     <MapPin className="size-3.5" />
                     {active.countryCode}
                     <span className="sr-only">Switch country/channel</span>

package/dist/assets/storefront/src/components/layout/navbar/currency-picker-wrapper.tsx

@@ -1,7 +1,7 @@
-import {getActiveChannelCached} from '@/lib/vendure/cached';
-import {getActiveCurrencyCode} from '@/lib/currency-server';
-import {getActiveChannelToken} from '@/lib/channel-server';
-import {CurrencyPicker} from './currency-picker';
+import { getActiveChannelToken } from '@/lib/channel-server';
+import { getActiveCurrencyCode } from '@/lib/currency-server';
+import { getActiveChannelCached } from '@/lib/vendure/cached';
+import { CurrencyPicker } from './currency-picker';
 
 export async function CurrencyPickerWrapper() {
     const channelToken = await getActiveChannelToken();

package/dist/assets/storefront/src/components/layout/navbar/currency-picker.tsx

@@ -1,22 +1,22 @@
 'use client';
 
-import {useTransition} from 'react';
-import {DollarSign} from 'lucide-react';
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {switchCurrency} from '@/lib/actions/switch-currency';
+import { switchCurrency } from '@/lib/actions/switch-currency';
+import { DollarSign } from 'lucide-react';
+import { useTransition } from 'react';
 
 interface CurrencyPickerProps {
     availableCurrencies: string[];
     activeCurrency: string;
 }
 
-export function CurrencyPicker({availableCurrencies, activeCurrency}: CurrencyPickerProps) {
+export function CurrencyPicker({ availableCurrencies, activeCurrency }: CurrencyPickerProps) {
     const [isPending, startTransition] = useTransition();
 
     if (availableCurrencies.length <= 1) return null;
@@ -30,7 +30,12 @@ export function CurrencyPicker({availableCurrencies, activeCurrency}: CurrencyPi
     return (
         <DropdownMenu>
             <DropdownMenuTrigger asChild>
-                <Button variant="ghost" size="sm" className="h-9 gap-1 px-2 text-xs font-medium" disabled={isPending}>
+                <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-9 gap-1 px-2 text-xs font-medium"
+                    disabled={isPending}
+                >
                     <DollarSign className="size-3.5" />
                     {activeCurrency}
                     <span className="sr-only">Switch currency</span>

package/dist/assets/storefront/src/components/layout/navbar/language-picker.tsx

@@ -1,17 +1,17 @@
 'use client';
 
-import {useLocale} from 'next-intl';
-import {usePathname, useRouter} from '@/i18n/navigation';
-import {routing, localeNames, type Locale} from '@/i18n/routing';
-import {Globe} from 'lucide-react';
-import {Button} from '@/components/ui/button';
+import { Button } from '@/components/ui/button';
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {useTransition} from 'react';
+import { usePathname, useRouter } from '@/i18n/navigation';
+import { localeNames, routing, type Locale } from '@/i18n/routing';
+import { Globe } from 'lucide-react';
+import { useLocale } from 'next-intl';
+import { useTransition } from 'react';
 
 export function LanguagePicker() {
     const locale = useLocale();
@@ -23,7 +23,7 @@ export function LanguagePicker() {
 
     function switchLocale(newLocale: Locale) {
         startTransition(() => {
-            router.replace({pathname}, {locale: newLocale});
+            router.replace({ pathname }, { locale: newLocale });
         });
     }
 

package/dist/assets/storefront/src/components/layout/navbar/login-button.tsx

@@ -1,34 +1,37 @@
-'use client'
+'use client';
 
-import {ComponentProps, useTransition} from "react";
-import {useTranslations} from 'next-intl';
-import {logoutAction} from "@/app/[locale]/sign-in/actions";
-import {useRouter} from "@/i18n/navigation";
+import { logoutAction } from '@/app/[locale]/sign-in/actions';
+import { useRouter } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+import { ComponentProps, useTransition } from 'react';
 
 interface LoginButtonProps extends ComponentProps<'button'> {
     isLoggedIn: boolean;
 }
 
-export function LoginButton({isLoggedIn, ...props}: LoginButtonProps) {
+export function LoginButton({ isLoggedIn, ...props }: LoginButtonProps) {
     const t = useTranslations('Navigation');
     const [isPending, startTransition] = useTransition();
     const router = useRouter();
 
     return (
-        <button {...props} aria-disabled={isPending}
-                onClick={() => {
-                    if (isLoggedIn) {
-                        startTransition(async () => {
-                            const result = await logoutAction();
-                            if (result?.redirectTo) {
-                                router.replace(result.redirectTo);
-                            }
-                        })
-                    } else {
-                        router.push('/sign-in')
-                    }
-                }}>
+        <button
+            {...props}
+            aria-disabled={isPending}
+            onClick={() => {
+                if (isLoggedIn) {
+                    startTransition(async () => {
+                        const result = await logoutAction();
+                        if (result?.redirectTo) {
+                            router.replace(result.redirectTo);
+                        }
+                    });
+                } else {
+                    router.push('/sign-in');
+                }
+            }}
+        >
             {isLoggedIn ? t('signOut') : t('signIn')}
         </button>
-    )
-}
+    );
+}

package/dist/assets/storefront/src/components/layout/navbar/mobile-nav.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import {useState} from 'react';
-import {useTranslations} from 'next-intl';
-import {Menu, Search} from 'lucide-react';
-import {Button} from '@/components/ui/button';
-import {Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger} from '@/components/ui/sheet';
-import {Input} from '@/components/ui/input';
-import {Link, useRouter} from '@/i18n/navigation';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Link, useRouter } from '@/i18n/navigation';
+import { Menu, Search } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
 
 interface NavLink {
     href: string;
@@ -55,7 +55,7 @@ export function MobileNav({ navLinks }: { navLinks: NavLink[] }) {
                         </div>
                     </form>
                     <nav className="flex-1 overflow-y-auto py-2">
-                        {navLinks.map(({href, label}) => (
+                        {navLinks.map(({ href, label }) => (
                             <Link
                                 key={href}
                                 href={href}