feat: preferences ui

This commit is contained in:
mehedi-hasan 2024-04-18 16:12:21 +06:00
parent 3986406561
commit ef59ce97cb
5 changed files with 284 additions and 0 deletions

34
package-lock.json generated
View File

@ -20,6 +20,7 @@
"@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-scroll-area": "^1.0.5",
"@radix-ui/react-select": "^2.0.0", "@radix-ui/react-select": "^2.0.0",
"@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-separator": "^1.0.3",
"@radix-ui/react-slider": "^1.1.2",
"@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-toast": "^1.1.5", "@radix-ui/react-toast": "^1.1.5",
"@radix-ui/react-tooltip": "^1.0.7", "@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": { "node_modules/@radix-ui/react-slot": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",

View File

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

View File

@ -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 codes 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;

View File

@ -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 }

View File

@ -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 };