diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000000000000000000000000000000000000..9a6d9756ec88b4c84ebf5fe7c903d8a5f78ccb27 --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,17 @@ +import type { AppProps } from 'next/app'; +import React, { Children } from 'react'; + +import Nav from './placeholder/PlaceholderNav'; + +export default function Layout({ + children, +}: { + children: JSX.Element; +}): JSX.Element { + return ( + <> + <Nav /> + <main>{children}</main> + </> + ); +} diff --git a/src/components/placeholder/PlaceholderNav.tsx b/src/components/placeholder/PlaceholderNav.tsx index 8d13f7be0d6dd8814c607b911de0d02e299038b6..51ef058ece649d0ec2482f6cf34d5eb1c5bfdbc6 100644 --- a/src/components/placeholder/PlaceholderNav.tsx +++ b/src/components/placeholder/PlaceholderNav.tsx @@ -2,8 +2,11 @@ import Link from 'next/link'; import React from 'react'; const links = [ - { href: 'https://github.com/vercel/next.js', label: 'GitHub' }, - { href: 'https://nextjs.org/docs', label: 'Docs' }, + { + href: 'https://tailwindcss.com/docs/utility-first', + label: 'Tailwind Docs', + }, + { href: 'https://nextjs.org/docs', label: 'Next.js Docs' }, ]; export default function Nav(): JSX.Element { @@ -18,7 +21,7 @@ export default function Nav(): JSX.Element { <ul className="flex items-center justify-between space-x-4"> {links.map(({ href, label }) => ( <li key={`${href}${label}`}> - <a href={href} className="btn-blue no-underline"> + <a href={href} className="btn-blue"> {label} </a> </li> diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f92a78d8d0a258835df248933647549dff02d725..1ac70a1213c9beef4264f8e88426b9b4d676bec2 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,13 +1,13 @@ +import Layout from 'components/Layout'; import Nav from 'components/placeholder/PlaceholderNav'; import React from 'react'; export default function IndexPage(): JSX.Element { return ( - <div> - <Nav /> + <Layout> <div className="py-20"> <h1 className="text-5xl text-center">Next.js + Tailwind CSS</h1> </div> - </div> + </Layout> ); } diff --git a/src/style/globalStyles.css b/src/style/globalStyles.css index 725f65e339a4908899180870e16b81d23bfdeb16..b53f591a3f70b5ac24feb3514b8a7d0449205ac9 100644 --- a/src/style/globalStyles.css +++ b/src/style/globalStyles.css @@ -6,5 +6,5 @@ @import 'tailwindcss/utilities.css'; .btn-blue { - @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; + @apply bg-blue-500 text-white font-bold py-2 px-4 rounded no-underline whitespace-no-wrap; }