From 17b6952206b1e5a9c95eaa735e504241c0aa1c48 Mon Sep 17 00:00:00 2001 From: "Colton Wolkins (Laptop)" Date: Mon, 3 Jun 2024 21:47:25 -0600 Subject: [PATCH] fix: fixup home page & navbar Signed-off-by: Colton Wolkins (Laptop) --- src/app/layout.tsx | 10 ++++- src/app/page.tsx | 91 +++++++++++++++++++++++++++++++--------------- 2 files changed, 69 insertions(+), 32 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9fd85e5..1868050 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,13 +1,19 @@ -import type { Metadata } from "next"; +import type { Metadata, Viewport } from "next"; import { Inter } from "next/font/google"; import "./wyvrn.css"; // const inter = Inter({ subsets: ["latin"] }); + +export const viewport: Viewport = { + //themeColor: 'black', + width: "device-width", + initialScale: 1, +}; + export const metadata: Metadata = { title: "Wyvern", description: "Burninating the countryside!", - viewport: "width=device-width, initial-scale=1", }; export default function RootLayout({ diff --git a/src/app/page.tsx b/src/app/page.tsx index 8e8ba76..328b3a7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,6 +4,41 @@ import Link from 'next/link'; import styles from "@/app/home.module.css"; import { useRouter } from 'next/navigation'; import { useState, useEffect } from 'react'; +import type { CustomFlowbiteTheme } from "flowbite-react"; +import { Flowbite, Button, Navbar } from "flowbite-react"; + +const customTheme: CustomFlowbiteTheme = { + navbar: { + root: { + base: "bg-white border-gray-200 dark:bg-gray-900 z-40 relative", + inner: { + base: "max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4 relative", + }, + }, + collapse: { + list: "flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700", + }, + link: { + active: { + on: "block py-2 px-3 md:p-0 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:dark:text-blue-500", + off: "block py-2 px-3 md:p-0 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:dark:hover:text-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700", + }, + }, + }, + button: { + base: "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800", + color: { + info: "bg-red-500 hover:bg-red-600", + }, + inner: { + base: "", + }, + size: { + nav: "text-base", + cta: "text-sm", + }, + }, +}; export default function Home() { const router = useRouter(); @@ -13,35 +48,31 @@ export default function Home() {
-