feat: enhance project creation modal with drag-and-drop milestones and markdown editor

Author: 0xdevcollins

components/landing-page/project/CreateProjectModal/Basic.tsx

@@ -9,6 +9,7 @@ import { Info } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { z } from 'zod';
 import FormHint from '@/components/form/FormHint';
+import Image from 'next/image';
 
 interface BasicProps {
   onDataChange?: (data: BasicFormData) => void;
@@ -88,6 +89,7 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
       Partial<Record<keyof BasicFormData | 'socialLinks', boolean>>
     >({});
     const [submitted, setSubmitted] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
 
     const handleInputChange = (
       field: keyof BasicFormData,
@@ -136,6 +138,50 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
       }
     };
 
+    const handleDragOver = (event: React.DragEvent<HTMLLabelElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragOver(true);
+    };
+
+    const handleDragLeave = (event: React.DragEvent<HTMLLabelElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragOver(false);
+    };
+
+    const handleDrop = (event: React.DragEvent<HTMLLabelElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setIsDragOver(false);
+
+      const files = event.dataTransfer.files;
+      if (files && files.length > 0) {
+        const file = files[0];
+        setTouched(prev => ({ ...prev, logo: true }));
+
+        // Validate file type
+        if (!file.type.match(/^image\/(jpeg|png)$/)) {
+          setErrors(prev => ({
+            ...prev,
+            logo: 'Only JPEG and PNG files are allowed',
+          }));
+          return;
+        }
+
+        // Validate file size (2MB = 2 * 1024 * 1024 bytes)
+        if (file.size > 2 * 1024 * 1024) {
+          setErrors(prev => ({
+            ...prev,
+            logo: 'File size must be less than 2MB',
+          }));
+          return;
+        }
+
+        handleInputChange('logo', file);
+      }
+    };
+
     const validateForm = (): boolean => {
       // Normalize social links (trim empties but keep array length for UI)
       const parsed = basicSchema.safeParse({
@@ -224,8 +270,9 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
         }
       } catch (e: unknown) {
         // Zod throws on parse; map first error
-        if (e && typeof e === 'object' && 'issues' in (e as any)) {
-          const issue = (e as any).issues?.[0];
+        if (e && typeof e === 'object' && 'issues' in e) {
+          const zodError = e as { issues: Array<{ message: string }> };
+          const issue = zodError.issues?.[0];
           const msg = issue?.message as string | undefined;
           const k = field as keyof BasicFormData;
           setErrors(prev => ({ ...prev, [k]: msg || 'Invalid value' }));
@@ -278,24 +325,51 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
             />
             <label
               htmlFor='logo-upload'
+              onDragOver={handleDragOver}
+              onDragLeave={handleDragLeave}
+              onDrop={handleDrop}
               className={cn(
                 'flex h-32 w-32 cursor-pointer items-center justify-center rounded-[12px] border border-[#2B2B2B] bg-[#101010] transition-colors xl:h-[200px] xl:w-[200px]',
                 formData.logo
                   ? 'border-primary bg-primary/5'
                   : 'hover:border-primary border-[#484848]',
-                (submitted || touched.logo) && errors.logo && 'border-red-500'
+                (submitted || touched.logo) && errors.logo && 'border-red-500',
+                isDragOver && 'border-primary bg-primary/10 scale-105'
               )}
             >
               {formData.logo ? (
                 <div className='flex flex-col items-center space-y-2'>
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img
+                  {}
+                  <Image
                     src={URL.createObjectURL(formData.logo)}
                     alt='Project logo'
-                    className='h-16 w-16 rounded object-cover'
+                    className='h-32 w-32 rounded object-cover'
+                    width={128}
+                    height={128}
                   />
                   <span className='text-xs text-white'>Change</span>
                 </div>
+              ) : isDragOver ? (
+                <div className='flex flex-col items-center space-y-2'>
+                  <svg
+                    width='36'
+                    height='36'
+                    viewBox='0 0 36 36'
+                    fill='none'
+                    xmlns='http://www.w3.org/2000/svg'
+                  >
+                    <path
+                      d='M17.875 2.75012H9.65C6.70972 2.75012 5.23959 2.75012 4.11655 3.32234C3.1287 3.82567 2.32555 4.62882 1.82222 5.61667C1.25 6.73971 1.25 8.20985 1.25 11.1501V25.8501C1.25 28.7904 1.25 30.2605 1.82222 31.3836C2.32555 32.3714 3.1287 33.1746 4.11655 33.6779C5.23959 34.2501 6.70972 34.2501 9.65 34.2501H25.75C27.3775 34.2501 28.1912 34.2501 28.8588 34.0712C30.6705 33.5858 32.0857 32.1707 32.5711 30.3589C32.75 29.6913 32.75 28.8776 32.75 27.2501M29.25 11.5001V1.00012M24 6.25012H34.5M14.375 12.3751C14.375 14.3081 12.808 15.8751 10.875 15.8751C8.942 15.8751 7.375 14.3081 7.375 12.3751C7.375 10.4421 8.942 8.87512 10.875 8.87512C12.808 8.87512 14.375 10.4421 14.375 12.3751ZM22.2326 18.3569L7.42951 31.8142C6.59688 32.5711 6.18057 32.9496 6.14375 33.2775C6.11183 33.5616 6.22079 33.8435 6.43557 34.0323C6.68336 34.2501 7.24599 34.2501 8.37125 34.2501H24.798C27.3165 34.2501 28.5758 34.2501 29.5649 33.827C30.8065 33.2959 31.7957 32.3066 32.3269 31.065C32.75 30.0759 32.75 28.8166 32.75 26.2981C32.75 25.4507 32.75 25.027 32.6574 24.6324C32.5409 24.1365 32.3177 23.672 32.0032 23.2713C31.7529 22.9525 31.4221 22.6878 30.7604 22.1584L25.8652 18.2423C25.2029 17.7125 24.8718 17.4476 24.5071 17.3541C24.1857 17.2717 23.8475 17.2823 23.5319 17.3848C23.1739 17.5011 22.8601 17.7864 22.2326 18.3569Z'
+                      stroke='#A7F950'
+                      strokeWidth='2'
+                      strokeLinecap='round'
+                      strokeLinejoin='round'
+                    />
+                  </svg>
+                  <span className='text-primary text-xs font-medium'>
+                    Drop image here
+                  </span>
+                </div>
               ) : (
                 <div className='flex flex-col items-center space-y-2'>
                   <svg
@@ -313,6 +387,9 @@ const Basic = React.forwardRef<{ validate: () => boolean }, BasicProps>(
                       strokeLinejoin='round'
                     />
                   </svg>
+                  <span className='text-xs text-[#919191]'>
+                    Click or drag to upload
+                  </span>
                 </div>
               )}
             </label>