feat: preferences ui

package-lock.json

@@ -20,6 +20,7 @@
         "@radix-ui/react-scroll-area": "^1.0.5",
         "@radix-ui/react-select": "^2.0.0",
         "@radix-ui/react-separator": "^1.0.3",
+        "@radix-ui/react-slider": "^1.1.2",
         "@radix-ui/react-slot": "^1.0.2",
         "@radix-ui/react-toast": "^1.1.5",
         "@radix-ui/react-tooltip": "^1.0.7",
@@ -1180,6 +1181,39 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.1.2.tgz",
+      "integrity": "sha512-NKs15MJylfzVsCagVSWKhGGLNR1W9qWs+HtgbmjjVUB3B9+lb3PYoXxVju3kOrpf0VKyVCtZp+iTwVoqpa1Chw==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/number": "1.0.1",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1",
+        "@radix-ui/react-use-previous": "1.0.1",
+        "@radix-ui/react-use-size": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",

package.json

@@ -21,6 +21,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slider": "^1.1.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",

src/app/(dashboard)/dashboard/preferences/page.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { Slider } from "@/components/ui/slider";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { CircleHelp } from "lucide-react";
+import React, { useState } from "react";
+
+const dummyPreferences = [
+  {
+    id: 1,
+    name: "readability",
+    description: "assesses the clarity and understandability of the code",
+  },
+  {
+    id: 2,
+    name: "refinement",
+    description: "assesses the process and stages of code development",
+  },
+  {
+    id: 3,
+    name: "modularity",
+    description:
+      "assesses how well the code is compartmentalized into separate parts",
+  },
+  {
+    id: 4,
+    name: "optimization",
+    description: "assesses the code’s efficiency and resource management",
+  },
+  {
+    id: 5,
+    name: "portability",
+    description:
+      "assesses the ability of the code to run in different environments",
+  },
+  {
+    id: 6,
+    name: "robustness",
+    description:
+      "assesses how the code handles unexpected situations or inputs",
+  },
+  {
+    id: 7,
+    name: "maintainability",
+    description: "assesses how easy it is to maintain and extend the code",
+  },
+  {
+    id: 8,
+    name: "conformity",
+    description: "assesses adherence to predefined standards or best practices",
+  },
+  {
+    id: 9,
+    name: "security",
+    description:
+      "assesses how the code protects data and resists malicious attacks",
+  },
+  {
+    id: 10,
+    name: "functionality",
+    description:
+      "assesses how well the code achieves its intended functionality",
+  },
+];
+
+const Page = () => {
+  const [value, setValue] = useState([50]);
+
+  return (
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+      <Card className="max-w-[600px]">
+        <CardHeader>
+          <CardTitle className="mb-4 font-bold text-xl">
+            Code Evaluation Criteria
+          </CardTitle>
+          <Separator />
+        </CardHeader>
+
+        <CardContent>
+          <div className="grid grid-cols-2 gap-y-8 gap-x-16">
+            {dummyPreferences.map((item) => (
+              <div key={item.id} className="space-y-6">
+                <div className="flex items-center gap-2">
+                  <h4 className="capitalize font-semibold">{item.name}</h4>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <CircleHelp className="size-4" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{item.description}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <Slider
+                  defaultValue={[50]}
+                  value={value}
+                  onValueChange={(v) => {
+                    console.log(v);
+                    setValue(v);
+                  }}
+                  min={0}
+                  max={100}
+                  step={1}
+                />
+              </div>
+            ))}
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button>Submit</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+};
+
+export default Page;

src/components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/slider.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center border",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+
+    <div
+      className="absolute text-center -translate-x-1/2 bottom-3"
+      style={{
+        left: `calc(${Math.floor(
+          // @ts-ignore
+          ((props.value[0] - props.min) / (props.max - props.min)) * 100
+        )}% + 0px)`,
+      }}
+    >
+      <span className="text-xs">
+        {/* {formatLabel ? formatLabel(value) : value} */}
+        {props.value}
+      </span>
+    </div>
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"></SliderPrimitive.Thumb>
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };