crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-07 16:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: Saving work

Browse Source
This commit is contained in:
Sol Irvine 2023-08-17 11:38:09 +09:00
parent 9decd30d41
commit 32bb4ffd0c
8 changed files with 134 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/[lang]/images/home-image-001.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 MiB

2
app/[lang]/layout.tsx
View File

@ -86,7 +86,7 @@ export default async function RootLayout({
<html lang={params.lang} className={`${cinzel.variable} ${alpina.variable} ${noto.variable}`}> <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"> <body className="bg-dark text-white selection:bg-green-800 selection:text-green-400">
<div className="mx-auto max-w-screen-2xl"> <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 /> <Navbar />
<Suspense> <Suspense>
<main>{children}</main> <main>{children}</main>

16
app/[lang]/page.tsx
View File

@ -4,9 +4,13 @@ import Footer from 'components/layout/footer';
import { LanguageControl } from 'components/layout/navbar/language-control'; import { LanguageControl } from 'components/layout/navbar/language-control';
import type { Locale } from '../../i18n-config'; import type { Locale } from '../../i18n-config';
import clsx from 'clsx';
import LogoNamemark from 'components/icons/namemark'; import LogoNamemark from 'components/icons/namemark';
import NewsletterSignup from 'components/layout/newsletter-signup'; import NewsletterSignup from 'components/layout/newsletter-signup';
import Shoplist from 'components/layout/shoplist';
import Image from 'next/image';
import { Suspense } from 'react'; import { Suspense } from 'react';
import HomeImage001 from './images/home-image-001.webp';
export const runtime = 'edge'; export const runtime = 'edge';
const { SITE_NAME } = process.env; 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]" /> <LogoNamemark className="w-[260px] fill-current md:w-[600px]" />
</div> </div>
<ThreeItemGrid lang={lang} /> <ThreeItemGrid lang={lang} />
<div className="py-24"> <div className="py-48">
<NewsletterSignup /> <NewsletterSignup />
</div> </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> <Suspense>
<Carousel /> <Carousel />
<Suspense> <Suspense>

9
app/context/language-context.tsx
View File

@ -4,6 +4,7 @@ import { Locale } from 'i18n-config';
import { ReactNode, createContext, useContext, useState } from 'react'; import { ReactNode, createContext, useContext, useState } from 'react';
interface IContextProps { interface IContextProps {
currentLocale?: Locale;
currentLanguage?: Locale; currentLanguage?: Locale;
setCurrentLanguage: (language: Locale) => void; setCurrentLanguage: (language: Locale) => void;
currentDictionary?: any; currentDictionary?: any;
@ -12,20 +13,22 @@ interface IContextProps {
export const LanguageContext = createContext<IContextProps>({} as IContextProps); export const LanguageContext = createContext<IContextProps>({} as IContextProps);
export function LanguageProvider({ export function LanguageProvider({
language, locale,
dictionary, dictionary,
children children
}: { }: {
language: Locale; locale: Locale;
dictionary?: any; dictionary?: any;
children: ReactNode | ReactNode[] | string; 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); const [currentDictionary] = useState<any | undefined>(dictionary);
return ( return (
<LanguageContext.Provider <LanguageContext.Provider
value={{ value={{
currentLocale,
currentLanguage, currentLanguage,
setCurrentLanguage, setCurrentLanguage,
currentDictionary currentDictionary

93
components/layout/shoplist.tsx Normal file
View 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>
);
}

9
dictionaries/en.json
View File

@ -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.", "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", "placeholder": "Email",
"button": "Notify me" "button": "Notify me"
},
"shops": {
"title": "",
"hokkaido": "Hokkaido / North",
"kanto": "Kanto",
"chubu": "Chubu",
"kinki": "Kinki",
"chugoku": "Chugoku",
"kyushu": "Kyushu"
} }
} }

9
dictionaries/ja.json
View File

@ -14,5 +14,14 @@
"description": "ニュースレターにご登録いただくと、初回送料無料クーポン、購読者限定の情報やペアリングディナーなどのご案内をお送りさせていただきます。", "description": "ニュースレターにご登録いただくと、初回送料無料クーポン、購読者限定の情報やペアリングディナーなどのご案内をお送りさせていただきます。",
"placeholder": "メールアドレス", "placeholder": "メールアドレス",
"button": "登録する" "button": "登録する"
},
"shops": {
"title": "取り扱い店",
"hokkaido": "北海道・東北",
"kanto": "関東",
"chubu": "中部",
"kinki": "近畿",
"chugoku": "中国・四国",
"kyushu": "九州"
} }
} }

1
tailwind.config.js
View File

@ -7,6 +7,7 @@ module.exports = {
theme: { theme: {
extend: { extend: {
colors: { colors: {
subtle: '#606A5F',
dark: '#212720' dark: '#212720'
}, },
fontFamily: { fontFamily: {