mehedi
/
skilld-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: preferences states, change password layout

This commit is contained in:
mehedi-hasan 2024-04-18 17:51:14 +06:00
parent ef59ce97cb
commit 98475437a9
4 changed files with 114 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,14 +3,14 @@ import { Separator } from "@/components/ui/separator";
export default function SettingsProfilePage() { export default function SettingsProfilePage() {
return ( 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> <h3 className="text-lg font-medium">Change Password</h3>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Change your password carefully. Change your password carefully.
</p> </p>
</div> </div>
<Separator /> <Separator /> */}
<ChangePasswordForm /> <ChangePasswordForm />
</div> </div>
); );

73
src/app/(dashboard)/dashboard/preferences/page.tsx
View File

@ -77,11 +77,22 @@ const dummyPreferences = [
]; ];
const Page = () => { 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 ( 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> <CardHeader>
<CardTitle className="mb-4 font-bold text-xl"> <CardTitle className="mb-4 font-bold text-xl">
Code Evaluation Criteria Code Evaluation Criteria
@ -90,37 +101,39 @@ const Page = () => {
</CardHeader> </CardHeader>
<CardContent> <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(
<div key={item.id} className="space-y-6"> (item: { id: number; name: string; description: string }) => (
<div className="flex items-center gap-2"> <div key={item.id} className="space-y-6">
<h4 className="capitalize font-semibold">{item.name}</h4> <div className="flex items-center gap-2">
<Tooltip> <h4 className="capitalize font-semibold">{item.name}</h4>
<TooltipTrigger> <Tooltip>
<CircleHelp className="size-4" /> <TooltipTrigger>
</TooltipTrigger> <CircleHelp className="size-4" />
<TooltipContent> </TooltipTrigger>
<p>{item.description}</p> <TooltipContent className="max-w-52">
</TooltipContent> <p>{item.description}</p>
</Tooltip> </TooltipContent>
</Tooltip>
</div>
<Slider
defaultValue={[50]}
// @ts-ignore
value={preference[item.name] as number[]}
onValueChange={(v) => {
setPreference((p) => ({ ...p, [item.name]: v }));
}}
min={0}
max={100}
step={1}
/>
</div> </div>
<Slider )
defaultValue={[50]} )}
value={value}
onValueChange={(v) => {
console.log(v);
setValue(v);
}}
min={0}
max={100}
step={1}
/>
</div>
))}
</div> </div>
</CardContent> </CardContent>
<CardFooter> <CardFooter>
<Button>Submit</Button> <Button className="w-full" size="lg">Submit</Button>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>

113
src/components/change-password-form.tsx
View File

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

4
src/components/ui/slider.tsx
View File

@ -12,12 +12,12 @@ const Slider = React.forwardRef<
<SliderPrimitive.Root <SliderPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
"relative flex w-full touch-none select-none items-center border", "relative flex w-full touch-none select-none items-center",
className className
)} )}
{...props} {...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.Range className="absolute h-full bg-primary" />
</SliderPrimitive.Track> </SliderPrimitive.Track>