From c7dfdc9d29b326ed5a672f2af7af21dd72996427 Mon Sep 17 00:00:00 2001
From: himansig7 <himansig7@gmail.com>
Date: Thu, 5 Dec 2024 17:29:54 -0800
Subject: [PATCH 1/2] Update MakePostButton.jsx

---
 .../src/home_components/MakePostButton.jsx    | 152 +++++++++++++++++-
 1 file changed, 151 insertions(+), 1 deletion(-)

diff --git a/frontend/src/home_components/MakePostButton.jsx b/frontend/src/home_components/MakePostButton.jsx
index e0b2769..40d8b2b 100644
--- a/frontend/src/home_components/MakePostButton.jsx
+++ b/frontend/src/home_components/MakePostButton.jsx
@@ -78,7 +78,7 @@ const MakePostButton = ({ setPosts, courses }) => {
             mb={4}
           >
             <SelectTrigger>
-              <SelectValueText placeholder="Related course" />
+              <SelectValueText placeholder="Select Course" />
             </SelectTrigger>
             <SelectContent>
               {options.items.map((item) => (
@@ -104,3 +104,153 @@ const MakePostButton = ({ setPosts, courses }) => {
 };
 
 export default MakePostButton;
+
+// import React, { useState } from 'react';
+// import { Box, Button, Input, Textarea, createListCollection } from '@chakra-ui/react';
+// import {
+//   SelectContent,
+//   SelectItem,
+//   SelectLabel,
+//   SelectRoot,
+//   SelectTrigger,
+//   SelectValueText,
+//   Tag, 
+// } from "../components/ui/select";
+// import axios from 'axios';
+
+// const MakePostButton = ({ setPosts, courses }) => {
+//   const [showCreatePost, setShowCreatePost] = useState(false);
+//   const [title, setTitle] = useState('');
+//   const [description, setDescription] = useState('');
+//   const [tags, setTags] = useState([]);
+//   const [tagInput, setTagInput] = useState('');
+//   const [selectedTags, setSelectedTags] = useState([]); // Line 16
+
+//   const [selectedOption, setSelectedOption] = useState(""); // Track selected option
+//   const options = createListCollection({
+//     items: courses.map(course => ({ label: course, value: course })), // Line 18
+//   });
+
+//   const tagOptions = createListCollection({
+//     items: [
+//       { label: "Homework", value: "homework" },
+//       { label: "Exam", value: "exam" },
+//       { label: "Project", value: "project" },
+//     ],
+//   });
+
+//   const handleCreatePost = async () => {
+//     try {
+//       const response = await axios.post('http://localhost:5000/api/posts', {
+//         title,
+//         description,
+//         tags: selectedTags,
+//       });
+
+//       // Update the posts in HomePage
+//       setPosts((prevPosts) => [response.data, ...prevPosts]);
+
+//       // Clear the form and hide the creation area
+//       setTitle('');
+//       setDescription('');
+//       setTags([]);
+//       setTagInput('');
+//       setSelectedTags([]);
+//       setShowCreatePost(false);
+//     } catch (error) {
+//       console.error("Error creating post:", error);
+//     }
+//   };
+
+//   return (
+//     <Box>
+//       {/* Toggle Button */}
+//       <Button colorScheme="blue" onClick={() => setShowCreatePost(!showCreatePost)}>
+//         {showCreatePost ? 'Cancel' : '📃 New Post'}
+//       </Button>
+
+//       {/* Post Creation Form */}
+//       {showCreatePost && (
+//         <Box p={4} mt={4} border="1px solid" borderColor="gray.300" borderRadius="md" bg="gray.50">
+//           <Input
+//             placeholder="Topic Title*"
+//             value={title}
+//             onChange={(e) => setTitle(e.target.value)}
+//             mb={4}
+//           />
+//           <Textarea
+//             placeholder="Description"
+//             value={description}
+//             onChange={(e) => setDescription(e.target.value)}
+//             mb={4}
+//           />
+
+//           {/* Course Select */}
+//           <SelectRoot
+//             collection={options}
+//             value={selectedOption}
+//             onValueChange={(value) => setSelectedOption(value)}
+//             size="sm"
+//             width="100%"
+//             mb={4}
+//           >
+//             <SelectTrigger>
+//               <SelectValueText placeholder="Select Course" />
+//             </SelectTrigger>
+//             <SelectContent>
+//               {options.items.map((item) => (
+//                 <SelectItem item={item} key={item.value}>
+//                   {item.label}
+//                 </SelectItem>
+//               ))}
+//             </SelectContent>
+//           </SelectRoot>
+
+//           {/* Tag Select */}
+//           <SelectRoot
+//             collection={tagOptions}
+//             value=""
+//             onValueChange={(value) => {
+//               if (!selectedTags.includes(value)) {
+//                 setSelectedTags([...selectedTags, value]);
+//               }
+//             }}
+//             size="sm"
+//             width="100%"
+//             mb={4}
+//           >
+//             <SelectTrigger>
+//               <SelectValueText placeholder="Select Tag" />
+//             </SelectTrigger>
+//             <SelectContent>
+//               {tagOptions.items.map((item) => (
+//                 <SelectItem item={item} key={item.value}>
+//                   {item.label}
+//                 </SelectItem>
+//               ))}
+//             </SelectContent>
+//           </SelectRoot>
+
+//           {/* Display Selected Tags */}
+//           <Box mb={4}>
+//             {selectedTags.map((tag, index) => (
+//               <Tag key={index} borderRadius="full" variant="solid" colorScheme="blue" mr={2} mb={2}>
+//                 {tag}
+//               </Tag>
+//             ))}
+//           </Box>
+
+//           <Button 
+//             colorScheme="teal" 
+//             gap="100"
+//             onClick={handleCreatePost}
+//           >
+//             Post Your Question or Note!
+//           </Button>
+//         </Box>
+//       )}
+//     </Box>
+//   );
+// };
+
+// export default MakePostButton;
\ No newline at end of file

From ab6c05371243191d6fdf39d7fee2cee99b0cc426 Mon Sep 17 00:00:00 2001
From: himansig7 <himansig7@gmail.com>
Date: Thu, 5 Dec 2024 20:01:47 -0800
Subject: [PATCH 2/2] Updated post to use react-select + tag dropdown

---
 backend/yarn.lock                             |   5 +
 .../src/home_components/MakePostButton.jsx    | 334 ++++++------------
 package-lock.json                             | 109 +++++-
 package.json                                  |   3 +-
 4 files changed, 230 insertions(+), 221 deletions(-)

diff --git a/backend/yarn.lock b/backend/yarn.lock
index 3561719..7d6c4dd 100644
--- a/backend/yarn.lock
+++ b/backend/yarn.lock
@@ -537,6 +537,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
diff --git a/frontend/src/home_components/MakePostButton.jsx b/frontend/src/home_components/MakePostButton.jsx
index 40d8b2b..ea3d9ac 100644
--- a/frontend/src/home_components/MakePostButton.jsx
+++ b/frontend/src/home_components/MakePostButton.jsx
@@ -1,64 +1,101 @@
-import React, { useState } from 'react';
-import { Box, Button, Input, Textarea, createListCollection} from '@chakra-ui/react';
+
+import React, { useState } from "react"
 import {
-  SelectContent,
-  SelectItem,
-  SelectLabel,
-  SelectRoot,
-  SelectTrigger,
-  SelectValueText,
-} from "../components/ui/select"
-import axios from 'axios';
+  Box,
+  Button,
+  Input,
+  Textarea,
+} from "@chakra-ui/react"
+import Select from "react-select" // Import react-select
+import axios from "axios"
 
 const MakePostButton = ({ setPosts, courses }) => {
-  const [showCreatePost, setShowCreatePost] = useState(false);
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [tags, setTags] = useState([]);
-  const [tagInput, setTagInput] = useState('');
-
-
-  const [selectedOption, setSelectedOption] = useState("") // Track selected option
-  const options = createListCollection({
-    items: courses.map(course => ({ label: course, value: course })), // Line 18
-  });
+  const [showCreatePost, setShowCreatePost] = useState(false)
+  const [title, setTitle] = useState("")
+  const [description, setDescription] = useState("")
+  const [selectedOption, setSelectedOption] = useState("") // Track selected course
+  const [tags, setTags] = useState([]) // Track selected tags
+
+  const courseOptions = courses.map((course) => ({
+    label: course,
+    value: course,
+  }))
+
+  const tagOptions = [
+    { label: "Group Study", value: "group_study" },
+    { label: "One-on-One", value: "one_on_one" },
+    { label: "Online", value: "online" },
+    { label: "In-Person", value: "in_person" },
+    { label: "Study Over Coffee", value: "study_over_coffee" },
+    { label: "Study in Library", value: "study_in_library" },
+    { label: "Study at Home", value: "study_at_home" },
+    { label: "Morning Study", value: "morning_study" },
+    { label: "Afternoon Study", value: "afternoon_study" },
+    { label: "Evening Study", value: "evening_study" },
+    { label: "Late Night Study", value: "late_night_study" },
+    { label: "Weekend Study", value: "weekend_study" },
+    { label: "Exam Prep", value: "exam_prep" },
+    { label: "Homework Help", value: "homework_help" },
+    { label: "Research Paper Writing", value: "research_paper_writing" },
+    { label: "Project Collaboration", value: "project_collaboration" },
+    { label: "Study for Quizzes", value: "study_for_quizzes" },
+    { label: "Assignment Help", value: "assignment_help" },
+    { label: "Discussion & Debates", value: "discussion_debates" },
+    { label: "Quiet Space", value: "quiet_space" },
+    { label: "Music-Friendly", value: "music_friendly" },
+    { label: "Coffee Shop", value: "coffee_shop" },
+    { label: "Library", value: "library" },
+    { label: "Outdoors", value: "outdoors" },
+    { label: "Co-Working Space", value: "co_working_space" },
+    { label: "At-Home Study", value: "at_home_study" },
+  ]
+  
 
   const handleCreatePost = async () => {
     try {
-      const response = await axios.post('http://localhost:5000/api/posts', {
+      const response = await axios.post("http://localhost:5000/api/posts", {
         title,
         description,
-        tags,
-      });
-
-      // Update the posts in HomePage
-      setPosts((prevPosts) => [response.data, ...prevPosts]);
-
-      // Clear the form and hide the creation area
-      setTitle('');
-      setDescription('');
-      setTags([]);
-      setTagInput('');
-      setShowCreatePost(false);
+        course: selectedOption,
+        tags: tags.map((tag) => tag.value), // Send tag values
+      })
+
+      setPosts((prevPosts) => [response.data, ...prevPosts])
+      setTitle("")
+      setDescription("")
+      setTags([])
+      setSelectedOption("")
+      setShowCreatePost(false)
     } catch (error) {
-      console.error("Error creating post:", error);
+      console.error("Error creating post:", error)
     }
-  };
+  }
 
   return (
     <Box>
       {/* Toggle Button */}
-      <Button colorScheme="blue" onClick={() => setShowCreatePost(!showCreatePost)}>
-        {showCreatePost ? 'Cancel' : '📃 New Post'}
+      <Button
+        colorScheme="blue"
+        onClick={() => setShowCreatePost(!showCreatePost)}
+      >
+        {showCreatePost ? "Cancel" : "📃 New Post"}
       </Button>
 
-      {/* Post Creation Form */}
       {showCreatePost && (
-        <Box p={4} mt={4} border="1px solid" borderColor="gray.300" borderRadius="md" bg="gray.50">
+        <Box
+          p={4}
+          mt={4}
+          border="1px solid"
+          borderColor="gray.300"
+          borderRadius="md"
+          bg="gray.50"
+        >
           <Input
             placeholder="Topic Title*"
             value={title}
             onChange={(e) => setTitle(e.target.value)}
+            variant="outline"
+            size="md"
             mb={4}
           />
           <Textarea
@@ -66,191 +103,52 @@ const MakePostButton = ({ setPosts, courses }) => {
             value={description}
             onChange={(e) => setDescription(e.target.value)}
             mb={4}
+            variant="outline"
+            size="md"
           />
 
-          {/*Select */}
-          <SelectRoot
-            collection={options}
-            value={selectedOption}
-            onValueChange={(value) => setSelectedOption(value)}
-            size="sm"
-            width="100%"
-            mb={4}
-          >
-            <SelectTrigger>
-              <SelectValueText placeholder="Select Course" />
-            </SelectTrigger>
-            <SelectContent>
-              {options.items.map((item) => (
-                <SelectItem item={item} key={item.value}>
-                  {item.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </SelectRoot>
-
+          {/* Course Select */}
+          <Select
+            options={courseOptions}
+            value={courseOptions.find((option) => option.value === selectedOption)}
+            onChange={(selected) => setSelectedOption(selected.value)}
+            placeholder="Select Related Course"
+            variant="outline"
+            size="md"
+            isClearable
+            styles={{
+              container: (provided) => ({
+                ...provided,
+                marginBottom: "16px",
+              }),
+            }}
+          />
 
-          <Button 
-          colorScheme="teal" 
-          gap ="100"
+          {/* Tag Multi-Select */}
+          <Select
+            options={tagOptions}
+            value={tags}
+            onChange={(selected) => setTags(selected || [])} // Handle deselection
+            placeholder="Search or Select Tags"
+            variant="outline"
+            size="md"
+            isMulti
+            styles={{
+              container: (provided) => ({
+                ...provided,
+                marginBottom: "16px",
+              }),
+            }}
+            
+          />
 
-          onClick={handleCreatePost}>
+          <Button colorScheme="teal" onClick={handleCreatePost}>
             Post Your Question or Note!
           </Button>
         </Box>
       )}
     </Box>
-  );
-};
-
-export default MakePostButton;
-
-// import React, { useState } from 'react';
-// import { Box, Button, Input, Textarea, createListCollection } from '@chakra-ui/react';
-// import {
-//   SelectContent,
-//   SelectItem,
-//   SelectLabel,
-//   SelectRoot,
-//   SelectTrigger,
-//   SelectValueText,
-//   Tag, 
-// } from "../components/ui/select";
-// import axios from 'axios';
-
-// const MakePostButton = ({ setPosts, courses }) => {
-//   const [showCreatePost, setShowCreatePost] = useState(false);
-//   const [title, setTitle] = useState('');
-//   const [description, setDescription] = useState('');
-//   const [tags, setTags] = useState([]);
-//   const [tagInput, setTagInput] = useState('');
-//   const [selectedTags, setSelectedTags] = useState([]); // Line 16
-
-//   const [selectedOption, setSelectedOption] = useState(""); // Track selected option
-//   const options = createListCollection({
-//     items: courses.map(course => ({ label: course, value: course })), // Line 18
-//   });
-
-//   const tagOptions = createListCollection({
-//     items: [
-//       { label: "Homework", value: "homework" },
-//       { label: "Exam", value: "exam" },
-//       { label: "Project", value: "project" },
-//     ],
-//   });
-
-//   const handleCreatePost = async () => {
-//     try {
-//       const response = await axios.post('http://localhost:5000/api/posts', {
-//         title,
-//         description,
-//         tags: selectedTags,
-//       });
-
-//       // Update the posts in HomePage
-//       setPosts((prevPosts) => [response.data, ...prevPosts]);
-
-//       // Clear the form and hide the creation area
-//       setTitle('');
-//       setDescription('');
-//       setTags([]);
-//       setTagInput('');
-//       setSelectedTags([]);
-//       setShowCreatePost(false);
-//     } catch (error) {
-//       console.error("Error creating post:", error);
-//     }
-//   };
-
-//   return (
-//     <Box>
-//       {/* Toggle Button */}
-//       <Button colorScheme="blue" onClick={() => setShowCreatePost(!showCreatePost)}>
-//         {showCreatePost ? 'Cancel' : '📃 New Post'}
-//       </Button>
-
-//       {/* Post Creation Form */}
-//       {showCreatePost && (
-//         <Box p={4} mt={4} border="1px solid" borderColor="gray.300" borderRadius="md" bg="gray.50">
-//           <Input
-//             placeholder="Topic Title*"
-//             value={title}
-//             onChange={(e) => setTitle(e.target.value)}
-//             mb={4}
-//           />
-//           <Textarea
-//             placeholder="Description"
-//             value={description}
-//             onChange={(e) => setDescription(e.target.value)}
-//             mb={4}
-//           />
-
-//           {/* Course Select */}
-//           <SelectRoot
-//             collection={options}
-//             value={selectedOption}
-//             onValueChange={(value) => setSelectedOption(value)}
-//             size="sm"
-//             width="100%"
-//             mb={4}
-//           >
-//             <SelectTrigger>
-//               <SelectValueText placeholder="Select Course" />
-//             </SelectTrigger>
-//             <SelectContent>
-//               {options.items.map((item) => (
-//                 <SelectItem item={item} key={item.value}>
-//                   {item.label}
-//                 </SelectItem>
-//               ))}
-//             </SelectContent>
-//           </SelectRoot>
-
-//           {/* Tag Select */}
-//           <SelectRoot
-//             collection={tagOptions}
-//             value=""
-//             onValueChange={(value) => {
-//               if (!selectedTags.includes(value)) {
-//                 setSelectedTags([...selectedTags, value]);
-//               }
-//             }}
-//             size="sm"
-//             width="100%"
-//             mb={4}
-//           >
-//             <SelectTrigger>
-//               <SelectValueText placeholder="Select Tag" />
-//             </SelectTrigger>
-//             <SelectContent>
-//               {tagOptions.items.map((item) => (
-//                 <SelectItem item={item} key={item.value}>
-//                   {item.label}
-//                 </SelectItem>
-//               ))}
-//             </SelectContent>
-//           </SelectRoot>
-
-//           {/* Display Selected Tags */}
-//           <Box mb={4}>
-//             {selectedTags.map((tag, index) => (
-//               <Tag key={index} borderRadius="full" variant="solid" colorScheme="blue" mr={2} mb={2}>
-//                 {tag}
-//               </Tag>
-//             ))}
-//           </Box>
-
-//           <Button 
-//             colorScheme="teal" 
-//             gap="100"
-//             onClick={handleCreatePost}
-//           >
-//             Post Your Question or Note!
-//           </Button>
-//         </Box>
-//       )}
-//     </Box>
-//   );
-// };
+  )
+}
 
-// export default MakePostButton;
\ No newline at end of file
+export default MakePostButton
diff --git a/package-lock.json b/package-lock.json
index 1c199fa..f0e6c10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
         "@chakra-ui/react": "^3.2.3",
         "@emotion/react": "^11.13.5",
         "next-themes": "^0.4.3",
-        "react-icons": "^5.4.0"
+        "react-icons": "^5.4.0",
+        "react-select": "^5.8.3"
       }
     },
     "node_modules/@ark-ui/react": {
@@ -515,6 +516,24 @@
       "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.0.0.tgz",
+      "integrity": "sha512-MY3oPudxvMYyesqs/kW1Bh8y9VqSmf+tzqw3ae8a9DZW68pUe3zAdHeI1jc6iAysuRdACnVknHP8AhwD4/dxtg==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.11",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
+      "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@zag-js/accordion": {
       "version": "0.77.1",
       "resolved": "https://registry.npmjs.org/@zag-js/accordion/-/accordion-0.77.1.tgz",
@@ -1415,6 +1434,16 @@
         }
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -1571,7 +1600,6 @@
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -1579,6 +1607,12 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz",
+      "integrity": "sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -1595,6 +1629,15 @@
         "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -1652,6 +1695,17 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
       "license": "ISC"
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-compare": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/proxy-compare/-/proxy-compare-3.0.0.tgz",
@@ -1709,6 +1763,43 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-select": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/react-select/-/react-select-5.8.3.tgz",
+      "integrity": "sha512-lVswnIq8/iTj1db7XCG74M/3fbGB6ZaluCzvwPGT5ZOjCdL/k0CLWhEK0vCBLuU5bHTEf6Gj8jtSvi+3v+tO1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/react": "^11.8.1",
+        "@floating-ui/dom": "^1.0.1",
+        "@types/react-transition-group": "^4.4.0",
+        "memoize-one": "^6.0.0",
+        "prop-types": "^15.6.0",
+        "react-transition-group": "^4.3.0",
+        "use-isomorphic-layout-effect": "^1.1.2"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -1796,6 +1887,20 @@
       "integrity": "sha512-MJu7ypHq6QasgF5YRTjqscSzQp/W11zoUk6kvmlH+fmWEs63Y0Eib13hYFwAzagRJcVY8WVnlV+eBDUGMJ5IbA==",
       "license": "MIT"
     },
+    "node_modules/use-isomorphic-layout-effect": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz",
+      "integrity": "sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yaml": {
       "version": "1.10.2",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
diff --git a/package.json b/package.json
index 3c1ffa8..fe18686 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "@chakra-ui/react": "^3.2.3",
     "@emotion/react": "^11.13.5",
     "next-themes": "^0.4.3",
-    "react-icons": "^5.4.0"
+    "react-icons": "^5.4.0",
+    "react-select": "^5.8.3"
   }
 }