feat(components): implement Head for each page with reusability

2022-03-24 15:01:50 +01:00
parent 64190593dd
commit 2e0aecd153
2 changed files with 33 additions and 1 deletions
--- a/components/Head/NextHead.tsx
+++ b/components/Head/NextHead.tsx
@@ -0,0 +1,32 @@
+import Head from 'next/head'
+
+import { projectConfig } from '@/utils/config'
+
+interface HeadProps {
+  longName?: string
+  shortName?: string
+}
+
+const NextHead: React.FC<HeadProps> = (props) => {
+  const {
+    longName = projectConfig.longName,
+    shortName = projectConfig.shortName,
+    children
+  } = props
+
+  return (
+    <Head>
+      <title>
+        {props.longName == null
+          ? longName
+          : props.shortName == null && shortName}
+      </title>
+
+      <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+
+      {children}
+    </Head>
+  )
+}
+
+export default NextHead
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 import type { NextPage } from 'next'

-import Head from '../components/Head'
+import Head from '../components/Head/NextHead'

 const Home: NextPage = () => {
  return (