ResourceInputDrawer, NewDrawerButton, Format Table

compass/components/Drawer/ResourceInputDrawer.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+
+const ResourceInputDrawer = ({ isOpen, setIsOpen, setData }) => {
+    const [resourceContent, setResourceContent] = useState({
+        name: "",
+        link: "",
+        program: "",
+        summary: "",
+    });
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setResourceContent((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleSave = () => {
+        setData((prevData) => [...prevData, resourceContent]);
+        setIsOpen(false); // Close drawer after saving
+    };
+
+    const toggleDrawerClass = isOpen ? "translate-x-0 shadow-xl" : "translate-x-full";
+
+    return (
+        <div
+            className={`fixed top-0 right-0 w-1/2 h-full bg-white transform ease-in-out duration-300 z-20 ${toggleDrawerClass}`}
+        >
+            <div className="p-4 flex justify-between items-center border-b">
+                <h2 className="text-lg font-medium text-gray-800">Add New Resource</h2>
+                <button onClick={() => setIsOpen(false)} className="text-gray-500">
+                    Close
+                </button>
+            </div>
+            <div className="p-4">
+                <label className="block text-sm font-medium text-gray-700">Name</label>
+                <input
+                    type="text"
+                    name="name"
+                    value={resourceContent.name}
+                    onChange={handleInputChange}
+                    className="w-full p-2 mt-1 border border-gray-300 rounded"
+                />
+
+                <label className="block mt-4 text-sm font-medium text-gray-700">Link</label>
+                <input
+                    type="url"
+                    name="link"
+                    value={resourceContent.link}
+                    onChange={handleInputChange}
+                    className="w-full p-2 mt-1 border border-gray-300 rounded"
+                />
+
+                <label className="block mt-4 text-sm font-medium text-gray-700">Program</label>
+                <input
+                    type="text"
+                    name="program"
+                    value={resourceContent.program}
+                    onChange={handleInputChange}
+                    className="w-full p-2 mt-1 border border-gray-300 rounded"
+                />
+
+                <label className="block mt-4 text-sm font-medium text-gray-700">Summary</label>
+                <textarea
+                    name="summary"
+                    value={resourceContent.summary}
+                    onChange={handleInputChange}
+                    className="w-full p-2 mt-1 border border-gray-300 rounded"
+                />
+
+                <div className="mt-4 flex justify-end">
+                    <button
+                        onClick={handleSave}
+                        className="px-4 py-2 bg-blue-500 text-white rounded"
+                    >
+                        Save
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ResourceInputDrawer;

compass/components/Table/NewDrawerButton.tsx

@@ -0,0 +1,43 @@
+import Drawer from "@/components/Drawer/Drawer";
+import { PlusIcon } from "@heroicons/react/24/solid";
+import { Dispatch, SetStateAction, useState } from "react";
+
+type NewDrawerButtonProps = {
+    title?: string;
+    setData: Dispatch<SetStateAction<any>>;
+};
+
+export function NewDrawerButton({ title = "New", setData }: NewDrawerButtonProps) {
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+    const handleOpenDrawer = () => {
+        setIsDrawerOpen(true);
+    };
+
+    const handleCloseDrawer = () => {
+        setIsDrawerOpen(false);
+    };
+
+    return (
+        <>
+            <button
+                className="flex items-center text-gray-500 hover:text-gray-700 font-medium border border-gray-200 bg-white shadow-sm hover:bg-gray-50 p-2 rounded-md"
+                onClick={handleOpenDrawer}
+            >
+                <PlusIcon className="inline h-4 mr-1" />
+                {title}
+            </button>
+            {isDrawerOpen && (
+                <Drawer
+                    title="Add New Data"
+                    rowContent={{}}
+                    setData={setData}
+                    onSave={handleCloseDrawer}
+                >
+                    <p className="p-4 text-gray-600">Drawer content goes here...</p>
+                </Drawer>
+            )}
+        </>
+    );
+}
+

compass/components/Table/Table.tsx

@@ -19,6 +19,8 @@ import { PlusIcon } from "@heroicons/react/24/solid";
 import { rankItem } from "@tanstack/match-sorter-utils";
 import { RowOptionMenu } from "./RowOptionMenu";
 import DataPoint from "@/utils/models/DataPoint";
+import { NewDrawerButton } from "./NewDrawerButton";
+import ResourceInputDrawer from "../Drawer/ResourceInputDrawer";
 
 type TableProps<T extends DataPoint> = {
     data: T[];
@@ -56,6 +58,9 @@ export default function Table<T extends DataPoint>({
 }: TableProps<T>) {
     const columnHelper = createColumnHelper<T>();
 
+    /** Handle input drawer visibility  */
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
     /** Sorting function based on visibility */
     const visibilitySort = (a: T, b: T) =>
         a.visible === b.visible ? 0 : a.visible ? -1 : 1;
@@ -148,6 +153,7 @@ export default function Table<T extends DataPoint>({
         return rowData;
     };
 
+
     return (
         <div className="flex flex-col">
             <div className="flex flex-row justify-end">
@@ -210,16 +216,25 @@ export default function Table<T extends DataPoint>({
                         <td
                             className="p-3 border-y border-gray-200 text-gray-600 hover:bg-gray-50"
                             colSpan={100}
-                            onClick={addData}
                         >
-                            <span className="flex ml-1 text-gray-500">
-                                <PlusIcon className="inline h-4 mr-1" />
-                                New
-                            </span>
+                            <button
+                                className="text-gray-500 hover:text-gray-700 font-medium border border-gray-200 bg-white shadow-sm hover:bg-gray-50 p-2 rounded-md"
+                                onClick={() => setIsDrawerOpen(true)} // Opens the drawer
+                            >
+                                + New
+                            </button>
                         </td>
                     </tr>
                 </tfoot>
             </table>
+            {/* Slide-in ResourceInputDrawer */}
+            <ResourceInputDrawer
+                    isOpen={isDrawerOpen}
+                    setIsOpen={setIsDrawerOpen}
+                    setData={setData}
+            />
+            
+
         </div>
     );
 }