import React from 'react'
import { Input } from "@/app/components/shadcn-ui/Default-Ui/input";


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

export default SimpleInputcode

import React from 'react'
import { Input } from "@/app/components/shadcn-ui/Default-Ui/input";
import { Label } from "@/app/components/shadcn-ui/Default-Ui/label";


const InputLabelCode = () => {
  return (
    <>
      <div className=" max-w-sm 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 "@/app/components/shadcn-ui/Default-Ui/label";
import { Button } from '@/app/components/shadcn-ui/Default-Ui/button';
import { Input } from "@/app/components/shadcn-ui/Default-Ui/input";
const InputWithButtonCode = () => {
  return (
    <>
      <div className="max-w-sm 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>Submit</Button>
          <Button variant={"error"}>Cancel</Button>
        </div>
      </div>
    </>
  )
}

export default InputWithButtonCode

import React from 'react'
import { Input } from "@/app/components/shadcn-ui/Default-Ui/input";
import { Label } from "@/app/components/shadcn-ui/Default-Ui/label";
import { Button } from '@/app/components/shadcn-ui/Default-Ui/button';


const DisableInputWithButtonCode = () => {
  return (
    <>
      <div className="max-w-sm 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 { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@/app/components/shadcn-ui/Default-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