Input

1import React from 'react'
2
3import { Input } from '@/components/ui/input'
4
5export function InputDemo() {
6    return (
7        <div className="w-60 sm:w-80">
8            <Input type="text" placeholder="Search here..." />
9        </div>
10    )
11}
12

1import React from 'react'
2import { Mail, UserRound } from 'lucide-react'
3
4import { Input } from '@/components/ui/input'
5
6export function InputIcon() {
7    return (
8        <div className="flex w-60 sm:w-80 flex-col gap-4">
9            <Input
10                type="text"
11                placeholder="Username"
12                iconLeft={<UserRound className="size-5" />}
13            />
14            <Input type="email" placeholder="Email"iconRight={<Mail className="size-5" />} />
15        </div>
16    )
17}
18

1import { Input } from '@/components/ui/input'
2import { Label } from '@/components/ui/label'
3
4export function InputWithLabel() {
5    return (
6        <div className="grid w-60 sm:w-80 items-center gap-2.5">
7            <Label htmlFor="email" className='gap-0.5'>
8                Email<span className="text-secondary">*</span>
9            </Label>
10            <Input type="email" id="email" placeholder="Email" />
11        </div>
12    )
13}
14

1import { Input } from '@/components/ui/input'
2import { Label } from '@/components/ui/label'
3
4export function InputFile() {
5    return (
6        <div className="grid w-60 sm:w-80 items-center gap-2.5">
7            <Label htmlFor="file1">Upload Picture</Label>
8            <Input
9                type="file"
10                id="file1"
11                className=" file:pr-2"
12            />
13        </div>
14    )
15}
16

1import React from 'react'
2import { UserRound } from 'lucide-react'
3
4import { Input } from '@/components/ui/input'
5
6export function InputPassword() {
7    return (
8        <div className="flex w-60 sm:w-80 flex-col gap-4">
9            <Input
10                type="text"
11                placeholder="Username"
12                iconRight={<UserRound className="size-5" />}
13            />
14            <Input type="password" placeholder="Password" />
15        </div>
16    )
17}
18

1import { Copy, Link } from 'lucide-react'
2
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Label } from '@/components/ui/label'
6
7export function InputWithButton() {
8    return (
9        <div className="grid w-60 sm:w-80 items-center gap-2.5">
10            <Label htmlFor="link">Share Link</Label>
11            <div className="relative">
12                <Input type="email" id="link" placeholder="www.sbtheme.com" iconLeft={<Link className="size-4.5" />} className='pr-11' />
13                <Button
14                    type="button"
15                    className="absolute inset-y-0 right-0 h-auto rounded-l-none"
16                    size={'icon'}
17                >
18                    <Copy className="size-4.5" />
19                </Button>
20            </div>
21        </div>
22    )
23}
24