path selecting element

src/app/addCourse/AddCourseToGlobalSettingsForm.tsx

@@ -1,4 +1,5 @@
 "use client";
+import ButtonSelect from "@/components/ButtonSelect";
 import { DayOfWeekInput } from "@/components/form/DayOfWeekInput";
 import SelectInput from "@/components/form/SelectInput";
 import { Spinner } from "@/components/Spinner";
@@ -37,7 +38,7 @@ const sampleCompose = `services:
       - ~/projects/faculty/4850_AdvancedFE/2024-fall-alex/modules:/app/storage/advanced_frontend
 `;
 
-export default function NewCourseForm() {
+export default function AddNewCourseToGlobalSettingsForm() {
   const router = useRouter();
   const today = useMemo(() => new Date(), []);
   const { data: canvasTerms } = useCanvasTermsQuery(today);
@@ -61,12 +62,13 @@ export default function NewCourseForm() {
 
   return (
     <div>
-      <SelectInput
-        value={selectedTerm}
-        setValue={setSelectedTerm}
-        label={"Canvas Term"}
+      <ButtonSelect
         options={canvasTerms}
-        getOptionName={(t) => t.name}
+        getOptionName={(t) => t?.name ?? ""}
+        setValue={setSelectedTerm}
+        value={selectedTerm}
+        label={"Canvas Term"}
+        center={true}
       />
       <SuspenseAndErrorHandling>
         {selectedTerm && (
@@ -184,12 +186,13 @@ function OtherSettings({
 
   return (
     <>
-      <SelectInput
+      <ButtonSelect
         value={selectedCanvasCourse}
         setValue={setSelectedCanvasCourse}
         label={"Course"}
         options={availableCourses}
-        getOptionName={(c) => c.name}
+        getOptionName={(c) => c?.name ?? ""}
+        center={true}
       />
       <SelectInput
         value={selectedDirectory}

src/app/addCourse/AddExistingCourseToGlobalSettings.tsx

@@ -0,0 +1,40 @@
+"use client";
+import ClientOnly from "@/components/ClientOnly";
+import { StoragePathSelector } from "@/components/form/StoragePathSelector";
+import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
+import { FC, useState } from "react";
+
+export const AddExistingCourseToGlobalSettings = () => {
+  const [showForm, setShowForm] = useState(false);
+  return (
+    <div>
+      <div className="flex justify-center">
+        <button className="" onClick={() => setShowForm((i) => !i)}>
+          Add Existing Course
+        </button>
+      </div>
+
+      <div className={" collapsible " + (showForm && "expand")}>
+        <div className="border rounded-md p-3 m-3">
+          <SuspenseAndErrorHandling>
+            <ClientOnly>{showForm && <ExistingCourseForm />}</ClientOnly>
+          </SuspenseAndErrorHandling>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ExistingCourseForm: FC<{}> = () => {
+  const [path, setPath] = useState("./");
+  return (
+    <div>
+      <h2>Add Existing Course</h2>
+      <StoragePathSelector
+        startingValue={path}
+        submitValue={setPath}
+        label={"Course Directory Path"}
+      />
+    </div>
+  );
+};

src/app/addCourse/AddNewCourse.tsx

@@ -1,16 +1,16 @@
 "use client";
 import React, { useState } from "react";
 import { SuspenseAndErrorHandling } from "@/components/SuspenseAndErrorHandling";
-import NewCourseForm from "./NewCourseForm";
+import AddNewCourseToGlobalSettingsForm from "./AddCourseToGlobalSettingsForm";
 import ClientOnly from "@/components/ClientOnly";
 
-export default function AddNewCourse() {
+export default function AddCourseToGlobalSettings() {
   const [showForm, setShowForm] = useState(false);
 
   return (
     <div>
       <div className="flex justify-center">
-        <button className="" onClick={() => setShowForm(true)}>
+        <button className="" onClick={() => setShowForm((i) => !i)}>
           Add New Course
         </button>
       </div>
@@ -18,7 +18,9 @@ export default function AddNewCourse() {
       <div className={" collapsible " + (showForm && "expand")}>
         <div className="border rounded-md p-3 m-3">
           <SuspenseAndErrorHandling>
-            <ClientOnly>{showForm && <NewCourseForm />}</ClientOnly>
+            <ClientOnly>
+              {showForm && <AddNewCourseToGlobalSettingsForm />}
+            </ClientOnly>
           </SuspenseAndErrorHandling>
         </div>
       </div>

src/app/course/[courseName]/modules/NewItemForm.tsx

@@ -153,9 +153,9 @@ export default function NewItemForm({
       <div>
         <ButtonSelect<"Assignment" | "Quiz" | "Page">
           options={["Assignment", "Quiz", "Page"]}
-          getName={(o) => o?.toString() ?? ""}
-          setSelectedOption={(t) => setType(t ?? "Assignment")}
-          selectedOption={type}
+          getOptionName={(o) => o?.toString() ?? ""}
+          setValue={(t) => setType(t ?? "Assignment")}
+          value={type}
           label="Type"
         />
       </div>
@@ -166,9 +166,9 @@ export default function NewItemForm({
         {type !== "Page" && (
           <ButtonSelect
             options={settings.assignmentGroups}
-            getName={(g) => g?.name ?? ""}
-            setSelectedOption={setAssignmentGroup}
-            selectedOption={assignmentGroup}
+            getOptionName={(g) => g?.name ?? ""}
+            setValue={setAssignmentGroup}
+            value={assignmentGroup}
             label="Assignment Group"
           />
         )}

src/app/page.tsx

@@ -1,5 +1,6 @@
 import CourseList from "./CourseList";
-import AddNewCourse from "./newCourse/AddNewCourse";
+import { AddExistingCourseToGlobalSettings } from "./addCourse/AddExistingCourseToGlobalSettings";
+import AddCourseToGlobalSettings from "./addCourse/AddNewCourse";
 import TodaysLectures from "./todaysLectures/TodaysLectures";
 
 export default async function Home() {
@@ -18,7 +19,36 @@ export default async function Home() {
         <TodaysLectures />
         <br />
         <br />
-        <AddNewCourse />
+        <AddCourseToGlobalSettings />
+        <AddExistingCourseToGlobalSettings />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
+        <br />
       </div>
     </main>
   );