Add header and footer
This commit is contained in:
Kiran
parent
4ec1bc044e
commit
369008c03f
45
components/Footer.tsx
Normal file
45
components/Footer.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
27
components/Header.tsx
Normal file
27
components/Header.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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">
|
||||
<h1 className="text-3xl font-bold">Mock SAML IdP</h1>
|
||||
</header>
|
||||
<main className="h-[calc(100%_-_76px)] overflow-auto">{children}</main>
|
||||
<Header></Header>
|
||||
<main className='h-[calc(100%_-_76px)] overflow-auto'>{children}</main>
|
||||
<Footer></Footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { GetStaticProps } from "next";
|
||||
import { IdPMetadata } from "../types";
|
||||
import config from "../lib/env";
|
||||
import { fetchPublicKey } from "../utils";
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import Head from "next/head";
|
||||
import { GetStaticProps } from 'next';
|
||||
import Head from 'next/head';
|
||||
import Link from 'next/link';
|
||||
import React from 'react';
|
||||
import config from '../lib/env';
|
||||
import { IdPMetadata } from '../types';
|
||||
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]">
|
||||
<p className="font-extrabold">SSO URL</p>
|
||||
<p className="col-span-2">{metadata.ssoUrl}</p>
|
||||
<p className="font-extrabold">Entity ID</p>
|
||||
<p className="col-span-2">{metadata.entityId}</p>
|
||||
<p className="font-extrabold">Certificate</p>
|
||||
<p className="min-w-0 col-span-2 overflow-auto text-sm">
|
||||
{metadata.certificate}
|
||||
</p>
|
||||
<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='col-span-2'>{metadata.ssoUrl}</p>
|
||||
<p className='font-extrabold'>Entity ID</p>
|
||||
<p className='col-span-2'>{metadata.entityId}</p>
|
||||
<p className='font-extrabold'>Certificate</p>
|
||||
<p className='min-w-0 col-span-2 overflow-auto text-sm'>{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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user