diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/footer.js | 2 | ||||
| -rw-r--r-- | components/header.js | 24 | ||||
| -rw-r--r-- | components/layout.js | 4 |
3 files changed, 20 insertions, 10 deletions
diff --git a/components/footer.js b/components/footer.js index defef0d..59c5f7a 100644 --- a/components/footer.js +++ b/components/footer.js @@ -2,7 +2,7 @@ export default function Footer() { return (
<>
<footer>
-<p class="text-center text-slate-800 hover:text-slate-500 transition duration-150 ease-out hover:ease-in">This website was created for the Southeastern Government of BNBMC, a fictional world created within Minecraft. The content you see on this website should NOT be taken seriously. With design work by <a href="https://nosi.uk/">Tomas North</a>.</p>
+<p className="text-center text-slate-800 hover:text-slate-500 transition duration-150 ease-out hover:ease-in">This website was created for the Southeastern Government of BNBMC, a fictional world created within Minecraft. The content you see on this website should NOT be taken seriously. With design work by <a href="https://nosi.uk/">Tomas North</a>.</p>
</footer>
</>
)
diff --git a/components/header.js b/components/header.js index 9cc7d44..b3bfe64 100644 --- a/components/header.js +++ b/components/header.js @@ -1,22 +1,32 @@ +import Link from 'next/link'
+
export default function Header() {
return (
<>
<header>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
- <div class="bg-green-800 py-3 px-2 text-white font-semibold text-right"><a href="https://aircs.racing/"><i class="fa fa-arrow-left mr-2"></i> aircs.racing</a></div>
- <div class="flex items-center justify-between flex-wrap p-6 bg-slate-950">
- <div class="flex items-center flex-shrink-0 text-white mr-6">
- <p class="font-semibold text-xl tracking-tight">SEI.GOV</p>
+ <div className="bg-green-800 py-3 px-2 text-white font-semibold text-right"><a href="https://aircs.racing/"><i className="fa fa-arrow-left mr-2"></i> aircs.racing</a></div>
+ <div className="flex items-center justify-between flex-wrap p-6 bg-slate-950">
+ <div className="flex items-center flex-shrink-0 text-white mr-6">
+ <p className="font-semibold text-xl tracking-tight">SEI.GOV</p>
</div>
- <div class="flex items-center w-auto">
- <div class="text-sm flex-grow">
+ <div className="flex items-center w-auto">
+ <div className="text-sm flex-grow">
{[
['fas fa-home', 'Home', '/'],
['fas fa-person', 'Life in SEI', '/life'],
['fas fa-door-open', 'Cabinet', '/cabinet'],
['fas fa-note-sticky', 'Reports', '/reports'],
].map(([icon, title, url]) => (
- <a href={url} className="transition duration-150 ease-out hover:ease-in inline-block mt-0 text-base text-slate-300 hover:text-white mr-4 hover:bg-green-800 rounded-lg p-2"><span class="mr-1"><i class={icon}></i></span> {title}</a>
+ // eslint-disable-next-line react/jsx-key
+ <Link href={url} className="transition duration-150 ease-out hover:ease-in inline-block mt-0 text-base text-slate-300 hover:text-white mr-4 hover:bg-green-800 rounded-lg p-2">
+ <div>
+ <span className="mr-1">
+ <i className={icon}></i>
+ </span>
+ {title}
+ </div>
+ </Link>
))}
</div>
</div>
diff --git a/components/layout.js b/components/layout.js index 14eeff7..523abfe 100644 --- a/components/layout.js +++ b/components/layout.js @@ -4,9 +4,9 @@ import Footer from './footer'; export default function Layout({ children }) {
return (
<>
- <html class="bg-gray-950 text-white">
+ <html className="bg-gray-950 text-white">
<Header />
- <body class="h-screen"><main>{children}</main></body>
+ <body className="h-screen"><main>{children}</main></body>
<Footer />
</html>
</>
|