feat: New design and optimization

resources/js/pages/dashboard/carousel/add.tsx

@@ -7,13 +7,14 @@ import FilePondPluginImageExifOrientation from 'filepond-plugin-image-exif-orien
 import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
 import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css';
 import 'filepond/dist/filepond.min.css';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FilePond, registerPlugin } from 'react-filepond';
 import { toast } from 'sonner';
 
 registerPlugin(FilePondPluginImageExifOrientation, FilePondPluginImagePreview);
 
 export default function CarouselAdd() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [file, setFile] = useState<any | null>(null);
 
     const { data, setData, post, processing, errors, wasSuccessful } = useForm({
@@ -21,12 +22,14 @@ export default function CarouselAdd() {
         image_url: null as File | null,
     });
 
-    const handleSubmit = (e: React.FormEvent) => {
-        e.preventDefault();
-
+    useEffect(() => {
         if (file) {
             setData('image_url', file.file);
         }
+    }, [file, setData]);
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
 
         post('/carousel', {
             forceFormData: true,
@@ -72,7 +75,7 @@ export default function CarouselAdd() {
                             }}
                             allowMultiple={false}
                             maxFiles={1}
-                            name="image_url" // Change this to match your backend expectation
+                            name="image_url"
                             instantUpload={false}
                             storeAsFile={true}
                             labelIdle='Drag & Drop your image or <span class="filepond--label-action">Browse</span>'
@@ -84,7 +87,11 @@ export default function CarouselAdd() {
                         )}
                     </div>
 
-                    <Button type="submit" disabled={processing}>
+                    <Button
+                        type="submit"
+                        disabled={processing}
+                        className="cursor-pointer"
+                    >
                         {processing ? 'Uploading...' : 'Submit'}
                     </Button>
                 </form>

resources/js/pages/dashboard/carousel/carousel.tsx

@@ -31,7 +31,9 @@ export default function Carousel({
                             Carousel
                         </h1>
                         <Link href={dashboardcarousel.add()}>
-                            <Button>Add Image</Button>
+                            <Button className="cursor-pointer">
+                                Add Image
+                            </Button>
                         </Link>
                     </div>
                     <Table>