feat: user form
This commit is contained in:
mehedi-hasan
parent
e7f6912cca
commit
00d85806fe
|
|
@ -0,0 +1,86 @@
|
||||||
|
import { Metadata } from "next";
|
||||||
|
import Link from "next/link";
|
||||||
|
import UserAuthForm from "@/components/forms/user-auth-form";
|
||||||
|
import { buttonVariants } from "@/components/ui/button";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Sign In",
|
||||||
|
description: "Sign In to start your journey with skilled ai.",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function AuthenticationPage() {
|
||||||
|
return (
|
||||||
|
<div className="relative h-screen flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||||
|
<Link
|
||||||
|
href="/examples/authentication"
|
||||||
|
className={cn(
|
||||||
|
buttonVariants({ variant: "ghost" }),
|
||||||
|
"absolute right-4 hidden top-4 md:right-8 md:top-8",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</Link>
|
||||||
|
<div className="relative hidden h-full flex-col bg-secondary p-10 dark:border-r lg:flex">
|
||||||
|
<div className="absolute inset-0 bg-secondary" />
|
||||||
|
<div className="relative z-20 flex items-center text-lg font-medium">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="mr-2 h-6 w-6"
|
||||||
|
>
|
||||||
|
<path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
|
||||||
|
</svg>
|
||||||
|
SkilledAi
|
||||||
|
</div>
|
||||||
|
<div className="relative z-20 mt-auto">
|
||||||
|
<blockquote className="space-y-2">
|
||||||
|
<p className="text-lg text-muted-foreground">
|
||||||
|
“Empower your coding journey at SkilledAi. Access tutorials,
|
||||||
|
challenges, and expert-led courses to master programming languages
|
||||||
|
and tools. Join a supportive community for discussions and code
|
||||||
|
reviews. Elevate your skills and stay ahead in the tech world with
|
||||||
|
us!.”
|
||||||
|
</p>
|
||||||
|
{/* <footer className="text-sm">Ak</footer> */}
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="p-4 lg:p-8 h-full flex items-center">
|
||||||
|
<div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||||
|
<div className="flex flex-col space-y-2 text-center">
|
||||||
|
<h1 className="text-2xl font-semibold tracking-tight">
|
||||||
|
Create an account
|
||||||
|
</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Enter your email below to create your account
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<UserAuthForm />
|
||||||
|
<p className="px-8 text-center text-sm text-muted-foreground">
|
||||||
|
By clicking continue, you agree to our{" "}
|
||||||
|
<Link
|
||||||
|
href="/terms"
|
||||||
|
className="underline underline-offset-4 hover:text-primary"
|
||||||
|
>
|
||||||
|
Terms of Service
|
||||||
|
</Link>{" "}
|
||||||
|
and{" "}
|
||||||
|
<Link
|
||||||
|
href="/privacy"
|
||||||
|
className="underline underline-offset-4 hover:text-primary"
|
||||||
|
>
|
||||||
|
Privacy Policy
|
||||||
|
</Link>
|
||||||
|
.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
import Providers from "@/components/layout/providers";
|
||||||
|
import { Toaster } from "@/components/ui/toaster";
|
||||||
|
import "@uploadthing/react/styles.css";
|
||||||
|
import type { Metadata } from "next";
|
||||||
|
import { Inter } from "next/font/google";
|
||||||
|
import "./globals.css";
|
||||||
|
|
||||||
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "Home | Skilled Ai",
|
||||||
|
description:
|
||||||
|
"Empower your coding journey at Skilled Ai. Access tutorials, challenges, and expert-led courses to master programming languages and tools. Join a supportive community for discussions and code reviews. Elevate your skills and stay ahead in the tech world with us!",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default async function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<html lang="en" suppressHydrationWarning>
|
||||||
|
<body className={`${inter.className} overflow-hidden`}>
|
||||||
|
<Providers>
|
||||||
|
<Toaster />
|
||||||
|
{children}
|
||||||
|
</Providers>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const Loading = () => {
|
||||||
|
return (
|
||||||
|
<div></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Loading
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mb-16 items-center justify-center text-center">
|
||||||
|
<span className="bg-gradient-to-b from-foreground to-transparent bg-clip-text text-[10rem] font-extrabold leading-none text-transparent">
|
||||||
|
404
|
||||||
|
</span>
|
||||||
|
<h2 className="my-2 font-heading text-2xl font-bold">
|
||||||
|
Something's missing
|
||||||
|
</h2>
|
||||||
|
<p>
|
||||||
|
Sorry, the page you are looking for doesn't exist or has been
|
||||||
|
moved.
|
||||||
|
</p>
|
||||||
|
<div className="mt-8 flex justify-center gap-2">
|
||||||
|
<Button onClick={() => router.back()} variant="default" size="lg">
|
||||||
|
Go back
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => router.push("/dashboard")}
|
||||||
|
variant="ghost"
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
Back to Home
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
"use client";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import * as z from "zod";
|
||||||
|
import GoogleSignInButton from "../google-auth-button";
|
||||||
|
import { createClient } from "@/utils/supabase/client";
|
||||||
|
|
||||||
|
const formSchema = z.object({
|
||||||
|
email: z.string().email({ message: "Enter a valid email address" }),
|
||||||
|
password: z
|
||||||
|
.string()
|
||||||
|
.min(6, { message: "Password should be minimum 6 characters" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
type UserFormValue = z.infer<typeof formSchema>;
|
||||||
|
|
||||||
|
export default function UserAuthForm() {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
const callbackUrl = searchParams.get("callbackUrl");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
// const defaultValues = {
|
||||||
|
// email: "demo@gmail.com",
|
||||||
|
// };
|
||||||
|
const form = useForm<UserFormValue>({
|
||||||
|
resolver: zodResolver(formSchema),
|
||||||
|
// defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async ({ email, password }: UserFormValue) => {
|
||||||
|
console.log(email, password);
|
||||||
|
const supabase = createClient();
|
||||||
|
const { data, error } = await supabase.auth.signUp({
|
||||||
|
email,
|
||||||
|
password,
|
||||||
|
options: {
|
||||||
|
emailRedirectTo: `${process.env.NEXT_PUBLIC_SITE_URL}/auth/callback`,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
console.log(data);
|
||||||
|
console.log(error);
|
||||||
|
// signIn("credentials", {
|
||||||
|
// email: data.email,
|
||||||
|
// callbackUrl: callbackUrl ?? "/dashboard",
|
||||||
|
// });
|
||||||
|
|
||||||
|
if (!error) {
|
||||||
|
router.push("/dashboard");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
onSubmit={form.handleSubmit(onSubmit)}
|
||||||
|
className="space-y-2 w-full"
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
placeholder="Enter your email..."
|
||||||
|
disabled={loading}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="password"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="password"
|
||||||
|
placeholder="Enter your password..."
|
||||||
|
disabled={loading}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button disabled={loading} className="ml-auto w-full" type="submit">
|
||||||
|
Continue With Email
|
||||||
|
</Button>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 flex items-center">
|
||||||
|
<span className="w-full border-t" />
|
||||||
|
</div>
|
||||||
|
<div className="relative flex justify-center text-xs uppercase">
|
||||||
|
<span className="bg-background px-2 text-muted-foreground">
|
||||||
|
Or continue with
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<GoogleSignInButton />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,653 @@
|
||||||
|
"use client";
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "@/components/ui/accordion";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { Heading } from "@/components/ui/heading";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Separator } from "@/components/ui/separator";
|
||||||
|
import { profileSchema, type ProfileFormValues } from "@/lib/form-schema";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { AlertTriangleIcon, Trash, Trash2Icon } from "lucide-react";
|
||||||
|
import { useParams, useRouter } from "next/navigation";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { SubmitHandler, useFieldArray, useForm } from "react-hook-form";
|
||||||
|
|
||||||
|
interface ProfileFormType {
|
||||||
|
initialData: any | null;
|
||||||
|
categories: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CreateProfileOne: React.FC<ProfileFormType> = ({
|
||||||
|
initialData,
|
||||||
|
categories,
|
||||||
|
}) => {
|
||||||
|
const params = useParams();
|
||||||
|
const router = useRouter();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [imgLoading, setImgLoading] = useState(false);
|
||||||
|
const title = initialData ? "Edit account" : "Create Your Profile";
|
||||||
|
const description = initialData
|
||||||
|
? "Edit a account."
|
||||||
|
: "To create your account, we first need some basic information about you.";
|
||||||
|
const toastMessage = initialData ? "Account updated." : "Account created.";
|
||||||
|
const action = initialData ? "Save changes" : "Create";
|
||||||
|
const [previousStep, setPreviousStep] = useState(0);
|
||||||
|
const [currentStep, setCurrentStep] = useState(0);
|
||||||
|
const [data, setData] = useState({});
|
||||||
|
const delta = currentStep - previousStep;
|
||||||
|
|
||||||
|
const defaultValues = {
|
||||||
|
jobs: [
|
||||||
|
{
|
||||||
|
jobtitle: "",
|
||||||
|
employer: "",
|
||||||
|
startdate: "",
|
||||||
|
enddate: "",
|
||||||
|
jobcountry: "",
|
||||||
|
jobcity: "",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const form = useForm<ProfileFormValues>({
|
||||||
|
resolver: zodResolver(profileSchema),
|
||||||
|
defaultValues,
|
||||||
|
mode: "onChange",
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
formState: { errors },
|
||||||
|
} = form;
|
||||||
|
|
||||||
|
const { append, remove, fields } = useFieldArray({
|
||||||
|
control,
|
||||||
|
name: "jobs",
|
||||||
|
});
|
||||||
|
|
||||||
|
const onSubmit = async (data: ProfileFormValues) => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
if (initialData) {
|
||||||
|
// await axios.post(`/api/products/edit-product/${initialData._id}`, data);
|
||||||
|
} else {
|
||||||
|
// const res = await axios.post(`/api/products/create-product`, data);
|
||||||
|
// console.log("product", res);
|
||||||
|
}
|
||||||
|
router.refresh();
|
||||||
|
router.push(`/dashboard/products`);
|
||||||
|
} catch (error: any) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDelete = async () => {
|
||||||
|
try {
|
||||||
|
setLoading(true);
|
||||||
|
// await axios.delete(`/api/${params.storeId}/products/${params.productId}`);
|
||||||
|
router.refresh();
|
||||||
|
router.push(`/${params.storeId}/products`);
|
||||||
|
} catch (error: any) {
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const processForm: SubmitHandler<ProfileFormValues> = (data) => {
|
||||||
|
console.log("data ==>", data);
|
||||||
|
setData(data);
|
||||||
|
// api call and reset
|
||||||
|
// form.reset();
|
||||||
|
};
|
||||||
|
|
||||||
|
type FieldName = keyof ProfileFormValues;
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
id: "Step 1",
|
||||||
|
name: "Personal Information",
|
||||||
|
fields: [
|
||||||
|
"firstname",
|
||||||
|
"lastname",
|
||||||
|
"email",
|
||||||
|
"contactno",
|
||||||
|
"country",
|
||||||
|
"city",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "Step 2",
|
||||||
|
name: "Professional Informations",
|
||||||
|
// fields are mapping and flattening for the error to be trigger for the dynamic fields
|
||||||
|
fields: fields
|
||||||
|
?.map((_, index) => [
|
||||||
|
`jobs.${index}.jobtitle`,
|
||||||
|
`jobs.${index}.employer`,
|
||||||
|
`jobs.${index}.startdate`,
|
||||||
|
`jobs.${index}.enddate`,
|
||||||
|
`jobs.${index}.jobcountry`,
|
||||||
|
`jobs.${index}.jobcity`,
|
||||||
|
// Add other field names as needed
|
||||||
|
])
|
||||||
|
.flat(),
|
||||||
|
},
|
||||||
|
{ id: "Step 3", name: "Complete" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const next = async () => {
|
||||||
|
const fields = steps[currentStep].fields;
|
||||||
|
|
||||||
|
const output = await form.trigger(fields as FieldName[], {
|
||||||
|
shouldFocus: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!output) return;
|
||||||
|
|
||||||
|
if (currentStep < steps.length - 1) {
|
||||||
|
if (currentStep === steps.length - 2) {
|
||||||
|
await form.handleSubmit(processForm)();
|
||||||
|
}
|
||||||
|
setPreviousStep(currentStep);
|
||||||
|
setCurrentStep((step) => step + 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const prev = () => {
|
||||||
|
if (currentStep > 0) {
|
||||||
|
setPreviousStep(currentStep);
|
||||||
|
setCurrentStep((step) => step - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const countries = [{ id: "wow", name: "india" }];
|
||||||
|
const cities = [{ id: "2", name: "kerala" }];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Heading title={title} description={description} />
|
||||||
|
{initialData && (
|
||||||
|
<Button
|
||||||
|
disabled={loading}
|
||||||
|
variant="destructive"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
>
|
||||||
|
<Trash className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<div>
|
||||||
|
<ul className="flex gap-4">
|
||||||
|
{steps.map((step, index) => (
|
||||||
|
<li key={step.name} className="md:flex-1">
|
||||||
|
{currentStep > index ? (
|
||||||
|
<div className="group flex w-full flex-col border-l-4 border-sky-600 py-2 pl-4 transition-colors md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-4">
|
||||||
|
<span className="text-sm font-medium text-sky-600 transition-colors ">
|
||||||
|
{step.id}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-medium">{step.name}</span>
|
||||||
|
</div>
|
||||||
|
) : currentStep === index ? (
|
||||||
|
<div
|
||||||
|
className="flex w-full flex-col border-l-4 border-sky-600 py-2 pl-4 md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-4"
|
||||||
|
aria-current="step"
|
||||||
|
>
|
||||||
|
<span className="text-sm font-medium text-sky-600">
|
||||||
|
{step.id}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-medium">{step.name}</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="group flex h-full w-full flex-col border-l-4 border-gray-200 py-2 pl-4 transition-colors md:border-l-0 md:border-t-4 md:pb-0 md:pl-0 md:pt-4">
|
||||||
|
<span className="text-sm font-medium text-gray-500 transition-colors">
|
||||||
|
{step.id}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm font-medium">{step.name}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<Separator />
|
||||||
|
<Form {...form}>
|
||||||
|
<form
|
||||||
|
onSubmit={form.handleSubmit(processForm)}
|
||||||
|
className="space-y-8 w-full"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
currentStep === 1
|
||||||
|
? "md:inline-block w-full"
|
||||||
|
: "md:grid md:grid-cols-3 gap-8",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{currentStep === 0 && (
|
||||||
|
<>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="firstname"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>First Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
disabled={loading}
|
||||||
|
placeholder="John"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="lastname"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Last Name</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
disabled={loading}
|
||||||
|
placeholder="Doe"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
disabled={loading}
|
||||||
|
placeholder="johndoe@gmail.com"
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="contactno"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Contact Number</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
placeholder="Enter you contact number"
|
||||||
|
disabled={loading}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="country"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Country</FormLabel>
|
||||||
|
<Select
|
||||||
|
disabled={loading}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue
|
||||||
|
defaultValue={field.value}
|
||||||
|
placeholder="Select a country"
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{/* @ts-ignore */}
|
||||||
|
{countries.map((country) => (
|
||||||
|
<SelectItem key={country.id} value={country.id}>
|
||||||
|
{country.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="city"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>City</FormLabel>
|
||||||
|
<Select
|
||||||
|
disabled={loading}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue
|
||||||
|
defaultValue={field.value}
|
||||||
|
placeholder="Select a city"
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{/* @ts-ignore */}
|
||||||
|
{cities.map((city) => (
|
||||||
|
<SelectItem key={city.id} value={city.id}>
|
||||||
|
{city.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{currentStep === 1 && (
|
||||||
|
<>
|
||||||
|
{fields?.map((field, index) => (
|
||||||
|
<Accordion
|
||||||
|
type="single"
|
||||||
|
collapsible
|
||||||
|
defaultValue="item-1"
|
||||||
|
key={field.id}
|
||||||
|
>
|
||||||
|
<AccordionItem value="item-1">
|
||||||
|
<AccordionTrigger
|
||||||
|
className={cn(
|
||||||
|
"[&[data-state=closed]>button]:hidden [&[data-state=open]>.alert]:hidden relative !no-underline",
|
||||||
|
errors?.jobs?.[index] && "text-red-700",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{`Work Experience ${index + 1}`}
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-8"
|
||||||
|
onClick={() => remove(index)}
|
||||||
|
>
|
||||||
|
<Trash2Icon className="h-4 w-4 " />
|
||||||
|
</Button>
|
||||||
|
{errors?.jobs?.[index] && (
|
||||||
|
<span className="absolute alert right-8">
|
||||||
|
<AlertTriangleIcon className="h-4 w-4 text-red-700" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"md:grid md:grid-cols-3 gap-8 border p-4 rounded-md relative mb-4",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`jobs.${index}.jobtitle`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Job title</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
disabled={loading}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`jobs.${index}.employer`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Employer</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
disabled={loading}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`jobs.${index}.startdate`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Start date</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
disabled={loading}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`jobs.${index}.enddate`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>End date</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input
|
||||||
|
type="date"
|
||||||
|
disabled={loading}
|
||||||
|
{...field}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`jobs.${index}.jobcountry`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Job country</FormLabel>
|
||||||
|
<Select
|
||||||
|
disabled={loading}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue
|
||||||
|
defaultValue={field.value}
|
||||||
|
placeholder="Select your job country"
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{countries.map((country) => (
|
||||||
|
<SelectItem
|
||||||
|
key={country.id}
|
||||||
|
value={country.id}
|
||||||
|
>
|
||||||
|
{country.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name={`jobs.${index}.jobcity`}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Job city</FormLabel>
|
||||||
|
<Select
|
||||||
|
disabled={loading}
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
value={field.value}
|
||||||
|
defaultValue={field.value}
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue
|
||||||
|
defaultValue={field.value}
|
||||||
|
placeholder="Select your job city"
|
||||||
|
/>
|
||||||
|
</SelectTrigger>
|
||||||
|
</FormControl>
|
||||||
|
<SelectContent>
|
||||||
|
{cities.map((city) => (
|
||||||
|
<SelectItem key={city.id} value={city.id}>
|
||||||
|
{city.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div className="flex justify-center mt-4">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
className="flex justify-center"
|
||||||
|
size={"lg"}
|
||||||
|
onClick={() =>
|
||||||
|
append({
|
||||||
|
jobtitle: "",
|
||||||
|
employer: "",
|
||||||
|
startdate: "",
|
||||||
|
enddate: "",
|
||||||
|
jobcountry: "",
|
||||||
|
jobcity: "",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Add More
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{currentStep === 2 && (
|
||||||
|
<div>
|
||||||
|
<h1>Completed</h1>
|
||||||
|
<pre className="whitespace-pre-wrap">
|
||||||
|
{JSON.stringify(data)}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* <Button disabled={loading} className="ml-auto" type="submit">
|
||||||
|
{action}
|
||||||
|
</Button> */}
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
{/* Navigation */}
|
||||||
|
<div className="mt-8 pt-5">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={prev}
|
||||||
|
disabled={currentStep === 0}
|
||||||
|
className="rounded bg-white px-2 py-1 text-sm font-semibold text-sky-900 shadow-sm ring-1 ring-inset ring-sky-300 hover:bg-sky-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
className="h-6 w-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M15.75 19.5L8.25 12l7.5-7.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={next}
|
||||||
|
disabled={currentStep === steps.length - 1}
|
||||||
|
className="rounded bg-white px-2 py-1 text-sm font-semibold text-sky-900 shadow-sm ring-1 ring-inset ring-sky-300 hover:bg-sky-50 disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
strokeWidth="1.5"
|
||||||
|
stroke="currentColor"
|
||||||
|
className="h-6 w-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
d="M8.25 4.5l7.5 7.5-7.5 7.5"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue