make subs page responsive

package-lock.json

@@ -28,6 +28,7 @@
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
         "jose": "^5.8.0",
+        "lucide": "^0.445.0",
         "lucide-react": "^0.394.0",
         "next": "^14.2.13",
         "next-themes": "^0.3.0",
@@ -6415,6 +6416,11 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lucide": {
+      "version": "0.445.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.445.0.tgz",
+      "integrity": "sha512-Xkaf7xwXnx2DQj6dHAAnEsL8LI0iSeqh1ObVr6CTw9eYLpRchfXHzB+VL6qypqAy18jZmCY1bu4U652dCTHC3Q=="
+    },
     "node_modules/lucide-react": {
       "version": "0.394.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.394.0.tgz",

package.json

@@ -31,6 +31,7 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "jose": "^5.8.0",
+    "lucide": "^0.445.0",
     "lucide-react": "^0.394.0",
     "next": "^14.2.13",
     "next-themes": "^0.3.0",

src/app/submission/columns.tsx

@@ -1,10 +1,11 @@
 "use client"
 import { CellContext, ColumnDef, createColumnHelper } from "@tanstack/react-table"
-import { ArrowUpDown } from "lucide-react"
+import { ArrowUpDown, BookText, CalendarPlus, MessageCircleReply, NotepadText } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { selectCol } from "app/ui/tables/selectColumn"
 import TitleContainer from "app/ui/titleContainer"
+import { CalendarArrowUp } from "lucide"
 
 
 
@@ -18,7 +19,12 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "story",
-    header: "Story",
+    header: () => (
+      <>
+        <span className="hidden md:block">Story</span>
+        <NotepadText className="block md:hidden" />
+      </>
+    ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
@@ -29,7 +35,12 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "pub",
-    header: "Publication",
+    header: () => (
+      <>
+        <span className="hidden md:block">Publication</span>
+        <BookText className="block md:hidden" />
+      </>
+    ),
     cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
@@ -39,16 +50,24 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
+          className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Submitted
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <span className="hidden md:block"> Date Submitted </span>
+          <CalendarPlus className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue().toLocaleDateString()}</p>)
+    cell: (props: CellContext<any, any>) => (
+      <p className="w-full text-center text-xs md:text-sm">{props.getValue().toLocaleDateString('ES', {
+        day: 'numeric',
+        month: 'numeric',
+        year: '2-digit'
+      })}</p>
+    )
   },
   {
     accessorFn: row => row.responded ? new Date(row.responded) : null,
@@ -57,16 +76,22 @@ export const columns: ColumnDef<SubComplete>[] = [
       return (
         <Button
           variant="ghost"
+          className="p-0"
           onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
         >
-          Date Responded
-          <ArrowUpDown className="ml-2 h-4 w-4" />
+          <span className="hidden md:block"> Date Responded </span>
+          <MessageCircleReply className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
         </Button>
       )
     },
     enableColumnFilter: false,
     sortingFn: "datetime",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()?.toLocaleDateString()}</p>)
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()?.toLocaleDateString('ES', {
+      day: 'numeric',
+      month: 'numeric',
+      year: '2-digit'
+    })}</p>)
   },
   {
     accessorFn: row => {
@@ -76,8 +101,20 @@ export const columns: ColumnDef<SubComplete>[] = [
       return "RECORD DELETED"
     },
     id: "response",
-    header: "Response",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-center">{props.getValue()}</p>)
+    header: ({ column }) => {
+      return (
+        <Button
+          variant="ghost"
+          className="p-0"
+          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
+        >
+          <span className="hidden md:block"> Response </span>
+          <MessageCircleReply className="block md:hidden" />
+          <ArrowUpDown className="ml-2 h-4 w-4 hidden md:block" />
+        </Button>
+      )
+    },
+    cell: (props: CellContext<any, any>) => (<p className="w-full text-center text-xs md:text-sm">{props.getValue()}</p>)
   },
 
 ]

src/app/submission/create.tsx

@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { ComponentProps } from "react";
 import { Pub, Response, Story } from "@prisma/client";
 import SubmissionForm from "app/ui/forms/sub";
+import { Plus } from "lucide-react";
 
 
 type CreateSubDefaults = {
@@ -22,7 +23,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses, defau
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button>Create new submission</Button>
+        <Button>
+          <span className="hidden md:block">Create new submission</span>
+          <Plus className="block md:hidden" />
+        </Button>
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>

src/app/submission/page.tsx

@@ -18,7 +18,7 @@ export default async function Page() {
   const genres = await getGenres()
 
   return (
-    <div className="container">
+    <div className="container px-1 md:px-4 mx-auto">
       <DataTable data={subs} columns={columns} tableName="sub"
         stories={stories}
         pubs={pubs}

src/app/ui/titleContainer.tsx

@@ -1,9 +1,9 @@
 import { ComponentProps } from "react";
 
 export default function TitleContainer({ children }: ComponentProps<"div">) {
-  let classes = "w-full text-left m-auto"
+  let classes = "w-full text-left m-auto h-fit flex align-center text-xs md:text-sm"
   if (children == "RECORD DELETED") {
     classes = classes + " text-destructive font-bold"
   }
-  return <span className="h-10 flex align-center"><p className={classes}>{children}</p></span>
+  return <p className={classes}>{children}</p>
 }