mirror of
https://github.com/vercel/commerce.git
synced 2025-06-07 16:56:59 +00:00
wip: Saving work
This commit is contained in:
Sol Irvine
parent
9decd30d41
commit
32bb4ffd0c
BIN
app/[lang]/images/home-image-001.webp
Normal file
BIN
app/[lang]/images/home-image-001.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 MiB |
@ -86,7 +86,7 @@ export default async function RootLayout({
|
||||
<html lang={params.lang} className={`${cinzel.variable} ${alpina.variable} ${noto.variable}`}>
|
||||
<body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
|
||||
<div className="mx-auto max-w-screen-2xl">
|
||||
<LanguageProvider language={params.lang as Locale} dictionary={dictionary}>
|
||||
<LanguageProvider locale={params.lang as Locale} dictionary={dictionary}>
|
||||
<Navbar />
|
||||
<Suspense>
|
||||
<main>{children}</main>
|
||||
|
||||
@ -4,9 +4,13 @@ import Footer from 'components/layout/footer';
|
||||
import { LanguageControl } from 'components/layout/navbar/language-control';
|
||||
import type { Locale } from '../../i18n-config';
|
||||
|
||||
import clsx from 'clsx';
|
||||
import LogoNamemark from 'components/icons/namemark';
|
||||
import NewsletterSignup from 'components/layout/newsletter-signup';
|
||||
import Shoplist from 'components/layout/shoplist';
|
||||
import Image from 'next/image';
|
||||
import { Suspense } from 'react';
|
||||
import HomeImage001 from './images/home-image-001.webp';
|
||||
|
||||
export const runtime = 'edge';
|
||||
const { SITE_NAME } = process.env;
|
||||
@ -29,9 +33,19 @@ export default async function HomePage({ params: { lang } }: { params: { lang: L
|
||||
<LogoNamemark className="w-[260px] fill-current md:w-[600px]" />
|
||||
</div>
|
||||
<ThreeItemGrid lang={lang} />
|
||||
<div className="py-24">
|
||||
<div className="py-48">
|
||||
<NewsletterSignup />
|
||||
</div>
|
||||
<div className="relative max-w-screen-2xl">
|
||||
<Image
|
||||
src={HomeImage001}
|
||||
alt="A picture of Narai Black bottle in a mossy creek."
|
||||
className={clsx('h-full w-full object-cover')}
|
||||
/>
|
||||
</div>
|
||||
<div className="py-24">
|
||||
<Shoplist />
|
||||
</div>
|
||||
<Suspense>
|
||||
<Carousel />
|
||||
<Suspense>
|
||||
|
||||
@ -4,6 +4,7 @@ import { Locale } from 'i18n-config';
|
||||
import { ReactNode, createContext, useContext, useState } from 'react';
|
||||
|
||||
interface IContextProps {
|
||||
currentLocale?: Locale;
|
||||
currentLanguage?: Locale;
|
||||
setCurrentLanguage: (language: Locale) => void;
|
||||
currentDictionary?: any;
|
||||
@ -12,20 +13,22 @@ interface IContextProps {
|
||||
export const LanguageContext = createContext<IContextProps>({} as IContextProps);
|
||||
|
||||
export function LanguageProvider({
|
||||
language,
|
||||
locale,
|
||||
dictionary,
|
||||
children
|
||||
}: {
|
||||
language: Locale;
|
||||
locale: Locale;
|
||||
dictionary?: any;
|
||||
children: ReactNode | ReactNode[] | string;
|
||||
}) {
|
||||
const [currentLanguage, setCurrentLanguage] = useState<Locale>(language || 'en');
|
||||
const [currentLocale, setCurrentLocale] = useState<Locale>(locale || 'en');
|
||||
const [currentLanguage, setCurrentLanguage] = useState<Locale>(locale || 'en');
|
||||
const [currentDictionary] = useState<any | undefined>(dictionary);
|
||||
|
||||
return (
|
||||
<LanguageContext.Provider
|
||||
value={{
|
||||
currentLocale,
|
||||
currentLanguage,
|
||||
setCurrentLanguage,
|
||||
currentDictionary
|
||||
|
||||
93
components/layout/shoplist.tsx
Normal file
93
components/layout/shoplist.tsx
Normal file
@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
import { ChevronRightIcon } from '@heroicons/react/24/outline';
|
||||
import { useLanguage } from 'app/context/language-context';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Shoplist() {
|
||||
const { currentLocale, currentDictionary } = useLanguage();
|
||||
console.debug({ currentLocale });
|
||||
return (
|
||||
<div className="mx-auto max-w-screen-2xl space-y-4 px-2">
|
||||
<div className="flex w-full flex-row items-baseline space-x-12 pb-6">
|
||||
<h2 className="font-serif text-6xl tracking-wider">shop list</h2>
|
||||
<h3 className="font-multilingual font-serif text-2xl tracking-wider">
|
||||
{currentDictionary?.shops?.title}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-2 gap-px">
|
||||
<Link
|
||||
href="shops/hokkaido"
|
||||
className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
|
||||
>
|
||||
<div>{currentDictionary.shops.hokkaido}</div>
|
||||
<div>
|
||||
<ChevronRightIcon
|
||||
className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="shops/kanto"
|
||||
className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
|
||||
>
|
||||
<div>{currentDictionary.shops.kanto}</div>
|
||||
<div>
|
||||
<ChevronRightIcon
|
||||
className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="shops/chubu"
|
||||
className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
|
||||
>
|
||||
<div>{currentDictionary.shops.chubu}</div>
|
||||
<div>
|
||||
<ChevronRightIcon
|
||||
className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="shops/kinki"
|
||||
className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
|
||||
>
|
||||
<div>{currentDictionary.shops.kinki}</div>
|
||||
<div>
|
||||
<ChevronRightIcon
|
||||
className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="shops/chugoku"
|
||||
className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
|
||||
>
|
||||
<div>{currentDictionary.shops.chugoku}</div>
|
||||
<div>
|
||||
<ChevronRightIcon
|
||||
className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
<Link
|
||||
href="shops/kyushu"
|
||||
className="group col-span-1 flex flex-row items-center justify-between p-6 outline outline-1 outline-subtle"
|
||||
>
|
||||
<div>{currentDictionary.shops.kyushu}</div>
|
||||
<div>
|
||||
<ChevronRightIcon
|
||||
className="h-6 w-6 stroke-subtle transition-colors duration-150 group-hover:stroke-white"
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -14,5 +14,14 @@
|
||||
"description": "Subscribe to our newsletter to receive free shipping on your first order, and access to exclusive information regarding events and pairing dinners.",
|
||||
"placeholder": "Email",
|
||||
"button": "Notify me"
|
||||
},
|
||||
"shops": {
|
||||
"title": "",
|
||||
"hokkaido": "Hokkaido / North",
|
||||
"kanto": "Kanto",
|
||||
"chubu": "Chubu",
|
||||
"kinki": "Kinki",
|
||||
"chugoku": "Chugoku",
|
||||
"kyushu": "Kyushu"
|
||||
}
|
||||
}
|
||||
|
||||
@ -14,5 +14,14 @@
|
||||
"description": "ニュースレターにご登録いただくと、初回送料無料クーポン、購読者限定の情報やペアリングディナーなどのご案内をお送りさせていただきます。",
|
||||
"placeholder": "メールアドレス",
|
||||
"button": "登録する"
|
||||
},
|
||||
"shops": {
|
||||
"title": "取り扱い店",
|
||||
"hokkaido": "北海道・東北",
|
||||
"kanto": "関東",
|
||||
"chubu": "中部",
|
||||
"kinki": "近畿",
|
||||
"chugoku": "中国・四国",
|
||||
"kyushu": "九州"
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
subtle: '#606A5F',
|
||||
dark: '#212720'
|
||||
},
|
||||
fontFamily: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user