This repository has been archived by the owner on Aug 24, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #11 from founder-srm/Dev_Anay
Dev anay- contact us page
- Loading branch information
Showing
7 changed files
with
724 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,10 +1,189 @@ | ||
import Link from "next/link"; | ||
"use client" | ||
|
||
import { ThemeProvider } from "@/components/ui/themeprovider" | ||
import { zodResolver } from "@hookform/resolvers/zod" | ||
import { useForm } from "react-hook-form" | ||
import { z } from "zod" | ||
|
||
import { Button } from "@/components/ui/button" | ||
import { | ||
Form, | ||
FormControl, | ||
FormField, | ||
FormItem, | ||
FormLabel, | ||
FormMessage | ||
} from "@/components/ui/form" | ||
import { Input } from "@/components/ui/input" | ||
|
||
const formSchema = z.object({ | ||
name: z.string().min(2, { | ||
message: "Username must be at least 2 characters.", | ||
|
||
}), | ||
phonenumber:z.string().min(9 ,{ | ||
message:"Phone number must be at least 9 digits.", | ||
}).max(11,{ | ||
message:"Phone number must be at most 11 digits.", | ||
}), | ||
email:z.string().min(2, { | ||
message: "please enter a valid email address.", | ||
|
||
}).email({ | ||
message:"please enter a valid email address.", | ||
}), | ||
subject: z.string().min(1, { | ||
message: "please mention the idea", | ||
|
||
}).max(30, { | ||
message: "Please enter a subject less than 30 characters.", | ||
}), | ||
description: z.string().max(100, { | ||
message: "Please enter a description less than 100 characters.", | ||
|
||
}).min(1, { | ||
message: "please enter the description of your idea.", | ||
}) | ||
|
||
}) | ||
|
||
export default function Page() { | ||
return ( | ||
<div> | ||
<h1>Page</h1> | ||
<Link href="/">Home</Link> | ||
const form = useForm<z.infer<typeof formSchema>>({ | ||
resolver: zodResolver(formSchema), | ||
defaultValues: { | ||
name: "", | ||
phonenumber: "", | ||
email:"", | ||
subject:"", | ||
description:"" | ||
}, | ||
}) | ||
|
||
// 2. Define a submit handler. | ||
function onSubmit(values: z.infer<typeof formSchema>) { | ||
// Do something with the form values. | ||
|
||
console.log(values) | ||
} | ||
// ... | ||
|
||
return ( | ||
|
||
|
||
<ThemeProvider | ||
attribute="class" | ||
defaultTheme="dark" | ||
enableSystem | ||
disableTransitionOnChange | ||
> | ||
<div > | ||
|
||
|
||
|
||
|
||
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8"> | ||
<div className="sm:mx-auto sm:w-full sm:max-w-sm"> | ||
|
||
<h2 className="mt-10 text-center text-2xl font-bold leading-9 trackng-tight text-white"> | ||
Get in touch | ||
</h2> | ||
<h4 className= " w-max ">We’d love to hear from you! Please fill out the form below.</h4> | ||
</div> | ||
); | ||
|
||
|
||
<div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm"> | ||
<Form {...form}> | ||
<form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-8 justify-center "> | ||
<FormField | ||
control={form.control} | ||
name="name" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel className="mt-10 text-center text-l font-bold leading-9 tracking-tight text-white" > | ||
Name </FormLabel> | ||
<FormControl> | ||
<Input placeholder="Enter your name" {...field} className="mx-auto w-96" /> | ||
</FormControl> | ||
|
||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
/> | ||
|
||
|
||
<FormField | ||
control={form.control} | ||
name="email" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel className="mt-10 text-center text-l font-bold leading-9 tracking-tight text-white" > | ||
Email </FormLabel> | ||
<FormControl> | ||
<Input placeholder="Please enter your Email Address" {...field} className="mx-auto w-96 "/> | ||
</FormControl> | ||
|
||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
|
||
/> | ||
<FormField | ||
control={form.control} | ||
name="phonenumber" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel className="mt-10 text-center text-l font-bold leading-9 tracking-tight text-white" > | ||
Phone Number </FormLabel> | ||
<FormControl> | ||
<Input placeholder="Please enter your phone number" {...field} className="mx-auto w-96"/> | ||
</FormControl> | ||
|
||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
|
||
/> | ||
|
||
|
||
<FormField | ||
control={form.control} | ||
name="subject" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel className="mt-10 text-center text-l font-bold leading-9 tracking-tiht text-white" > | ||
Your Idea </FormLabel> | ||
<FormControl> | ||
<Input placeholder="share your idea" {...field} className="mx-auto w-96"/> | ||
</FormControl> | ||
|
||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
|
||
/> | ||
|
||
<FormField | ||
control={form.control} | ||
name="description" | ||
render={({ field }) => ( | ||
<FormItem> | ||
<FormLabel className="mt-10 text-center text-l fot-bold leading-9 tracking-tight text-white" > | ||
Description </FormLabel> | ||
<FormControl> | ||
<Input placeholder="describe your idea in 100 words" {...field} className="mx-auto w-96 h-32 min-w-96 text-balance overflow-auto text-clip whitespace-nowrap "/> | ||
</FormControl> | ||
|
||
<FormMessage /> | ||
</FormItem> | ||
)} | ||
/> | ||
<Button type="submit">Submit</Button> | ||
</form> | ||
</Form> | ||
</div> | ||
</div> | ||
</div> | ||
</ThemeProvider> | ||
) | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,176 @@ | ||
import * as React from "react" | ||
import * as LabelPrimitive from "@radix-ui/react-label" | ||
import { Slot } from "@radix-ui/react-slot" | ||
import { | ||
Controller, | ||
ControllerProps, | ||
FieldPath, | ||
FieldValues, | ||
FormProvider, | ||
useFormContext, | ||
} from "react-hook-form" | ||
|
||
import { cn } from "@/lib/utils" | ||
import { Label } from "@/components/ui/label" | ||
|
||
const Form = FormProvider | ||
|
||
type FormFieldContextValue< | ||
TFieldValues extends FieldValues = FieldValues, | ||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues> | ||
> = { | ||
name: TName | ||
} | ||
|
||
const FormFieldContext = React.createContext<FormFieldContextValue>( | ||
{} as FormFieldContextValue | ||
) | ||
|
||
const FormField = < | ||
TFieldValues extends FieldValues = FieldValues, | ||
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues> | ||
>({ | ||
...props | ||
}: ControllerProps<TFieldValues, TName>) => { | ||
return ( | ||
<FormFieldContext.Provider value={{ name: props.name }}> | ||
<Controller {...props} /> | ||
</FormFieldContext.Provider> | ||
) | ||
} | ||
|
||
const useFormField = () => { | ||
const fieldContext = React.useContext(FormFieldContext) | ||
const itemContext = React.useContext(FormItemContext) | ||
const { getFieldState, formState } = useFormContext() | ||
|
||
const fieldState = getFieldState(fieldContext.name, formState) | ||
|
||
if (!fieldContext) { | ||
throw new Error("useFormField should be used within <FormField>") | ||
} | ||
|
||
const { id } = itemContext | ||
|
||
return { | ||
id, | ||
name: fieldContext.name, | ||
formItemId: `${id}-form-item`, | ||
formDescriptionId: `${id}-form-item-description`, | ||
formMessageId: `${id}-form-item-message`, | ||
...fieldState, | ||
} | ||
} | ||
|
||
type FormItemContextValue = { | ||
id: string | ||
} | ||
|
||
const FormItemContext = React.createContext<FormItemContextValue>( | ||
{} as FormItemContextValue | ||
) | ||
|
||
const FormItem = React.forwardRef< | ||
HTMLDivElement, | ||
React.HTMLAttributes<HTMLDivElement> | ||
>(({ className, ...props }, ref) => { | ||
const id = React.useId() | ||
|
||
return ( | ||
<FormItemContext.Provider value={{ id }}> | ||
<div ref={ref} className={cn("space-y-2", className)} {...props} /> | ||
</FormItemContext.Provider> | ||
) | ||
}) | ||
FormItem.displayName = "FormItem" | ||
|
||
const FormLabel = React.forwardRef< | ||
React.ElementRef<typeof LabelPrimitive.Root>, | ||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> | ||
>(({ className, ...props }, ref) => { | ||
const { error, formItemId } = useFormField() | ||
|
||
return ( | ||
<Label | ||
ref={ref} | ||
className={cn(error && "text-destructive", className)} | ||
htmlFor={formItemId} | ||
{...props} | ||
/> | ||
) | ||
}) | ||
FormLabel.displayName = "FormLabel" | ||
|
||
const FormControl = React.forwardRef< | ||
React.ElementRef<typeof Slot>, | ||
React.ComponentPropsWithoutRef<typeof Slot> | ||
>(({ ...props }, ref) => { | ||
const { error, formItemId, formDescriptionId, formMessageId } = useFormField() | ||
|
||
return ( | ||
<Slot | ||
ref={ref} | ||
id={formItemId} | ||
aria-describedby={ | ||
!error | ||
? `${formDescriptionId}` | ||
: `${formDescriptionId} ${formMessageId}` | ||
} | ||
aria-invalid={!!error} | ||
{...props} | ||
/> | ||
) | ||
}) | ||
FormControl.displayName = "FormControl" | ||
|
||
const FormDescription = React.forwardRef< | ||
HTMLParagraphElement, | ||
React.HTMLAttributes<HTMLParagraphElement> | ||
>(({ className, ...props }, ref) => { | ||
const { formDescriptionId } = useFormField() | ||
|
||
return ( | ||
<p | ||
ref={ref} | ||
id={formDescriptionId} | ||
className={cn("text-sm text-muted-foreground", className)} | ||
{...props} | ||
/> | ||
) | ||
}) | ||
FormDescription.displayName = "FormDescription" | ||
|
||
const FormMessage = React.forwardRef< | ||
HTMLParagraphElement, | ||
React.HTMLAttributes<HTMLParagraphElement> | ||
>(({ className, children, ...props }, ref) => { | ||
const { error, formMessageId } = useFormField() | ||
const body = error ? String(error?.message) : children | ||
|
||
if (!body) { | ||
return null | ||
} | ||
|
||
return ( | ||
<p | ||
ref={ref} | ||
id={formMessageId} | ||
className={cn("text-sm font-medium text-destructive", className)} | ||
{...props} | ||
> | ||
{body} | ||
</p> | ||
) | ||
}) | ||
FormMessage.displayName = "FormMessage" | ||
|
||
export { | ||
useFormField, | ||
Form, | ||
FormItem, | ||
FormLabel, | ||
FormControl, | ||
FormDescription, | ||
FormMessage, | ||
FormField, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import * as React from "react" | ||
|
||
import { cn } from "@/lib/utils" | ||
|
||
export interface InputProps | ||
extends React.InputHTMLAttributes<HTMLInputElement> {} | ||
|
||
const Input = React.forwardRef<HTMLInputElement, InputProps>( | ||
({ className, type, ...props }, ref) => { | ||
return ( | ||
<input | ||
type={type} | ||
className={cn( | ||
"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", | ||
className | ||
)} | ||
ref={ref} | ||
{...props} | ||
/> | ||
) | ||
} | ||
) | ||
Input.displayName = "Input" | ||
|
||
export { Input } |
Oops, something went wrong.