import Tiptap from '@/components/editor/tiptap'; import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Switch } from '@/components/ui/switch'; import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; import { PageProps } from '@/types'; import { Head, useForm } from '@inertiajs/react'; import { useState } from 'react'; interface HeroContentFormData { title: string; subtitle: string; description: string; image_path: File | null; button_text: string; button_link: string; is_active: boolean; } export default function HeroContentCreate({ auth }: PageProps) { const { data, setData, post, processing, errors, reset } = useForm({ title: '', subtitle: '', description: '', image_path: null, button_text: '', button_link: '', is_active: true, }); const [imagePreviewUrl, setImagePreviewUrl] = useState(null); const handleImageChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0] || null; setData('image_path', file); if (file) { const reader = new FileReader(); reader.onloadend = () => { setImagePreviewUrl(reader.result as string); }; reader.readAsDataURL(file); } else { setImagePreviewUrl(null); } }; const submit = (e: React.FormEvent) => { e.preventDefault(); post(route('admin.hero-contents.store'), { onSuccess: () => { reset(); setImagePreviewUrl(null); }, }); }; return ( Create Hero Content}>
setData('title', e.target.value)} required />
setData('subtitle', e.target.value)} />
setData('description', newContent)} />
{imagePreviewUrl && (
Image Preview
)}
setData('button_text', e.target.value)} />
setData('button_link', e.target.value)} />
setData('is_active', checked)} />
); }