import React, { useState } from "react" import { Head, Form } from "@inertiajs/react" import AppLayout from "@/layouts/app-layout" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft } from "lucide-react" import { type BreadcrumbItem } from "@/types" import InputError from "@/components/input-error" import { index, store } from "@/routes/admin/gallery" const breadcrumbs: BreadcrumbItem[] = [ { title: "Gallery", href: index().url }, { title: "Create", href: "#" }, ] interface Category { value: string label: string } interface galleryProps { categories: Category[] } export default function Create({ categories }: galleryProps) { const handleCancel = () => window.history.back() const defaultCategory = categories.find( (item) => item.label === "Photo" ); const [galleryType, setGalleryType] = useState( defaultCategory?.value ?? "" ); return (

{/* Header */}

Create Gallery

Add a new Gallery.

{/* Form */}

Gallery Details

{({ errors }) => ( <> {/* Name and Image in one row */}

Category *

Title *

Slug *

slug should be unique and in lowercase use _ instead of space.

{galleryType === 'Video' ? (

Video Url

) : (

Images

Select multiple images (optional)

)}

Description