import React from 'react'
import { Input } from '@/components/ui/input'

const SimpleInputcode = () => {
  return (
    <>
      <div className='flex flex-col gap-5 mt-4'>
        <Input type='text' placeholder='Name' />
        <Input type='text' placeholder='Company' />
        <Input type='email' placeholder='Email' />
        <Input type='password' placeholder='Password' />
      </div>
    </>
  )
}

export default SimpleInputcode

import React from 'react'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

const InputLabelCode = () => {
  return (
    <>
      <div className='flex flex-col gap-5 mt-4'>
        <div>
          <Label htmlFor='name'>Name</Label>
          <Input type='text' />
        </div>
        <div>
          <Label htmlFor='email'>Email</Label>
          <Input type='email' />
        </div>
        <div>
          <Label htmlFor='password'>Password</Label>
          <Input type='password' />
        </div>
      </div>
    </>
  )
}

export default InputLabelCode

import React from 'react'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
const InputWithButtonCode = () => {
  return (
    <>
      <div className='flex flex-col gap-5 mt-4'>
        <div>
          <Label htmlFor='name'>Name</Label>
          <Input type='text' />
        </div>
        <div>
          <Label htmlFor='email'>Email</Label>
          <Input type='email' />
        </div>
        <div>
          <Label htmlFor='password'>Password</Label>
          <Input type='password' />
        </div>
        <div className='flex gap-3'>
          <Button className='rounded-full'>Submit</Button>
          <Button className='rounded-full' variant={'error'}>Cancel</Button>
        </div>
      </div>
    </>
  )
}

export default InputWithButtonCode

import React from 'react'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Button } from '@/components/ui/button'

const DisableInputWithButtonCode = () => {
  return (
    <>
      <div className='flex flex-col gap-5 mt-4'>
        <div>
          <Label htmlFor='name'>Name</Label>
          <Input disabled type='text' />
        </div>
        <div>
          <Label htmlFor='email'>Email</Label>
          <Input disabled type='email' />
        </div>
        <div>
          <Label htmlFor='password'>Password</Label>
          <Input disabled type='password' />
        </div>
        <div className='flex gap-3'>
          <Button disabled>Submit</Button>
          <Button disabled variant={'error'}>
            Cancel
          </Button>
        </div>
      </div>
    </>
  )
}

export default DisableInputWithButtonCode

import React from 'react'
import { Textarea } from '@/components/ui/textarea'

const DafaultTextareacode = () => {
  return (
    <>
      <div className='pt-4'>
        <Textarea placeholder='Type your message here.' className='h-[130px]' />
      </div>
    </>
  )
}

export default DafaultTextareacode

import { Label } from 'flowbite-react'
import { Textarea } from '@/components/ui/textarea'

const TextareaWithTextCode = () => {
  return (
    <>
      <div className='grid w-full gap-1.5'>
        <Label htmlFor='message-2'>Your Message</Label>
        <Textarea placeholder='Type your message here.' id='message-2' />
        <p className='text-sm'>
          Your message will be copied to the support team.
        </p>
      </div>
    </>
  )
}

export default TextareaWithTextCode

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { toast } from '@/app/hooks/use-toast'
import { Button } from '@/components/ui/button'
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'
import { Textarea } from '@/components/ui/textarea'
const FormSchema = z.object({
  bio: z
    .string()
    .min(10, {
      message: 'Bio must be at least 10 characters.',
    })
    .max(160, {
      message: 'Bio must not be longer than 30 characters.',
    }),
})

const FormwithTextareaCode = () => {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    toast({
      title: 'You submitted the following values:',
      description: (
        <pre className='mt-2 w-[340px] rounded-md bg-slate-950 p-4'>
          <code className='text-white'>{JSON.stringify(data, null, 2)}</code>
        </pre>
      ),
    })
  }

  return (
    <>
      <div>
        <Form {...form}>
          <form
            onSubmit={form.handleSubmit(onSubmit)}
            className='w-full space-y-6'>
            <FormField
              control={form.control}
              name='bio'
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Bio</FormLabel>
                  <FormControl>
                    <Textarea
                      placeholder='Tell us a little bit about yourself'
                      className='resize-none w-full h-[150px]'
                      {...field}
                    />
                  </FormControl>
                  <FormDescription>
                    You can <span>@mention</span> other users and organizations.
                  </FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type='submit'>Submit</Button>
          </form>
        </Form>
      </div>
    </>
  )
}

export default FormwithTextareaCode

import React from 'react'
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/components/ui/input-otp";


const OtpInputCode = () => {
  return (
    <>
      <div className="max-w-sm mt-4">
        <InputOTP maxLength={6} pattern={REGEXP_ONLY_DIGITS_AND_CHARS} >
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
          <InputOTPSlot index={2} />
          <InputOTPSlot index={3} />
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
      </div>
    </>
  )
}

export default OtpInputCode

'use client'

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from '@/components/ui/input-otp'

const OtpInputSepratorCode = () => {
  return (
    <>
      <InputOTP maxLength={6}>
        <InputOTPGroup>
          <InputOTPSlot index={0} />
          <InputOTPSlot index={1} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={2} />
          <InputOTPSlot index={3} />
        </InputOTPGroup>
        <InputOTPSeparator />
        <InputOTPGroup>
          <InputOTPSlot index={4} />
          <InputOTPSlot index={5} />
        </InputOTPGroup>
      </InputOTP>
    </>
  )
}

export default OtpInputSepratorCode

'use client'

import { useState } from 'react'
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from '@/components/ui/input-otp'

const ControlledOtpInputCode = () => {
  const [value, setValue] = useState('')
  return (
    <>
      <div className='space-y-2'>
        <InputOTP
          maxLength={6}
          value={value}
          onChange={(value: React.SetStateAction<string>) => setValue(value)}>
          <InputOTPGroup>
            <InputOTPSlot index={0} />
            <InputOTPSlot index={1} />
            <InputOTPSlot index={2} />
            <InputOTPSlot index={3} />
            <InputOTPSlot index={4} />
            <InputOTPSlot index={5} />
          </InputOTPGroup>
        </InputOTP>
        <div className=' text-sm text-ld'>
          {value === '' ? (
            <>Enter your one-time password.</>
          ) : (
            <>You entered: {value}</>
          )}
        </div>
      </div>
    </>
  )
}

export default ControlledOtpInputCode