Added style to file drop

src/frontend/src/pages/CommunityPage/index.tsx

@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom";
 import { CardComponent } from "../../components/cardComponent";
 import IconComponent from "../../components/genericIconComponent";
 import Header from "../../components/headerComponent";
+import { SkeletonCardComponent } from "../../components/skeletonCardComponent";
 import { getExamples } from "../../controllers/API";
 import { FlowType } from "../../types/flow";
 export default function CommunityPage(): JSX.Element {
@@ -74,7 +75,14 @@ export default function CommunityPage(): JSX.Element {
           new and powerful features.
         </span>
         <div className="community-pages-flows-panel">
-          {!loadingExamples &&
+          {loadingExamples ? (
+            <>
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+              <SkeletonCardComponent />
+            </>
+          ) : (
             examples.map((flow, idx) => (
               <CardComponent
                 key={idx}
@@ -99,7 +107,8 @@ export default function CommunityPage(): JSX.Element {
                   </Button>
                 }
               />
-            ))}
+            ))
+          )}
         </div>
       </div>
     </>

src/frontend/src/pages/MainPage/index.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect } from "react";
+import { useContext, useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import DropdownButton from "../../components/DropdownButtonComponent";
 import { CardComponent } from "../../components/cardComponent";
@@ -35,6 +35,28 @@ export default function HomePage(): JSX.Element {
   }, []);
   const navigate = useNavigate();
 
+  const [isDragging, setIsDragging] = useState(false);
+
+  const dragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const dragEnter = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const dragLeave = () => {
+    setIsDragging(false);
+  };
+
+  const fileDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    // Handle file drop logic here
+  };
+
   // Personal flows display
   return (
     <>
@@ -78,40 +100,59 @@ export default function HomePage(): JSX.Element {
         <span className="main-page-description-text">
           Manage your personal projects. Download or upload your collection.
         </span>
-        <div className="main-page-flows-display">
-          {isLoading && flows.length == 0 ? (
+        <div
+          onDragOver={dragOver}
+          onDragEnter={dragEnter}
+          onDragLeave={dragLeave}
+          onDrop={fileDrop}
+          className={
+            "h-full w-full " + (isDragging
+              ? "flex flex-col items-center justify-center mb-24 gap-4 text-2xl font-light"
+              : "")
+          }
+        >
+          {isDragging ? (
             <>
-              <SkeletonCardComponent />
-              <SkeletonCardComponent />
-              <SkeletonCardComponent />
-              <SkeletonCardComponent />
+              <IconComponent name="ArrowUpToLine" className="h-12 w-12 stroke-1" />
+              Drop your flow here
             </>
           ) : (
-            flows.map((flow, idx) => (
-              <CardComponent
-                key={idx}
-                flow={flow}
-                id={flow.id}
-                button={
-                  <Link to={"/flow/" + flow.id}>
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="whitespace-nowrap "
-                    >
-                      <IconComponent
-                        name="ExternalLink"
-                        className="main-page-nav-button"
-                      />
-                      Edit Flow
-                    </Button>
-                  </Link>
-                }
-                onDelete={() => {
-                  removeFlow(flow.id);
-                }}
-              />
-            ))
+            <div className="main-page-flows-display">
+              {isLoading && flows.length == 0 ? (
+                <>
+                  <SkeletonCardComponent />
+                  <SkeletonCardComponent />
+                  <SkeletonCardComponent />
+                  <SkeletonCardComponent />
+                </>
+              ) : (
+                flows.map((flow, idx) => (
+                  <CardComponent
+                    key={idx}
+                    flow={flow}
+                    id={flow.id}
+                    button={
+                      <Link to={"/flow/" + flow.id}>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="whitespace-nowrap "
+                        >
+                          <IconComponent
+                            name="ExternalLink"
+                            className="main-page-nav-button"
+                          />
+                          Edit Flow
+                        </Button>
+                      </Link>
+                    }
+                    onDelete={() => {
+                      removeFlow(flow.id);
+                    }}
+                  />
+                ))
+              )}
+            </div>
           )}
         </div>
       </div>

src/frontend/src/utils/styleUtils.ts

@@ -1,4 +1,5 @@
 import {
+  ArrowUpToLine,
   Bell,
   Check,
   CheckCircle2,
@@ -188,6 +189,7 @@ export const nodeNames: { [char: string]: string } = {
 };
 
 export const nodeIconsLucide: iconsType = {
+  ArrowUpToLine: ArrowUpToLine,
   Chroma: ChromaIcon,
   AirbyteJSONLoader: AirbyteIcon,
   Anthropic: AnthropicIcon,