add responsive inputs to UI

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",

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}

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 }

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>
 ))

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(
+      "px-1 py-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}
   />
 ))

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="ghost" className="h-8 px-2 md:h-10 md:px-4"><Trash2 className="text-destructive" /></Button>
+    },
   },
 ]

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>