add tabletype

src/app/publication/page.tsx

@@ -9,7 +9,7 @@ export default async function Page() {
   const pubs = await getPubsWithGenres()
   return (
     <div className="container mx-auto">
-      <DataTable data={pubs} columns={columns} />
+      <DataTable data={pubs} columns={columns} type="publication" />
 
     </div>
   )

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

@@ -33,7 +33,7 @@ export default async function Page({ params }: { params: { id: string } }) {
       <PageHeader>{data?.title ?? ""}</PageHeader>
       <GenreBadges genres={data.genres} className="my-6" />
       <PageSubHeader>Submissions:</PageSubHeader>
-      <DataTable columns={columns} data={storySubs} />
+      <DataTable columns={columns} data={storySubs} type="submission" />
 
     </div>
 

src/app/story/columns.tsx

@@ -3,20 +3,7 @@ import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
 import { StoryWithGenres } from "./page"
 import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
-import { Badge } from "@/components/ui/badge"
-import { Trash2, Search } from "lucide-react"
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog"
 import { deleteStory } from "app/lib/del"
-import Link from "next/link"
-import { DialogClose } from "@radix-ui/react-dialog"
 import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
 

src/app/story/page.tsx

@@ -10,7 +10,7 @@ export default async function Page() {
   const stories: Array<StoryWithGenres> = await getStoriesWithGenres()
   return (
     <div className="container mx-auto">
-      <DataTable columns={columns} data={stories} />
+      <DataTable columns={columns} data={stories} type="story" />
     </div>
   )
 }

src/app/submission/columns.tsx

@@ -89,8 +89,6 @@ export const columns: ColumnDef<SubComplete>[] = [
     id: "story",
     header: "Story"
   },
-
-
   actions({ pathname: "/submission", deleteFn: deleteSub })
 
 ]

src/app/submission/page.tsx

@@ -12,7 +12,7 @@ export default async function Page() {
   const subs: Array<SubComplete> = await getSubsComplete()
   return (
     <div className="container">
-      <DataTable data={subs} columns={columns} />
+      <DataTable data={subs} columns={columns} type="submission" />
     </div>
   )
 }

src/app/tailwind.css

@@ -446,6 +446,38 @@ video {
   display: none;
 }
 
+:root {
+  --background: 258 70% 100%;
+  --foreground: 258 77% 0%;
+  --muted: 258 29% 85%;
+  --muted-foreground: 258 10% 40%;
+  --popover: 258 70% 100%;
+  --popover-foreground: 258 77% 0%;
+  --card: 258 70% 100%;
+  --card-foreground: 258 77% 0%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --primary: 258 58% 37%;
+  --primary-foreground: 258 58% 97%;
+  --secondary: 258 19% 81%;
+  --secondary-foreground: 258 19% 21%;
+  --accent: 258 19% 81%;
+  --accent-foreground: 258 19% 21%;
+  --destructive: 19 98% 27%;
+  --destructive-foreground: 19 98% 87%;
+  --ring: 258 58% 37%;
+  --radius: 0.5rem;
+}
+
+* {
+  border-color: hsl(var(--border));
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -660,31 +692,24 @@ video {
   grid-column-start: 1;
 }
 
-.col-start-2 {
-  grid-column-start: 2;
-}
-
 .col-start-3 {
   grid-column-start: 3;
 }
 
-.col-end-2 {
-  grid-column-end: 2;
-}
-
 .col-end-3 {
   grid-column-end: 3;
 }
 
-.m-2 {
-  margin: 0.5rem;
-}
-
 .-mx-1 {
   margin-left: -0.25rem;
   margin-right: -0.25rem;
 }
 
+.mx-1 {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -705,11 +730,6 @@ video {
   margin-bottom: 1.5rem;
 }
 
-.mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -738,10 +758,6 @@ video {
   margin-top: 1.5rem;
 }
 
-.inline {
-  display: inline;
-}
-
 .flex {
   display: flex;
 }
@@ -963,10 +979,6 @@ video {
           user-select: none;
 }
 
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
 .grid-cols-12 {
   grid-template-columns: repeat(12, minmax(0, 1fr));
 }
@@ -1019,10 +1031,6 @@ video {
   gap: 1rem;
 }
 
-.gap-5 {
-  gap: 1.25rem;
-}
-
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -1190,10 +1198,6 @@ video {
   background-color: transparent;
 }
 
-.bg-foreground {
-  background-color: hsl(var(--foreground));
-}
-
 .fill-current {
   fill: currentColor;
 }
@@ -1206,6 +1210,10 @@ video {
   padding: 0.25rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
 .p-3 {
   padding: 0.75rem;
 }
@@ -1218,10 +1226,6 @@ video {
   padding: 1.5rem;
 }
 
-.p-2 {
-  padding: 0.5rem;
-}
-
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -1277,6 +1281,10 @@ video {
   padding-bottom: 1rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -1297,10 +1305,6 @@ video {
   padding-top: 0.25rem;
 }
 
-.pl-2 {
-  padding-left: 0.5rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -1318,9 +1322,9 @@ video {
   line-height: 2.25rem;
 }
 
-.text-5xl {
-  font-size: 3rem;
-  line-height: 1;
+.text-4xl {
+  font-size: 2.25rem;
+  line-height: 2.5rem;
 }
 
 .text-\[0\.8rem\] {
@@ -1352,31 +1356,6 @@ video {
   line-height: 1rem;
 }
 
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.text-lg\/3 {
-  font-size: 1.125rem;
-  line-height: .75rem;
-}
-
-.text-lg\/5 {
-  font-size: 1.125rem;
-  line-height: 1.25rem;
-}
-
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-sm\/3 {
-  font-size: 0.875rem;
-  line-height: .75rem;
-}
-
 .font-black {
   font-weight: 900;
 }
@@ -1564,6 +1543,98 @@ video {
   animation-duration: 200ms;
 }
 
+/* @layer base { */
+
+/*     :root { */
+
+/*       --background: 43 62% 98%; */
+
+/*       --foreground: 43 73% 2%; */
+
+/*       --muted: 43 24% 85%; */
+
+/*       --muted-foreground: 43 10% 37%; */
+
+/*       --popover: 43 62% 98%; */
+
+/*       --popover-foreground: 43 73% 2%; */
+
+/*       --card: 43 62% 98%; */
+
+/*       --card-foreground: 43 73% 2%; */
+
+/*       --border: 43 15% 91%; */
+
+/*       --input: 43 15% 91%; */
+
+/*       --primary: 43 50% 69%; */
+
+/*       --primary-foreground: 43 50% 9%; */
+
+/*       --secondary: 43 6% 92%; */
+
+/*       --secondary-foreground: 43 6% 32%; */
+
+/*       --accent: 43 13% 83%; */
+
+/*       --accent-foreground: 43 13% 23%; */
+
+/*       --destructive: 8 84% 20%; */
+
+/*       --destructive-foreground: 8 84% 80%; */
+
+/*       --ring: 43 50% 69%; */
+
+/*       --radius: 0.5rem; */
+
+/*     } */
+
+/*    */
+
+/*     .dark { */
+
+/*       --background: 43 48% 4%; */
+
+/*       --foreground: 43 26% 97%; */
+
+/*       --muted: 43 24% 15%; */
+
+/*       --muted-foreground: 43 10% 63%; */
+
+/*       --popover: 43 48% 4%; */
+
+/*       --popover-foreground: 43 26% 97%; */
+
+/*       --card: 43 48% 4%; */
+
+/*       --card-foreground: 43 26% 97%; */
+
+/*       --border: 43 15% 13%; */
+
+/*       --input: 43 15% 13%; */
+
+/*       --primary: 43 50% 69%; */
+
+/*       --primary-foreground: 43 50% 9%; */
+
+/*       --secondary: 43 8% 18%; */
+
+/*       --secondary-foreground: 43 8% 78%; */
+
+/*       --accent: 43 14% 23%; */
+
+/*       --accent-foreground: 43 14% 83%; */
+
+/*       --destructive: 8 84% 52%; */
+
+/*       --destructive-foreground: 0 0% 100%; */
+
+/*       --ring: 43 50% 69%; */
+
+/*     } */
+
+/*   } */
+
 .file\:border-0::file-selector-button {
   border-width: 0px;
 }

src/app/ui/navLinks.tsx

@@ -19,14 +19,17 @@ export default function Navlinks(props: ComponentProps<"div">) {
   ]
   return (
     <div className={props.className}>
-      {links.map(e => (<NavLink key={e.link} href={e.link}
-        className={clsx("text-xl font-black my-2 w-full pl-2 antialiased",
-          {
-            "text-primary-foreground bg-primary": pathname === e.link
-          }
-        )}
-      >{e.label}</NavLink >))
-      }
+      <div className="text-secondary-foreground" >
+        {
+          links.map(e => (<NavLink key={e.link} href={e.link}
+            className={clsx("text-xl font-black my-2 w-full pl-2 antialiased",
+              {
+                "text-primary-foreground bg-primary": pathname === e.link
+              }
+            )}
+          >{e.label}</NavLink >))
+        }
+      </ div>
     </div>
   )
 }

src/app/ui/tables/data-table.tsx

@@ -40,10 +40,12 @@ interface DataTableProps<TData, TValue> {
   data: TData[]
 }
 
+
 export function DataTable<TData, TValue>({
   columns,
   data,
-}: DataTableProps<TData, TValue>) {
+  type
+}: DataTableProps<TData, TValue> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
   //STATE
   const [sorting, setSorting] = useState<SortingState>([])
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@@ -105,7 +107,7 @@ export function DataTable<TData, TValue>({
         />
       </div>
 
-      <Button onClick={() => router.push(pathname + "/create")}>Create new {pathname.slice(1)}</Button>
+      <Button onClick={() => router.push(pathname + "/create")}>Create new {type}</Button>
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>