From 7476ae4145a10b58f3cda8e14dc800972c2a54e4 Mon Sep 17 00:00:00 2001
From: 1989ONCE <susanloveselena@gmail.com>
Date: Thu, 14 Nov 2024 22:05:20 +0800
Subject: [PATCH] add package: heroicons, flowbite icon

---
 package-lock.json               | 18 ++++++++++++++++++
 package.json                    |  2 ++
 src/components/DrawerOption.tsx |  7 ++++---
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 70e1702..8d88769 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@supabase/supabase-js": "^2.45.3",
         "@tanstack/react-router": "^1.56.2",
+        "flowbite-react-icons": "^1.1.0",
+        "heroicons": "^2.1.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "supabase": "^1.200.3"
@@ -5192,6 +5194,16 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/flowbite-react-icons": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/flowbite-react-icons/-/flowbite-react-icons-1.1.0.tgz",
+      "integrity": "sha512-wCBIStVygQ+CQlErY7s28vbXBRz3d6iqaSEdkSjtZb66lrV0uDs2NfUA2mWuIVhHUEC/CDktyUL0DG3J2gt/WQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -5590,6 +5602,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/heroicons": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/heroicons/-/heroicons-2.1.5.tgz",
+      "integrity": "sha512-XLq3m45bJphmWdR6im52alaYajp0/fluJa2+7xh3x7CgItumbLsjhKYe+mCf0lErXLy7ZyiEgKIty2gFNxhoyA==",
+      "license": "MIT"
+    },
     "node_modules/https-proxy-agent": {
       "version": "7.0.5",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
diff --git a/package.json b/package.json
index 1afabaf..7e5695e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
   "dependencies": {
     "@supabase/supabase-js": "^2.45.3",
     "@tanstack/react-router": "^1.56.2",
+    "flowbite-react-icons": "^1.1.0",
+    "heroicons": "^2.1.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "supabase": "^1.200.3"
diff --git a/src/components/DrawerOption.tsx b/src/components/DrawerOption.tsx
index a3c6fe1..0fbb027 100644
--- a/src/components/DrawerOption.tsx
+++ b/src/components/DrawerOption.tsx
@@ -1,6 +1,7 @@
 import { Link } from "@tanstack/react-router";
+import { CaretDown, CaretRight } from "flowbite-react-icons/solid";
 import { useState } from "react";
-import { HStack, SidebarArrowDownIcon, SidebarArrowRightIcon, VStack } from "../components";
+import { HStack, VStack } from "../components";
 
 const options = [
     { name: "首頁", engName: "Home", pageNav: "/" },
@@ -29,9 +30,9 @@ export const DrawerOption = () => {
                 <HStack className="bg-blue-200" key={option.name}>
                     <div className="flex items-center" onClick={() => toggleOption(option.name)}>
                         {openOptions[option.name] ? (
-                            <SidebarArrowDownIcon fill="currentColor" stroke={"#B1B1B1"} size={20} />
+                            <CaretDown />
                         ) : (
-                            <SidebarArrowRightIcon fill="currentColor" stroke={"#B1B1B1"} size={20} />
+                            <CaretRight />
                         )}
                     </div>
                     <Link to={option.pageNav}>