Input

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputExample() {
	return (
		<Input
			type="email"
			placeholder="Email"
			className="w-sm max-w-[calc(100vw-3rem)]"
		/>
	)
}

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { Button } from '@nerdfish/react/button'
import {
	Field,
	FieldError,
	FieldGroup,
	FieldLabel,
} from '@nerdfish/react/field'
import { Input } from '@nerdfish/react/input'
import { toast } from '@nerdfish/react/toast'
import { Controller, useForm } from 'react-hook-form'
import { z } from 'zod'

const FormSchema = z.object({
	email: z.string().email(),
})

export default function InputInvalidExample() {
	const form = useForm<z.infer<typeof FormSchema>>({
		resolver: zodResolver(FormSchema),
		defaultValues: {
			email: '',
		},
	})

	function onSubmit(data: z.infer<typeof FormSchema>) {
		toast('You submitted the following values', {
			description: (
				<pre className="rounded-base mt-2 w-80 bg-neutral-950 p-4">
					<code className="text-white">{JSON.stringify(data, null, 2)}</code>
				</pre>
			),
		})
	}

	return (
		<form
			onSubmit={form.handleSubmit(onSubmit)}
			className="w-sm max-w-[calc(100vw-3rem)]"
		>
			<div className="flex flex-col">
				<FieldGroup>
					<Controller
						name="email"
						control={form.control}
						render={({ field, fieldState }) => (
							<Field data-invalid={fieldState.invalid}>
								<FieldLabel htmlFor="form-phone-input-title">Phone</FieldLabel>
								<Input
									type="email"
									placeholder="your email address"
									{...field}
								/>
								{fieldState.invalid ? (
									<FieldError errors={[fieldState.error]} />
								) : null}
							</Field>
						)}
					/>

					<Button className="mt-friends" type="submit">
						Submit
					</Button>
				</FieldGroup>
			</div>
		</form>
	)
}

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputVariantsExample() {
	return (
		<div className="space-y-friends flex w-sm max-w-[calc(100vw-3rem)] flex-col">
			<Input type="email" placeholder="Email" variant="default" />
			<Input type="email" placeholder="Email" variant="bordered" />
		</div>
	)
}

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputDisabledExample() {
	return (
		<div className="space-y-friends flex w-sm max-w-[calc(100vw-3rem)] flex-col">
			<Input type="email" placeholder="Email" variant="default" disabled />
			<Input type="email" placeholder="Email" variant="bordered" disabled />
		</div>
	)
}

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputSizeExample() {
	return (
		<div className="space-y-friends flex w-sm max-w-[calc(100vw-3rem)] flex-col">
			<Input type="email" placeholder="Email" size="xs" />
			<Input type="email" placeholder="Email" size="sm" />
			<Input type="email" placeholder="Email" size="md" />
			<Input type="email" placeholder="Email" size="lg" />
			<Input type="email" placeholder="Email" size="xl" />
		</div>
	)
}

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputFileExample() {
	return (
		<div className="grid w-sm max-w-[calc(100vw-3rem)] items-center gap-3">
			<label htmlFor="picture">Picture</label>
			<Input id="picture" type="file" />
		</div>
	)
}

'use client'

import { Field, FieldLabel } from '@nerdfish/react/field'
import {
	InputGroup,
	InputGroupAddon,
	InputGroupButton,
	InputGroupInput,
} from '@nerdfish/react/input-group'
import { EyeIcon, EyeOffIcon } from 'lucide-react'
import { useState } from 'react'

export default function InputPasswordExample() {
	const [password, setPassword] = useState('')
	const [show, setShow] = useState(false)

	return (
		<Field className="w-sm max-w-[calc(100vw-3rem)]">
			<FieldLabel htmlFor="password">Password</FieldLabel>
			<InputGroup>
				<InputGroupInput
					id="password"
					type={show ? 'text' : 'password'}
					value={password}
					onChange={(e) => setPassword(e.target.value)}
					placeholder="Password"
				/>
				<InputGroupAddon align="inline-end">
					<InputGroupButton
						type="button"
						onClick={() => setShow((s) => !s)}
						aria-label={show ? 'Hide password' : 'Show password'}
						icon
						size="xs"
					>
						{show ? <EyeOffIcon /> : <EyeIcon />}
					</InputGroupButton>
				</InputGroupAddon>
			</InputGroup>
		</Field>
	)
}

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputExample() {
	return (
		<Input
			type="email"
			placeholder="Email"
			className="w-sm max-w-[calc(100vw-3rem)]"
		/>
	)
}

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputExample() {
	return (
		<Input
			type="email"
			placeholder="Email"
			className="w-sm max-w-[calc(100vw-3rem)]"
		/>
	)
}

'use client'

import { Input } from '@nerdfish/react/input'

export default function InputExample() {
	return (
		<Input
			type="email"
			placeholder="Email"
			className="w-sm max-w-[calc(100vw-3rem)]"
		/>
	)
}