131 lines
3.2 KiB
TypeScript
131 lines
3.2 KiB
TypeScript
"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;
|