104 lines
3.5 KiB
JavaScript
104 lines
3.5 KiB
JavaScript
import Page from 'site/components/wrappers/page.js'
|
|
import useApp from 'site/hooks/useApp.js'
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
import Layout from 'site/components/layouts/docs'
|
|
import { useTranslation } from 'next-i18next'
|
|
import FsIcon from 'shared/components/icons/freesewing'
|
|
import Link from 'next/link'
|
|
import Popout from 'shared/components/popout'
|
|
import { useRouter } from 'next/router'
|
|
import themes from 'shared/themes/index.js'
|
|
|
|
const translations = {
|
|
sade: {
|
|
en: `Stand-alone development environment`,
|
|
nl: `Vrijstaande ontwikkeling omgeving`,
|
|
},
|
|
load: {
|
|
en: `To your design`,
|
|
nl: `Naar jouw ontwerp`,
|
|
},
|
|
tips: {
|
|
en: <Popout tip compact>Edit the files in the <strong>design</strong> folder, and we'll auto-update your design</Popout>,
|
|
nl: <Popout tip compact>Bewerk de bestanden in de <strong>design</strong> map, en we passen je ontwerp automatisch aan</Popout>,
|
|
},
|
|
}
|
|
|
|
const HomePage = (props) => {
|
|
const app = useApp()
|
|
const router = useRouter()
|
|
const { t } = useTranslation(['common', 'patrons', 'locales', 'themes'])
|
|
|
|
return (
|
|
<Page app={app} title={false} layout={Layout}>
|
|
<div className="text-center w-full pt-20 pb-10 max-w-4xl m-auto">
|
|
<FsIcon className="w-96 m-auto" />
|
|
<h1>FreeSewing</h1>
|
|
<h4>{translations.sade[app.locale]}</h4>
|
|
<Link href="/design">
|
|
<a className="btn btn-primary btn-lg h-20 my-8 mb-12">
|
|
<span role='image' className="text-4xl px-6">👉</span>
|
|
<span className="text-xl px-2">{translations.load[app.locale]}</span>
|
|
<span role='image' className="text-4xl px-6">👈</span>
|
|
</a>
|
|
</Link>
|
|
{translations.tips[app.locale]}
|
|
</div>
|
|
<div className="flex flex-row flex-wrap gap-4 w-full max-w-4xl m-auto justify-center">
|
|
{router.locales.map(locale => (
|
|
<Link href={router.asPath} locale={locale} key={locale}>
|
|
<a className="btn btn-ghost text-base-content hover:bg-base-200">
|
|
<span className="text-base-content">
|
|
{t(`locales:${locale}`)}
|
|
</span>
|
|
</a>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-row flex-wrap gap-4 w-full max-w-4xl m-auto justify-center mt-4">
|
|
{Object.keys(themes).map(theme => (
|
|
<button
|
|
key={theme}
|
|
onClick={() => app.setTheme(theme)}
|
|
className="btn btn-ghost hover:bg-base-200"
|
|
>
|
|
<span className="text-base-content">
|
|
{t(`themes:${theme}Theme`)}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
|
|
<div className="py-20">
|
|
<h2>{t('patrons:supportFreesewing')}</h2>
|
|
<div className="flex flex-row flex-wrap gap-2">
|
|
<div>
|
|
<p className="max-w-3xl">{t('patrons:patronLead')}</p>
|
|
<p className="max-w-3xl">{t('patrons:patronPitch')}</p>
|
|
</div>
|
|
<a className="btn btn-accent btn-lg ">
|
|
<span role='image' className="text-4xl px-4">🥰</span>
|
|
<span className="px-2">{t('patrons:becomeAPatron')}</span>
|
|
<span role='image' className="text-4xl px-4">🙏🏻</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{/* here to force Tailwind inclusion of the w-8 h-8 classes */}
|
|
<span className="w-8 h-8" />
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
export default HomePage
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
return {
|
|
props: {
|
|
...(await serverSideTranslations(locale)),
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|