soorya-carpet/resources/js/components/layout/Navbar.tsx

// import { dashboard, login, register } from '@/routes';
// import { SharedData } from '@/types';
// import { Link, usePage } from '@inertiajs/react';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Sheet,
    SheetContent,
    SheetDescription,
    SheetTitle,
    SheetTrigger,
} from '@/components/ui/sheet';
import { about, artOfWeaving, bespoke, contact, faq, home } from '@/routes';
import index from '@/routes/index/index';
import { useLocale, useTranslations } from '@/utils/i18n';
import logo from '@asset/img/logo/soorya.png';
import { Link, router } from '@inertiajs/react';
import { Mail, MapPin, Menu, Phone } from 'lucide-react';

export default function Navbar() {
    // const [lang, setLang] = useState('en');
    // const { translations } = usePage().props;
    // const { post } = useForm({
    //     locale: lang,
    // });

    // console.log('lang', lang);

    // const changeLanguage = (e) => {
    //     console.log(e);
    //     setLang(e);
    //     post(locale.change().url);
    // };
    // const { auth } = usePage<SharedData>().props;

    const { t } = useTranslations();
    const locale = useLocale();

    // const { locale, translations } = usePage().props;

    const changeLanguage = (newLocale: string) => {
        router.post(
            '/locale',
            { locale: newLocale },
            {
                preserveScroll: true,
                preserveState: true,
                onSuccess: () => {
                    // The page will automatically update because Inertia
                    // will make a new request and get the updated translations
                    console.log('Language changed to:', newLocale);
                },
            },
        );
    };

    return (
        <>
            <header className="mx-auto w-full text-sm not-has-[nav]:hidden">
                <div className="bg-primary py-1.5 text-white/60 max-md:hidden">
                    <div className="mx-auto flex max-w-screen-2xl items-center justify-between px-12 max-md:px-2">
                        <ul className="flex items-center gap-4">
                            <li>
                                <a
                                    href="tel:01-4220087"
                                    className="flex items-center gap-1 text-xs"
                                >
                                    <Phone size={14} />
                                    01-4220087
                                </a>
                            </li>
                            <li>
                                <a
                                    href="mailto:info@soorya.com"
                                    className="flex items-center gap-1 text-xs"
                                >
                                    <Mail size={14} />
                                    info@soorya.com
                                </a>
                            </li>
                            <li>
                                <a
                                    href="#"
                                    className="flex items-center gap-1 text-xs"
                                >
                                    <MapPin size={14} />
                                    Thapathali, Kathmandu, Nepal
                                </a>
                            </li>
                        </ul>

                        <Select value={locale} onValueChange={changeLanguage}>
                            <SelectTrigger className="h-0 w-32 border-0 focus-visible:ring-0">
                                <SelectValue />
                            </SelectTrigger>
                            <SelectContent>
                                <SelectGroup>
                                    {/* <SelectLabel>Fruits</SelectLabel> */}
                                    <SelectItem value="en">English</SelectItem>
                                    <SelectItem value="cn">中国人</SelectItem>
                                </SelectGroup>
                            </SelectContent>
                        </Select>
                    </div>
                </div>
                <div className="mx-auto w-full max-w-screen-2xl px-12 py-2 text-base not-has-[nav]:hidden max-md:px-4">
                    <nav className="flex items-center justify-between gap-2">
                        <Link href={home()}>
                            <img
                                src={logo}
                                alt="Soorya Carpet Logo"
                                className="w-36"
                            />
                        </Link>
                        <ul className="flex items-center gap-6 max-md:hidden">
                            <li>
                                <Link href={about()}>{t('nav.about-us')}</Link>
                            </li>
                            <li>
                                <Link href={artOfWeaving()}>
                                    {t('nav.art')}
                                </Link>
                            </li>
                            <li>
                                <Link href={index.product()}>
                                    {t('nav.products')}
                                </Link>
                            </li>
                            <li>
                                <Link href={bespoke()}>{t('nav.bespoke')}</Link>
                            </li>
                            <li>
                                <Link href={faq()}>{t('nav.faq')}</Link>
                            </li>
                            <li>
                                <Link href={contact()}>{t('nav.contact')}</Link>
                            </li>
                        </ul>

                        <Sheet>
                            <SheetTrigger className="md:hidden">
                                <Menu size={24} />
                            </SheetTrigger>
                            <SheetContent className="w-full">
                                <SheetTitle className="hidden">Menu</SheetTitle>
                                <SheetDescription className="hidden">
                                    Navigation Menu Item
                                </SheetDescription>
                                <ul className="mt-20 flex flex-col items-center justify-center gap-6">
                                    <li>
                                        <Link href={about()}>
                                            {t('nav.about-us')}
                                        </Link>
                                    </li>
                                    <li>
                                        <Link href={artOfWeaving()}>
                                            {t('nav.art')}
                                        </Link>
                                    </li>
                                    <li>
                                        <Link href={index.product()}>
                                            {t('nav.products')}
                                        </Link>
                                    </li>
                                    <li>
                                        <Link href={bespoke()}>
                                            {t('nav.bespoke')}
                                        </Link>
                                    </li>
                                    <li>
                                        <Link href={faq()}>{t('nav.faq')}</Link>
                                    </li>
                                    <li>
                                        <Link href={contact()}>
                                            {t('nav.contact')}
                                        </Link>
                                    </li>
                                </ul>
                            </SheetContent>
                        </Sheet>
                        {/* {auth.user ? (
                        <Link
                            href={dashboard()}
                            className="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                        >
                            Dashboard
                        </Link>
                    ) : (
                        <>
                            <Link
                                href={login()}
                                className="inline-block rounded-sm border border-transparent px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#19140035] dark:text-[#EDEDEC] dark:hover:border-[#3E3E3A]"
                            >
                                Log in
                            </Link>
                            <Link
                                href={register()}
                                className="inline-block rounded-sm border border-[#19140035] px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:text-[#EDEDEC] dark:hover:border-[#62605b]"
                            >
                                Register
                            </Link>
                        </>
                    )} */}
                    </nav>
                </div>
            </header>
        </>
    );
}