Add header and footer

components/Footer.tsx

@@ -0,0 +1,45 @@
+export default function Footer() {
+  return (
+    <footer className='text-gray-600 body-font'>
+      <div className='container flex flex-col items-center px-5 py-8 mx-auto sm:flex-row'>
+        <a className='flex items-center justify-center font-medium text-gray-900 title-font md:justify-start'>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            fill='none'
+            stroke='currentColor'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            strokeWidth={2}
+            className='w-10 h-10 p-2 text-white bg-indigo-500 rounded-full'
+            viewBox='0 0 24 24'>
+            <path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' />
+          </svg>
+          <span className='ml-3 text-xl'>Mock SAML</span>
+        </a>
+        <p className='mt-4 text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0'>
+          Powered by{' '}
+          <a
+            href='https://boxyhq.com/'
+            className='ml-1 text-gray-600'
+            rel='noopener noreferrer'
+            target='_blank'>
+            <strong>BoxyHQ</strong>
+          </a>
+        </p>
+        <span className='inline-flex justify-center mt-4 sm:ml-auto sm:mt-0 sm:justify-start'>
+          <a className='ml-3 text-gray-500'>
+            <svg
+              fill='currentColor'
+              strokeLinecap='round'
+              strokeLinejoin='round'
+              strokeWidth={2}
+              className='w-5 h-5'
+              viewBox='0 0 24 24'>
+              <path d='M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z' />
+            </svg>
+          </a>
+        </span>
+      </div>
+    </footer>
+  );
+}

components/Header.tsx

@@ -0,0 +1,27 @@
+export default function Header() {
+  return (
+    <header className='text-gray-600 body-font'>
+      <div className='container flex flex-col flex-wrap items-center p-5 mx-auto md:flex-row'>
+        <a className='flex items-center mb-4 font-medium text-gray-900 title-font md:mb-0'>
+          <svg
+            xmlns='http://www.w3.org/2000/svg'
+            fill='none'
+            stroke='currentColor'
+            strokeLinecap='round'
+            strokeLinejoin='round'
+            strokeWidth={2}
+            className='w-10 h-10 p-2 text-white bg-indigo-500 rounded-full'
+            viewBox='0 0 24 24'>
+            <path d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5' />
+          </svg>
+          <span className='ml-3 text-xl'>Mock SAML</span>
+        </a>
+        <nav className='flex flex-wrap items-center justify-center text-base md:ml-auto'>
+          <a className='mr-5 hover:text-gray-900' href='https://github.com/boxyhq/jackson'>
+            Integrate SAML with a few lines of code.
+          </a>
+        </nav>
+      </div>
+    </header>
+  );
+}

components/Layout.tsx

@@ -1,4 +1,6 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react';
+import Footer from './Footer';
+import Header from './Header';
 
 type LayoutProps = {
   children: ReactNode;
@@ -6,10 +8,9 @@ type LayoutProps = {
 export default function Layout({ children }: LayoutProps) {
   return (
     <>
-      <header className="py-5 px-20">
+      <Header></Header>
-        <h1 className="text-3xl font-bold">Mock SAML IdP</h1>
+      <main className='h-[calc(100%_-_76px)] overflow-auto'>{children}</main>
-      </header>
+      <Footer></Footer>
-      <main className="h-[calc(100%_-_76px)] overflow-auto">{children}</main>
     </>
   );
 }

pages/index.tsx

@@ -1,10 +1,10 @@
-import { GetStaticProps } from "next";
+import { GetStaticProps } from 'next';
-import { IdPMetadata } from "../types";
+import Head from 'next/head';
-import config from "../lib/env";
+import Link from 'next/link';
-import { fetchPublicKey } from "../utils";
+import React from 'react';
-import React from "react";
+import config from '../lib/env';
-import Link from "next/link";
+import { IdPMetadata } from '../types';
-import Head from "next/head";
+import { fetchPublicKey } from '../utils';
 
 export const getStaticProps: GetStaticProps = async () => {
   const metadata: IdPMetadata = {
@@ -22,22 +22,20 @@ export const getStaticProps: GetStaticProps = async () => {
 
 const Home: React.FC<{ metadata: IdPMetadata }> = ({ metadata }) => {
   return (
-    <div className="h-full">
+    <div className='h-full'>
       <Head>
         <title>Mock SAML IdP - Metadata</title>
       </Head>
-      <div className="w-4/5 lg:w-3/5 mx-auto relative top-20 bg-blue-50 p-10 rounded-xl grid gap-6 grid-cols-3 shadow-lg shadow-blueGray-50 text-[#145698]">
+      <div className='w-4/5 lg:w-3/5 mx-auto relative top-20 bg-blue-50 p-10 rounded-xl grid gap-6 grid-cols-3 shadow-lg shadow-blueGray-50 text-[#145698]'>
-        <p className="font-extrabold">SSO URL</p>
+        <p className='font-extrabold'>SSO URL</p>
-        <p className="col-span-2">{metadata.ssoUrl}</p>
+        <p className='col-span-2'>{metadata.ssoUrl}</p>
-        <p className="font-extrabold">Entity ID</p>
+        <p className='font-extrabold'>Entity ID</p>
-        <p className="col-span-2">{metadata.entityId}</p>
+        <p className='col-span-2'>{metadata.entityId}</p>
-        <p className="font-extrabold">Certificate</p>
+        <p className='font-extrabold'>Certificate</p>
-        <p className="min-w-0 col-span-2 overflow-auto text-sm">
+        <p className='min-w-0 col-span-2 overflow-auto text-sm'>{metadata.certificate}</p>
-          {metadata.certificate}
-        </p>
         <br></br>
         <p>
-          <Link href="/api/saml/metadata/download">Download Metadata</Link>
+          <Link href='/api/saml/metadata/download'>Download Metadata</Link>
         </p>
       </div>
     </div>