Add favicons and a simple layout

INYESHK24 · Jun 8, 2022 · c709c81 · c709c81
1 parent 028adc2
commit c709c81
Show file tree

Hide file tree

Showing 16 changed files with 333 additions and 9 deletions.
diff --git a/components/icons/VeriteLogo.tsx b/components/icons/VeriteLogo.tsx
@@ -0,0 +1,55 @@
+import type { FC, SVGProps } from "react"
+import clsx from "clsx"
+
+const VeriteLogo: FC<SVGProps<SVGSVGElement>> = ({ className, ...props }) => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 360 143.9"
+        className={clsx(className, "w-full h-full")}
+        {...props}
+      >
+        <path
+          fill="#372c4c"
+          d="M144.83,50.37h3.55a1.65,1.65,0,0,1,1.54,1.05l16.44,42.09L182.8,51.42a1.65,1.65,0,0,1,1.54-1.05h3.54a1.64,1.64,0,0,1,1.53,2.26L170.6,99.29a1.66,1.66,0,0,1-1.53,1h-5.49a1.65,1.65,0,0,1-1.53-1L143.3,52.63A1.65,1.65,0,0,1,144.83,50.37Z"
+        />
+        <path
+          fill="#372c4c"
+          d="M204.12,63.25c10.94,0,17.38,8.54,17.38,19.4h0a1.43,1.43,0,0,1-1.42,1.42H192.22c.45,6.81,5.24,12.51,13,12.51a16,16,0,0,0,9.88-3.42,1.64,1.64,0,0,1,2.35.32l.75,1a1.65,1.65,0,0,1-.27,2.24,20,20,0,0,1-13.24,4.49c-10.71,0-18.42-7.71-18.42-19C186.3,71.71,193.79,63.25,204.12,63.25ZM192.22,80H216c-.08-5.39-3.67-12.06-11.91-12.06C196.34,67.89,192.52,74.41,192.22,80Z"
+        />
+        <path
+          fill="#372c4c"
+          d="M230,64.15h2.32a1.65,1.65,0,0,1,1.65,1.65V70a16,16,0,0,1,10.18-6.46A1.66,1.66,0,0,1,246,65.17V67.3a1.64,1.64,0,0,1-1.7,1.65h-.55c-3.44,0-8.16,2.85-9.81,5.77v24a1.65,1.65,0,0,1-1.65,1.65H230a1.64,1.64,0,0,1-1.64-1.65V65.8A1.64,1.64,0,0,1,230,64.15Z"
+        />
+        <path
+          fill="#372c4c"
+          d="M249.87,54.26c0-3.08,3.73-5.2,6.66-2.52a2,2,0,0,1,.29.36,3.86,3.86,0,0,1-3.2,6A3.83,3.83,0,0,1,249.87,54.26Zm2.62,9.89h2.32a1.65,1.65,0,0,1,1.65,1.65V98.67a1.65,1.65,0,0,1-1.65,1.65h-2.32a1.64,1.64,0,0,1-1.64-1.65V65.8A1.64,1.64,0,0,1,252.49,64.15Z"
+        />
+        <path
+          fill="#372c4c"
+          d="M267,92.76V69.09h-4.35A1.64,1.64,0,0,1,261,67.44V65.8a1.64,1.64,0,0,1,1.64-1.65H267V55.91a1.65,1.65,0,0,1,1.65-1.65H271a1.64,1.64,0,0,1,1.64,1.65v8.24h5.7a1.64,1.64,0,0,1,1.64,1.65v1.64a1.64,1.64,0,0,1-1.64,1.65h-5.7V91.56c0,2.69,1.2,4.64,3.67,4.64a5.91,5.91,0,0,0,2.37-.5,1.64,1.64,0,0,1,2.2.9l.46,1.17a1.63,1.63,0,0,1-.59,2,9.83,9.83,0,0,1-5.71,1.5C269.67,101.22,267,98.15,267,92.76Z"
+        />
+        <path
+          fill="#372c4c"
+          d="M301.38,63.25c10.94,0,17.38,8.54,17.38,19.4h0a1.43,1.43,0,0,1-1.43,1.42H289.47c.45,6.81,5.25,12.51,13,12.51a16,16,0,0,0,9.89-3.42,1.64,1.64,0,0,1,2.35.32l.74,1a1.65,1.65,0,0,1-.26,2.24A20,20,0,0,1,302,101.22c-10.71,0-18.42-7.71-18.42-19C283.56,71.71,291.05,63.25,301.38,63.25ZM289.47,80h23.74c-.07-5.39-3.67-12.06-11.9-12.06C293.59,67.89,289.77,74.41,289.47,80Z"
+        />
+        <path
+          fill="#0db99c"
+          d="M81.36,110.89l.58,0,.41,0,.44,0a22.62,22.62,0,0,0,12-5.19L80.11,77.28h0L80,77,65.38,105.54A22.62,22.62,0,0,0,78,110.83h.13l.8.06h.22l1,0,.92,0Z"
+        />
+        <path
+          fill="#64eea5"
+          d="M65.41,105.48,80,77,71.58,60.62A3,3,0,0,0,68.9,59H44.27a3,3,0,0,0-2.68,4.42L59.82,98.64A22.85,22.85,0,0,0,65.41,105.48Z"
+        />
+        <path fill="#21cb89" d="M94.76,105.61Z" />
+        <path
+          fill="#21cb89"
+          d="M128.92,33H104.27a3,3,0,0,0-2.69,1.65l-21.47,42h0L80,77l.15.29h0L94.8,105.57a22.67,22.67,0,0,0,5.61-7.07l31.2-61.08A3,3,0,0,0,128.92,33Z"
+        />
+      </svg>
+    </>
+  )
+}
+
+export default VeriteLogo
diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx
@@ -0,0 +1,42 @@
+import Link from "next/link"
+import React from "react"
+import type { FC, ReactNode } from "react"
+
+import VeriteLogo from "components/icons/VeriteLogo"
+
+type Props = {
+  children?: ReactNode
+}
+
+const Layout: FC<Props> = ({ children }) => {
+  return (
+    <div className="max-w-lg px-4 py-12 mx-auto">
+      <header>
+        <div className="text-center">
+          <VeriteLogo className="h-14" />
+          <h1 className="mt-2 text-xl font-medium text-gray-900">
+            Credential Faucet
+          </h1>
+          <p className="mt-1 text-sm text-gray-500">
+            This faucet provides sample credentials in different states, by
+            different issuers, to allow you to test your Verite integration.
+          </p>
+        </div>
+      </header>
+
+      <main className="">{children}</main>
+
+      <footer className="my-10 text-xs text-center text-gray-500">
+        &copy; {new Date().getFullYear()}{" "}
+        <Link href="https://centre.io">
+          <a className="transition-colors hover:underline hover:text-gray-800">
+            Centre
+          </a>
+        </Link>
+        .
+      </footer>
+    </div>
+  )
+}
+
+export default Layout
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,11 +13,15 @@
     "type-check": "tsc --pretty --noEmit"
   },
   "dependencies": {
+    "@heroicons/react": "^1.0.6",
+    "clsx": "^1.1.1",
     "next": "12.1.6",
+    "next-seo": "^5.4.0",
     "react": "18.1.0",
     "react-dom": "18.1.0"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.2",
     "@types/jest": "^27.5.2",
     "@types/node": "17.0.38",
     "@types/react": "18.0.10",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,52 @@
 import "../styles/globals.css"
+import { DefaultSeo } from "next-seo"
 import type { AppProps } from "next/app"
+import Head from "next/head"
+import { FC } from "react"
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+import Layout from "components/layout/Layout"
+
+const App: FC<AppProps> = ({ Component, pageProps }) => {
+  return (
+    <>
+      <Head>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/favicon-16x16.png"
+        />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <DefaultSeo
+        title="Credential Faucet"
+        titleTemplate="%s | Verite"
+        description="Generate sample Verite credentials in different states to simplify testing your Verite integration."
+        openGraph={{
+          type: "website",
+          url: "https://faucet.verite.centre.io",
+          site_name: "Verite Credential Faucet"
+        }}
+      />
+
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
+    </>
+  )
 }
 
-export default MyApp
+export default App
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -0,0 +1,17 @@
+import Document, { Html, Head, Main, NextScript } from "next/document"
+
+class AppDocument extends Document {
+  render(): JSX.Element {
+    return (
+      <Html lang="en" className="h-full antialiased">
+        <Head />
+        <body className="h-full overflow-hidden text-gray-800 transition-colors duration-100 bg-white dark:bg-neutral-800 dark:text-white">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default AppDocument