89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
'use client'
|
|
|
|
import { Button } from '@/components/ui/button'
|
|
import { Form } from './form'
|
|
import { useState } from 'react'
|
|
|
|
const STEPS = {
|
|
INITIAL: 'INITIAL',
|
|
LOADING: 'LOADING',
|
|
PREVIEW: 'PREVIEW',
|
|
ERROR: 'ERROR',
|
|
}
|
|
|
|
export default function Home() {
|
|
const [result, setResult] = useState('')
|
|
const [step, setStep] = useState(STEPS.INITIAL)
|
|
|
|
const transformUrlToCode = async (url: string) => {
|
|
setStep(STEPS.LOADING)
|
|
const res = await fetch('/api/generate-code-from-image', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ url }),
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
|
|
if (!res.ok || res.body === null) {
|
|
throw new Error('Error al generar el código')
|
|
setStep(STEPS.ERROR)
|
|
}
|
|
|
|
setStep(STEPS.PREVIEW)
|
|
|
|
const reader = res.body.getReader()
|
|
const decoder = new TextDecoder('utf-8')
|
|
|
|
while (true) {
|
|
const { done, value } = await reader.read()
|
|
const chunk = decoder.decode(value)
|
|
|
|
setResult((prevResult) => prevResult + chunk)
|
|
|
|
console.log(chunk)
|
|
if (done) break
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-[400px_1fr]">
|
|
<aside className="flex flex-col justify-between min-h-scren p-4 bg-gray-900">
|
|
<header className="text-center">
|
|
<h1 className="text-3xl font-semibold">IMAGE 2 CODE</h1>
|
|
<h2 className="text-sm opacity-75">Pasa tus imágenes a código en segundos</h2>
|
|
</header>
|
|
<section>{/* Aquí irán los filtros... */}</section>
|
|
<footer>Desarrollado por rdev</footer>
|
|
</aside>
|
|
<main className="bg-gray-950">
|
|
<section className="max-w-5xl w-full mx-auto p-10">
|
|
{step == STEPS.INITIAL && (
|
|
<div>
|
|
<Form transformUrlToCode={transformUrlToCode} />
|
|
</div>
|
|
)}
|
|
|
|
{step == STEPS.LOADING && (
|
|
<div className="flex flex-col items-center justify-center">
|
|
<h2 className="text-2xl font-semibold">Generando código...</h2>
|
|
<div className="w-24 h-24 border-4 border-gray-900 rounded-full animate-spin"></div>
|
|
</div>
|
|
)}
|
|
|
|
{step == STEPS.PREVIEW && (
|
|
<div className="rounded flex flex-col gap-4">
|
|
<iframe srcDoc={result} className="w-full h-full border-4 rounded border-gray-700 aspect-video" />
|
|
<pre className='pt-10'>
|
|
<code>{result}</code>
|
|
</pre>
|
|
</div>
|
|
)}
|
|
|
|
{step == STEPS.ERROR && 'ERROR'}
|
|
</section>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|