style navlinks

src/app/globals.css

@@ -1,8 +1,8 @@
 @tailwind base;
-  @tailwind components;
-  @tailwind utilities;
+@tailwind components;
+@tailwind utilities;
 
-  @layer base {
+@layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
@@ -64,13 +64,14 @@
     --input: 217.2 32.6% 17.5%;
     --ring: 212.7 26.8% 83.9%;
   }
-  }
+}
 
-  @layer base {
+@layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }
-  }
+}

src/app/layout.tsx

@@ -1,10 +1,12 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+
 import { Toaster } from "@/components/ui/toaster";
 import "./tailwind.css";
 import Link from "next/link";
 import { ComponentProps } from "react";
 import { Send } from "lucide-react";
+import Navlinks from "./ui/navLinks";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -31,12 +33,10 @@ export default function RootLayout({
         <div id="layout-container" className="flex p-4">
           <div id="sidebar" >
             <header className="mb-6">
-              <h1 className="font-black text-6xl antialiased inline">SubMan</h1> <Send className="inline" size={"3rem"} />
+              <h1 className="font-black text-6xl antialiased inline">SubMan</h1> <Send className="inline mb-6" size={"3rem"} />
               <p className="font-bold text-xl antialiased">The self-hosted literary<br />  submission tracker.</p>
             </header>
-            <NavLink href="/story">STORIES</NavLink>
-            <NavLink href="/publication">PUBLICATIONS</NavLink>
-            <NavLink href="/submission">SUBMISSIONS</NavLink>
+            <Navlinks />
           </div>
           {children}
         </div>

src/app/story/[id]/page.tsx

@@ -4,6 +4,7 @@ import { columns } from "app/submission/columns"
 import { PageHeader, PageSubHeader } from "app/ui/pageHeader"
 import { DataTable } from "app/ui/tables/data-table"
 import { Badge } from "@/components/ui/badge"
+import GenreBadges from "app/ui/genreBadges"
 
 //ids are string here because they're coming from url params
 async function getStoryWithGenres(id: string) {
@@ -30,7 +31,7 @@ export default async function Page({ params }: { params: { id: string } }) {
   return <>
     <div className="container">
       <PageHeader>{data?.title ?? ""}</PageHeader>
-      {data.genres.map(e => (<Badge>{e.name}</Badge>))}
+      <GenreBadges genres={data.genres} className="my-6" />
       <PageSubHeader>Submissions:</PageSubHeader>
       <DataTable columns={columns} data={storySubs} />
 

src/app/story/columns.tsx

@@ -17,6 +17,7 @@ import {
 import { deleteStory } from "app/lib/del"
 import Link from "next/link"
 import { DialogClose } from "@radix-ui/react-dialog"
+import GenreBadges from "app/ui/genreBadges"
 
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
@@ -55,8 +56,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
   columnHelper.accessor("genres", {
     cell: props => {
       const genres = props.getValue()
-        .map(e => <Badge>{e.name}</Badge>)
-      return genres
+      return <GenreBadges genres={genres} />
     },
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects

src/app/tailwind.css

@@ -684,14 +684,6 @@ body {
   z-index: 100;
 }
 
-.m-4 {
-  margin: 1rem;
-}
-
-.m-2 {
-  margin: 0.5rem;
-}
-
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
@@ -712,10 +704,19 @@ body {
   margin-bottom: 0.5rem;
 }
 
+.my-6 {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
 
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -728,12 +729,12 @@ body {
   margin-top: 0.5rem;
 }
 
-.mt-4 {
-  margin-top: 1rem;
+.mt-3 {
+  margin-top: 0.75rem;
 }
 
-.mb-6 {
-  margin-bottom: 1.5rem;
+.mt-4 {
+  margin-top: 1rem;
 }
 
 .inline {
@@ -877,38 +878,6 @@ body {
   width: 100%;
 }
 
-.w-3\/4 {
-  width: 75%;
-}
-
-.w-1\/5 {
-  width: 20%;
-}
-
-.w-11 {
-  width: 2.75rem;
-}
-
-.w-5 {
-  width: 1.25rem;
-}
-
-.w-8 {
-  width: 2rem;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.w-16 {
-  width: 4rem;
-}
-
-.w-20 {
-  width: 5rem;
-}
-
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1297,23 +1266,25 @@ body {
   text-align: center;
 }
 
-.text-right {
-  text-align: right;
-}
-
 .align-middle {
   vertical-align: middle;
 }
 
-.font-display {
-  font-family: Playfair;
-}
-
 .text-3xl {
   font-size: 1.875rem;
   line-height: 2.25rem;
 }
 
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+}
+
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .text-\[0\.8rem\] {
   font-size: 0.8rem;
 }
@@ -1333,30 +1304,24 @@ body {
   line-height: 1.25rem;
 }
 
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
 .text-xl {
   font-size: 1.25rem;
   line-height: 1.75rem;
 }
 
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-6xl {
-  font-size: 3.75rem;
-  line-height: 1;
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
 }
 
 .font-black {
   font-weight: 900;
 }
 
+.font-bold {
+  font-weight: 700;
+}
+
 .font-medium {
   font-weight: 500;
 }
@@ -1369,10 +1334,6 @@ body {
   font-weight: 600;
 }
 
-.font-bold {
-  font-weight: 700;
-}
-
 .capitalize {
   text-transform: capitalize;
 }
@@ -1433,6 +1394,11 @@ body {
   color: hsl(var(--secondary-foreground));
 }
 
+.text-slate-50 {
+  --tw-text-opacity: 1;
+  color: rgb(248 250 252 / var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));

src/app/ui/genreBadges.tsx

@@ -0,0 +1,11 @@
+import { Genre } from "@prisma/client";
+import { ComponentProps } from "react";
+import { Badge } from "@/components/ui/badge";
+
+export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
+  return (
+    <div className={props.className}>
+      {props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))}
+    </div>
+  )
+}

src/app/ui/navLinks.tsx

@@ -0,0 +1,33 @@
+"use client"
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ComponentProps } from "react";
+import clsx from "clsx";
+
+
+function NavLink(props: ComponentProps<"div"> & { href: string }) {
+  return (
+    <Link href={props.href}><h1 className={props.className}>{props.children}</h1></Link>
+  )
+}
+export default function Navlinks(props: ComponentProps<"div">) {
+  const pathname = usePathname()
+  const links = [
+    { link: "/story", label: "STORIES" },
+    { link: "/publication", label: "PUBLICATIONS" },
+    { link: "/submission", label: "SUBMISSIONS" },
+  ]
+  return (
+    <>
+      {links.map(e => (<NavLink key={e.link} href={e.link}
+        className={clsx("text-4xl font-black my-2",
+          {
+            "text-destructive": pathname === e.link
+          }
+        )}
+      >{e.label}</NavLink >))
+      }
+      {pathname}
+    </>
+  )
+}

src/app/ui/pageHeader.tsx

@@ -1,9 +1,9 @@
 import { ComponentProps } from "react"
 
 export function PageHeader(props: ComponentProps<"h1">) {
-  return <h1 className="text-3xl font-display font-bold">{props.children}</h1>
+  return <h1 className="text-3xl font-bold mt-3">{props.children}</h1>
 }
 
 export function PageSubHeader(props: ComponentProps<"h2">) {
-  return <h2 className="text-xl font-display font-bold">{props.children}</h2>
+  return <h2 className="text-xl font-bold">{props.children}</h2>
 }

tailwind.config.js

@@ -82,4 +82,3 @@ module.exports = {
   },
   plugins: [require("tailwindcss-animate")],
 };
-