File size: 1,924 Bytes
a85305f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
"use client"
import { useEffect, useTransition } from "react"
import { usePathname } from "next/navigation"
import { experimental_useFormStatus as useFormStatus } from "react-dom"
import { Textarea } from "@/components/ui/textarea"
import { Button } from "@/components/ui/button"
import { handleFormSubmit } from "@/server/actions"
export const VideoForm = () => {
const pathname = usePathname()
const ownerId = pathname.split("/").pop()
const { pending } = useFormStatus()
return (
<form
action={handleFormSubmit}
>
<div className="flex flex-row w-full mb-3">
<div className="flex flex-col w-1/2 text-center">
<h2 className="text-4xl font-thin tracking-tight">VideoChain 🎬</h2>
<p className="text-md font-thin">
Powered by <span className="font-normal">Hugging Face 🤗</span>
</p>
</div>
<div className="flex flex-col w-1/2 text-center">
<p className="text-sl font-thin">
For demonstration purposes only. Please use responsibly, and cancel any video you don't need anymore.
You have been assigned this permalink ID: <a href={`/studio/${ownerId}`} className="font-normal" target="_blank">{ownerId}</a>
</p>
</div>
</div>
<div className="flex items-center justify-between md:space-x-3 w-full">
<input
type="hidden"
id="ownerId"
name="ownerId"
value={ownerId}
/>
<Textarea
id="prompt"
name="prompt"
placeholder="3 clips of a cat playing the piano"
className="mr-3 md:mr-0"
/>
<Button
variant="secondary"
size="lg"
className="text-md md:w-32"
type="submit"
disabled={pending}
>
{pending ? "Loading.." : "Generate"}
</Button>
</div>
</form>
)
} |