start using Lucide icon

frontend/app/projects/[projectId]/folders/layout.tsx

@@ -2,8 +2,8 @@
 import { useEffect, useState } from "react";
 import Config from "@/config/config";
 const apiServer = Config.apiServer;
-import { Listbox, ListboxItem } from "@nextui-org/react";
+import { Button, Listbox, ListboxItem } from "@nextui-org/react";
-import { FolderIcon } from "@/components/icons";
+import { Folder, Plus } from "lucide-react";
 import { useRouter } from "next/navigation";
 
 /**
@@ -60,6 +60,14 @@ export default function ProjectsLayout({
   return (
     <div className="flex">
       <div className="w-64 min-h-screen border-r-1">
+        <Button
+          startContent={<Plus size={16} />}
+          size="sm"
+          variant="bordered"
+          className="m-2"
+        >
+          New Folder
+        </Button>
         <Listbox aria-label="Listbox Variants">
           {folders.map((folder, index) => (
             <ListboxItem
@@ -69,7 +77,7 @@ export default function ProjectsLayout({
                   `/projects/${params.projectId}/folders/${folder.id}/cases`
                 )
               }
-              startContent={<FolderIcon size={16} className="text-gray-600" />}
+              startContent={<Folder size={20} color="#99ccff" fill="#99ccff" />}
             >
               {folder.name}
               {/* {folder.detail}

frontend/components/icons.tsx

@@ -266,25 +266,6 @@ export const PlayIcon: React.FC<IconSvgProps> = ({
   );
 };
 
-export const FolderIcon: React.FC<IconSvgProps> = ({
-  size = 24,
-  width,
-  height,
-  ...props
-}) => {
-  return (
-    <svg
-      viewBox="0 0 512 512"
-      fill="currentColor"
-      height={size || height}
-      width={size || height}
-      {...props}
-    >
-      <path d="M64 480h384c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7l-26.5-26.6c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64z" />
-    </svg>
-  );
-};
-
 export const DotsIcon: React.FC<IconSvgProps> = ({
   size = 24,
   width,

frontend/package-lock.json

@@ -20,6 +20,7 @@
         "eslint-config-next": "14.0.2",
         "framer-motion": "^10.16.4",
         "intl-messageformat": "^10.5.0",
+        "lucide-react": "^0.335.0",
         "next": "14.0.2",
         "next-themes": "^0.2.1",
         "postcss": "8.4.31",
@@ -5092,6 +5093,14 @@
         "node": ">=10"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.335.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.335.0.tgz",
+      "integrity": "sha512-FNmIG4JLdvpK86ZFJjrT0SnFEa95KhsiNokVicA5mWEf1oe+ujP2C/bTr0PVQzr/wzvZpzgxaOySq0O79q2oMA==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",

frontend/package.json

@@ -21,6 +21,7 @@
     "eslint-config-next": "14.0.2",
     "framer-motion": "^10.16.4",
     "intl-messageformat": "^10.5.0",
+    "lucide-react": "^0.335.0",
     "next": "14.0.2",
     "next-themes": "^0.2.1",
     "postcss": "8.4.31",