image-to-code/app/form.tsx
Jaime Freire 059c99c70f Demo
2023-12-02 13:36:52 +01:00

29 lines
826 B
TypeScript

'use client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { FormEvent } from 'react'
export const Form = ({transformUrlToCode} : {transformUrlToCode: (url: string) => void}) =>{
const handleSubmit = (evt: FormEvent) => {
const form = evt.currentTarget as HTMLFormElement;
const url = form.elements.namedItem('url') as HTMLInputElement;
transformUrlToCode(url.value);
}
return (
<form className="flex flex-col gap-5"
onSubmit={(evt) => {
evt.preventDefault()
handleSubmit(evt)
}}
>
<Label htmlFor="Introduce to URL de la imagen" />
<Input type="text" name="url" id="url" placeholder="https://tu-screnshot.jpg"/>
<Button>Generar imágen</Button>
</form>
)
}