diff options
| author | Armand Philippot <git@armandphilippot.com> | 2021-12-29 18:14:27 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2021-12-29 18:14:27 +0100 |
| commit | ab355897a12b7bda1089a44de326d41455a0f7a3 (patch) | |
| tree | 6c792a934d7c0a8f41cbebdfea16b9b2e0b919dd /src/pages/index.tsx | |
| parent | 7038c517ee9fe4415f17b4b20e39a4c11a934b3c (diff) | |
chore(homepage): replace absolute links with custom components
Diffstat (limited to 'src/pages/index.tsx')
| -rw-r--r-- | src/pages/index.tsx | 76 |
1 files changed, 75 insertions, 1 deletions
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 3d4f6ff..886552c 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -6,15 +6,89 @@ import { seo } from '@config/seo'; import { NextPageWithLayout } from '@ts/types/app'; import { loadTranslation } from '@utils/helpers/i18n'; import HomePageContent from '@content/pages/homepage.mdx'; +import { ButtonLink } from '@components/Buttons'; +import styles from '@styles/pages/Home.module.scss'; +import { t } from '@lingui/macro'; const Home: NextPageWithLayout = () => { + const CodingLinks = () => { + return ( + <ul className={styles['links-list']}> + <li> + <ButtonLink target="/thematique/developpement-web"> + {t`Web development`} + </ButtonLink> + </li> + <li> + <ButtonLink target="/projets">{t`Projects`}</ButtonLink> + </li> + </ul> + ); + }; + + const ColdarkRepos = () => { + return ( + <ul className={styles['links-list']}> + <li> + <ButtonLink + target="https://github.com/ArmandPhilippot/coldark" + isExternal={true} + > + Github + </ButtonLink> + </li> + <li> + <ButtonLink + target="https://gitlab.com/ArmandPhilippot/coldark" + isExternal={true} + > + Gitlab + </ButtonLink> + </li> + </ul> + ); + }; + + const LibreLinks = () => { + return ( + <ul className={styles['links-list']}> + <li> + <ButtonLink target="/thematique/libre">{t`Free`}</ButtonLink> + </li> + <li> + <ButtonLink target="/thematique/linux">{t`Linux`}</ButtonLink> + </li> + </ul> + ); + }; + + const MoreLinks = () => { + return ( + <ul className={styles['links-list']}> + <li> + <ButtonLink target="/contact">{t`Contact me`}</ButtonLink> + </li> + <li> + <ButtonLink target="/feed">{t`Subscribe`}</ButtonLink> + </li> + </ul> + ); + }; + + const components = { + CodingLinks: CodingLinks, + ColdarkRepos: ColdarkRepos, + LibreLinks: LibreLinks, + MoreLinks: MoreLinks, + }; + return ( <> <Head> <title>{seo.homepage.title}</title> <meta name="description" content={seo.homepage.description} /> </Head> - <HomePageContent /> + <HomePageContent components={components} /> </> ); }; |