From d991a1005830990670182f3e5cde2d2c635bec41 Mon Sep 17 00:00:00 2001
From: Liangdi <ligsnf@gmail.com>
Date: Thu, 5 Dec 2024 01:52:24 +1100
Subject: [PATCH] add responsive inputs to UI

---
 package-lock.json                  | 37 ++++++++++++++++
 package.json                       |  1 +
 src/components/ui/input.tsx        |  2 +-
 src/components/ui/popover.tsx      | 29 ++++++++++++
 src/components/ui/select.tsx       |  9 ++--
 src/components/ui/table.tsx        | 11 +++--
 src/routes/-components/columns.tsx | 71 ++++++++++++++++++++++++++++--
 src/routes/index.lazy.tsx          |  4 +-
 8 files changed, 148 insertions(+), 16 deletions(-)
 create mode 100644 src/components/ui/popover.tsx

diff --git a/package-lock.json b/package-lock.json
index a511a11..f5dc074 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-dropdown-menu": "^2.1.2",
         "@radix-ui/react-label": "^2.1.0",
+        "@radix-ui/react-popover": "^1.1.2",
         "@radix-ui/react-progress": "^1.1.0",
         "@radix-ui/react-scroll-area": "^1.2.1",
         "@radix-ui/react-select": "^2.1.2",
@@ -1413,6 +1414,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.2.tgz",
+      "integrity": "sha512-u2HRUyWW+lOiA2g0Le0tMmT55FGOEWHwPFt1EPfbLly7uXQExFo5duNKqG2DzmFXIdqOeNd+TpE8baHWJCyP9w==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
diff --git a/package.json b/package.json
index 61bbcd1..03f84f6 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 68551b9..e99481a 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-8 md:h-10 w-full rounded-md border border-input bg-background px-2 md:px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           className
         )}
         ref={ref}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
new file mode 100644
index 0000000..bbba7e0
--- /dev/null
+++ b/src/components/ui/popover.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index fe56d4d..cdd4b6f 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-8 md:h-10 w-full items-center justify-between rounded-md border border-input bg-background px-2 md:px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -103,7 +103,7 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
 ))
@@ -116,17 +116,16 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
-
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ))
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index aee7be6..abc84f5 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -9,7 +9,7 @@ const Table = React.forwardRef<
   <div className="relative w-full overflow-auto">
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("w-full caption-bottom text-sm md:text-base", className)}
       {...props}
     />
   </div>
@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-3 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-10 md:h-12 px-3 md:px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
@@ -87,7 +87,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-3 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(
+      "p-2 md:p-3 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      className
+    )}
     {...props}
   />
 ))
@@ -99,7 +102,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn("mt-4 text-sm md:text-base text-muted-foreground", className)}
     {...props}
   />
 ))
diff --git a/src/routes/-components/columns.tsx b/src/routes/-components/columns.tsx
index da78930..4764ef9 100644
--- a/src/routes/-components/columns.tsx
+++ b/src/routes/-components/columns.tsx
@@ -1,4 +1,16 @@
 import { ColumnDef } from "@tanstack/react-table"
+import { Trash2 } from "lucide-react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 
 // This type is used to define the shape of our data.
 // You can use a Zod schema here if you want.
@@ -15,18 +27,69 @@ export type Result = {
 export const columns: ColumnDef<Result>[] = [
   {
     accessorKey: "unitCode",
-    header: "Unit Code",
+    header: () => <div>Unit Code</div>,
+    cell: ({ row }) => {
+      return (
+        <Select>
+          <SelectTrigger className="md:text-base">
+            <SelectValue placeholder={row.getValue("unitCode")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Unit Code</SelectLabel>
+              <SelectItem value="FIT1045">{row.getValue("unitCode")}</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      )
+    },
   },
   {
     accessorKey: "creditPoints",
-    header: "Credit Points",
+    header: () => <div>Credit <span className="hidden md:inline">Points</span></div>,
+    cell: ({ row }) => {
+      return <Input className="md:text-base" placeholder="Credit Points" type="number" value={row.getValue("creditPoints")} />
+    },
   },
   {
     accessorKey: "mark",
-    header: "Mark",
+    header: () => <div>Mark</div>,
+    cell: ({ row }) => {
+      return <Input className="md:text-base" placeholder="Mark" type="number" value={row.getValue("mark")} />
+    },
   },
   {
     accessorKey: "grade",
-    header: "Grade",
+    header: () => <div>Grade</div>,
+    cell: ({ row }) => {
+      return (
+        <Select>
+          <SelectTrigger className="md:text-base">
+            <SelectValue placeholder={row.getValue("grade")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Grade</SelectLabel>
+              <SelectItem value="HD">HD</SelectItem>
+              <SelectItem value="D">D</SelectItem>
+              <SelectItem value="C">C</SelectItem>
+              <SelectItem value="P">P</SelectItem>
+              <SelectItem value="N">N</SelectItem>
+              <SelectItem value="NH">NH</SelectItem>
+              <SelectItem value="NSR">NSR</SelectItem>
+              <SelectItem value="SFR">SFR</SelectItem>
+              <SelectItem value="WN">WN</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      )
+    },
+  },
+  {
+    accessorKey: "delete",
+    header: "",
+    cell: () => {
+      return <Button variant="destructive" className="h-8 px-2 md:h-10 md:px-4"><Trash2 /></Button>
+    },
   },
 ]
diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx
index a624133..3404604 100644
--- a/src/routes/index.lazy.tsx
+++ b/src/routes/index.lazy.tsx
@@ -135,8 +135,8 @@ function Index() {
   const data = getData()
 
   return (
-    <div className="p-2">
-      <div className="container mx-auto grid gap-6 grid-cols-2 mb-4">
+    <div className="md:p-2">
+      <div className="container mx-auto grid gap-4 md:gap-6 grid-cols-2 md:mb-4">
         <Card>
           <CardHeader>
             <CardTitle>WAM <span className="hidden md:inline text-xl text-muted-foreground">(Weighted Average Mark)</span></CardTitle>