Added the email input field

package.json

@@ -13,6 +13,7 @@
  },
  "dependencies": {
  "@radix-ui/react-alert-dialog": "^1.1.2",
+ "@radix-ui/react-label": "^2.1.0",
  "@radix-ui/react-slot": "^1.1.0",
  "@tanstack/react-query": "^5.53.3",
  "class-variance-authority": "^0.7.0",

src/components/applications/application.tsx

@@ -4,6 +4,8 @@ import Textarea from "@/components/global/inputs/textarea";
 import Select from "@/components/global/inputs/select";
 import Text from "@/components/global/inputs/text";
 import { Questions } from "@/types/questions";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
 interface props {
  title: string;
@@ -26,16 +28,10 @@ const Application = ({ title, questions }: props) => {
  }}
  />
 
- <Text
- meta={{
- type: "text",
- title: "Email",
- placeholder: "Enter an Email",
- maxLength: 250,
- value: "SAMPLE EMAIL",
- disabled: true,
- }}
- />
+ <div>
+ <Label htmlFor="email">Email</Label>
+ <Input type="email" id="email" placeholder="Email" />
+ </div>
 
  {questions.map((question, index) => {
  const { type } = question;

src/components/ui/input.tsx

@@ -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 file:text-foreground 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 };

src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+ "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
+
+const Label = React.forwardRef<
+ React.ElementRef<typeof LabelPrimitive.Root>,
+ React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+ VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+ <LabelPrimitive.Root
+ ref={ref}
+ className={cn(labelVariants(), className)}
+ {...props}
+ />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };