"use client"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Checkbox } from "@/components/ui/checkbox"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { Separator } from "@/components/ui/separator"; import { UploadCloud } from "lucide-react"; import { useState } from "react"; import Image from "next/image"; export default function ComplexForm() { const [imagePreview, setImagePreview] = useState(null); const handleImageUpload = (event: React.ChangeEvent) => { const file = event.target.files?.[0]; if (file) { const reader = new FileReader(); reader.onloadend = () => { setImagePreview(reader.result as string); }; reader.readAsDataURL(file); } }; return (

Create Product Listing

{/* Basic Information */}

Basic Information

Add your product details below.

Product Name

Product Category

Availability

In Stock

Pre-order

Backorder

{/* Media Upload */}

Product Media

Add product images and media.

Product Images

{imagePreview ? ( Preview

) : (

Click to upload {" "} or drag and drop

PNG, JPG or GIF (MAX. 800x400px)

)}

{/* Additional Options */}

Additional Options

Configure additional product options.

Features

Form Layouts

Complex Form

Stacked

Two Column