Added the Ability to Update Board Background Images After Creation

app/(platform)/(dashboard)/board/[boardId]/_components/board-update-image.tsx

@@ -0,0 +1,78 @@
+import { X } from 'lucide-react';
+import { toast } from 'sonner';
+import { ElementRef, useRef } from 'react';
+import Link from 'next/link';
+
+import { Button } from '@/components/ui/button';
+import {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { FormPicker } from '@/components/form/form-picker';
+import { FormSubmit } from '@/components/form/form-submit';
+import { useAction } from '@/hooks/use-action';
+import { updateBoard } from '@/actions/update-board';
+
+interface BoardUpdateImageProps {
+  boardId: string;
+}
+
+export const BoardUpdateImage = ({ boardId }: BoardUpdateImageProps) => {
+  const closeRef = useRef<ElementRef<'button'>>(null);
+
+  const { execute, fieldErrors } = useAction(updateBoard, {
+    onSuccess: (data) => {
+      toast.success('Board image updated');
+      closeRef.current?.click();
+    },
+    onError: (error) => {
+      toast.error(error);
+    },
+  });
+
+  const onSubmit = (formData: FormData) => {
+    const image = formData.get('image') as string;
+
+    execute({ id: boardId, image });
+  };
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant='ghost'
+          className='h-auto w-full justify-start p-2 px-5 text-sm font-normal text-neutral-600'
+        >
+          Change Background Image
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-80 pt-3' side='left' align='start'>
+        <PopoverClose asChild>
+          <Button
+            className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
+            variant='ghost'
+          >
+            <X className='h-4 w-4' />
+          </Button>
+        </PopoverClose>
+        <form action={onSubmit} className='space-y-4'>
+          <div className='space-y-4'>
+            <p className='text-center text-xs font-medium italic text-neutral-700'>
+              Images Provided by{' '}
+              <Link
+                className='text-sky-900 underline'
+                href='https://unsplash.com/'
+              >
+                Unsplash
+              </Link>
+            </p>
+            <FormPicker id='image' errors={fieldErrors} />
+          </div>
+          <FormSubmit className='w-full'>Update</FormSubmit>
+        </form>
+      </PopoverContent>
+    </Popover>
+  );
+};