feat: preferences states, change password layout

src/app/(dashboard)/dashboard/change-password/page.tsx

@@ -3,14 +3,14 @@ import { Separator } from "@/components/ui/separator";
 
 export default function SettingsProfilePage() {
   return (
-    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 max-w-[800px]">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 h-full w-full flex justify-center items-center">
-      <div>
+      {/* <div>
         <h3 className="text-lg font-medium">Change Password</h3>
         <p className="text-sm text-muted-foreground">
           Change your password carefully.
         </p>
       </div>
-      <Separator />
+      <Separator /> */}
       <ChangePasswordForm />
     </div>
   );

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

@@ -77,11 +77,22 @@ const dummyPreferences = [
 ];
 
 const Page = () => {
-  const [value, setValue] = useState([50]);
+  const [preference, setPreference] = useState({
+    readability: [50],
+    refinement: [50],
+    modularity: [50],
+    optimization: [50],
+    portability: [50],
+    robustness: [50],
+    maintainability: [50],
+    conformity: [50],
+    security: [50],
+    functionality: [50],
+  });
 
   return (
-    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6">
+    <div className="flex-1 space-y-4  p-4 md:p-8 pt-6 w-full h-full flex justify-center items-center">
-      <Card className="max-w-[600px]">
+      <Card className="max-w-[600px] w-full">
         <CardHeader>
           <CardTitle className="mb-4 font-bold text-xl">
             Code Evaluation Criteria
@@ -90,8 +101,9 @@ const Page = () => {
         </CardHeader>
 
         <CardContent>
-          <div className="grid grid-cols-2 gap-y-8 gap-x-16">
+          <div className="grid grid-cols-2 gap-y-4 md:gap-y-8 gap-x-8 md:gap-x-16">
-            {dummyPreferences.map((item) => (
+            {dummyPreferences.map(
+              (item: { id: number; name: string; description: string }) => (
                 <div key={item.id} className="space-y-6">
                   <div className="flex items-center gap-2">
                     <h4 className="capitalize font-semibold">{item.name}</h4>
@@ -99,28 +111,29 @@ const Page = () => {
                       <TooltipTrigger>
                         <CircleHelp className="size-4" />
                       </TooltipTrigger>
-                    <TooltipContent>
+                      <TooltipContent className="max-w-52">
                         <p>{item.description}</p>
                       </TooltipContent>
                     </Tooltip>
                   </div>
                   <Slider
                     defaultValue={[50]}
-                  value={value}
+                    // @ts-ignore
+                    value={preference[item.name] as number[]}
                     onValueChange={(v) => {
-                    console.log(v);
+                      setPreference((p) => ({ ...p, [item.name]: v }));
-                    setValue(v);
                     }}
                     min={0}
                     max={100}
                     step={1}
                   />
                 </div>
-            ))}
+              )
+            )}
           </div>
         </CardContent>
         <CardFooter>
-          <Button>Submit</Button>
+          <Button className="w-full" size="lg">Submit</Button>
         </CardFooter>
       </Card>
     </div>

src/components/change-password-form.tsx

@@ -15,6 +15,8 @@ import {
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/use-toast";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Separator } from "./ui/separator";
 
 const profileFormSchema = z.object({
   currentPassword: z.string().trim().min(6, {
@@ -66,6 +68,15 @@ export default function ChangePasswordForm() {
   }
 
   return (
+    <Card className="max-w-[600px] w-full">
+      <CardHeader>
+        <CardTitle className="mb-4 font-bold text-xl">
+          Change Password
+        </CardTitle>
+        <Separator />
+      </CardHeader>
+
+      <CardContent>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
             <FormField
@@ -91,7 +102,10 @@ export default function ChangePasswordForm() {
                 <FormItem>
                   <FormLabel>New Password</FormLabel>
                   <FormControl>
-                <Input placeholder="Enter your new password..." {...field} />
+                    <Input
+                      placeholder="Enter your new password..."
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -104,14 +118,19 @@ export default function ChangePasswordForm() {
                 <FormItem>
                   <FormLabel>Confirm New Password</FormLabel>
                   <FormControl>
-                <Input placeholder="Confirm the new password..." {...field} />
+                    <Input
+                      placeholder="Confirm the new password..."
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
               )}
             />
-        <Button type="submit">Reset Password</Button>
+            <Button type="submit" className="w-full" size="lg">Reset Password</Button>
           </form>
         </Form>
+      </CardContent>
+    </Card>
   );
 }

src/components/ui/slider.tsx

@@ -12,12 +12,12 @@ const Slider = React.forwardRef<
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex w-full touch-none select-none items-center border",
+      "relative flex w-full touch-none select-none items-center",
       className
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-primary/20">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>