proof of concept

compass/components/NewDrawer/NewDrawer.tsx

@@ -0,0 +1,112 @@
+import React, { useState, FunctionComponent } from "react";
+import {
+    ChevronDoubleLeftIcon,
+    StarIcon as SolidStarIcon,
+    UserIcon,
+} from "@heroicons/react/24/solid";
+import {
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+    StarIcon as OutlineStarIcon,
+    ListBulletIcon,
+} from "@heroicons/react/24/outline";
+import TagsInput from "../TagsInput/Index";
+
+type Field = {
+    icon: JSX.Element;
+    name: JSX.Element;
+    input: JSX.Element;
+}
+
+type DrawerProps = {
+    header: string;
+    fields: Field[];
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
+};
+
+function NewDrawer({ header, fields, onSubmit }: DrawerProps)  {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isFull, setIsFull] = useState(false);
+    const [isFavorite, setIsFavorite] = useState(false);
+
+    const toggleDrawer = () => setIsOpen(!isOpen);
+    const toggleDrawerFullScreen = () => setIsFull(!isFull);
+    const toggleFavorite = () => setIsFavorite(!isFavorite);
+
+    const drawerClassName = `fixed top-0 right-0 ${
+        isFull ? "w-full" : "w-1/2"
+    } h-full bg-white transform ease-in-out duration-300 z-20 ${
+        isOpen ? "translate-x-0 shadow-xl" : "translate-x-full"
+    }`;
+
+    return (
+        <div>
+            <button
+                className="ml-2 text-xs uppercase opacity-0 group-hover:opacity-100 text-gray-500 font-medium border border-gray-200 bg-white shadow hover:bg-gray-50 p-2 rounded-md"
+                onClick={toggleDrawer}
+            >
+                Open
+            </button>
+            <div className={drawerClassName}>
+                <div className="flex items-center justify-between p-4">
+                    <h2 className="text-lg text-gray-800 font-semibold">
+                        {header}
+                    </h2>
+                    <div>
+                        <button
+                            onClick={toggleFavorite}
+                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
+                        >
+                            {isFavorite ? (
+                                <SolidStarIcon className="h-5 w-5" />
+                            ) : (
+                                <OutlineStarIcon className="h-5 w-5" />
+                            )}
+                        </button>
+                        <button
+                            onClick={toggleDrawerFullScreen}
+                            className="py-2 text-gray-500 hover:text-gray-800 mr-2"
+                        >
+                            {isFull ? (
+                                <ArrowsPointingInIcon className="h-5 w-5" />
+                            ) : (
+                                <ArrowsPointingOutIcon className="h-5 w-5" />
+                            )}
+                        </button>
+                        <button
+                            onClick={toggleDrawer}
+                            className="py-2 text-gray-500 hover:text-gray-800"
+                        >
+                            <ChevronDoubleLeftIcon className="h-5 w-5" />
+                        </button>
+                    </div>
+                </div>
+                <div className="p-4">
+                    <form onSubmit={onSubmit}>
+                        <table className="p-4">
+                            <tbody className="items-center">
+                                {   
+                                    fields.map((field, index) => (
+                                        <tr className="w-full text-xs items-center flex flex-row justify-between" key={index}>
+                                            <div className="flex flex-row space-x-2 text-gray-500 items-center">
+                                                <td>{field.icon}</td>
+                                                <td className="w-32">{field.name}</td>
+                                            </div>
+                                            <td className="w-3/4 p-2 pl-0">
+                                                {field.input}
+                                            </td>
+                                        </tr>
+                                    ))
+                                }
+                                <button type="submit">Submit</button>
+                            </tbody>
+                        </table>
+                    </form>
+                    <br />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NewDrawer;

compass/components/NewDrawer/NewResourceDrawer.tsx

@@ -0,0 +1,86 @@
+import { FunctionComponent, useState } from "react";
+import NewDrawer from "./NewDrawer";
+import Resource from "@/utils/models/Resource";
+import {
+    ChevronDoubleLeftIcon,
+    StarIcon as SolidStarIcon,
+    UserIcon,
+} from "@heroicons/react/24/solid";
+import {
+    ArrowsPointingOutIcon,
+    ArrowsPointingInIcon,
+    StarIcon as OutlineStarIcon,
+    ListBulletIcon,
+} from "@heroicons/react/24/outline";
+import TagsInput from "../TagsInput/Index";
+import useTagsHandler from "../TagsInput/TagsHandler";
+
+type NewResourceDrawerProps = {
+    rowContent: Resource;
+    updateData: (input: any) => void
+};
+
+const NewResourceDrawer: FunctionComponent<NewResourceDrawerProps> = ({ rowContent, updateData }) => {
+    const [input, setInput] = useState({
+        name: rowContent.name,
+        link: rowContent.link,
+        summary: rowContent.summary
+    })
+
+    const tagProps = useTagsHandler([
+        "domestic",
+        "economic",
+        "community",
+    ]);
+    
+    const handleChange = (field: string, change: string) => {
+        setInput(prev => ({ ...prev, [field]: change}))
+    }
+
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault();
+        updateData(input);
+    }
+
+    const fields = [
+        {
+            icon: <UserIcon className="h-4 w-4" />,
+            name: <>Name</>,
+            input: (
+                <input 
+                    onChange={e => handleChange('name', e.target.value)}
+                    value={input.name}
+                />
+            )
+        },
+        {
+            icon: <ListBulletIcon className="h-4 w-4" />,
+            name: <>Link</>,
+            input: (
+                <input 
+                    onChange={e => handleChange('link', e.target.value)}
+                    value={input.link}
+                />
+            )
+        },
+        {
+            icon: <ListBulletIcon className="h-4 w-4" />,
+            name: <>Program</>,
+            input: <TagsInput presetValue={rowContent.program} {...tagProps} />
+        },
+        {
+            icon: <ListBulletIcon className="h-4 w-4" />,
+            name: <>Summary</>,
+            input: (
+                <input 
+                    onChange={e => handleChange('summary', e.target.value)}
+                    value={input.summary}
+                />
+            )
+        }
+    ]
+
+    return <NewDrawer header={rowContent.name} fields={fields} onSubmit={handleSubmit}/>
+}
+
+export default NewResourceDrawer;

compass/components/Sidebar/Sidebar.tsx

@@ -104,7 +104,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                                 icon={<BookOpenIcon />}
                                 text="Training Manuals"
                                 active={true}
-                                redirect="/training-manuals"
+                                redirect="/training-manual"
                             />
                         </nav>
                     </div>

compass/components/Table/NewRowOpenAction.tsx

@@ -0,0 +1,27 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import NewResourceDrawer from "../NewDrawer/NewResourceDrawer";
+import Resource from "@/utils/models/Resource";
+
+type RowOpenActionProps = {
+    title: string;
+    rowData: Resource;
+    setData: Dispatch<SetStateAction<Resource[]>>;
+};
+
+export default function ResourceRowOpenAction({
+    title,
+    rowData,
+    setData,
+}: RowOpenActionProps) {
+    return (
+        <div className="font-semibold group flex flex-row items-center justify-between pr-2">
+            {title}
+            <span>
+                <NewResourceDrawer
+                    rowContent={rowData}
+                    updateData={(i) => {alert(JSON.stringify(i))}}
+                />
+            </span>
+        </div>
+    );
+}

compass/components/Table/ResourceTable.tsx

@@ -2,10 +2,10 @@ import { Bars2Icon } from "@heroicons/react/24/solid";
 import { Dispatch, SetStateAction, useState } from "react";
 import useTagsHandler from "@/components/TagsInput/TagsHandler";
 import { ColumnDef, createColumnHelper } from "@tanstack/react-table";
-import { RowOpenAction } from "@/components/Table/RowOpenAction";
 import Table from "@/components/Table/Table";
 import TagsInput from "@/components/TagsInput/Index";
 import Resource from "@/utils/models/Resource";
+import ResourceRowOpenAction from "./NewRowOpenAction";
 
 type ResourceTableProps = {
     data: Resource[];
@@ -32,7 +32,7 @@ export default function ResourceTable({ data, setData }: ResourceTableProps) {
                 </>
             ),
             cell: (info) => (
-                <RowOpenAction
+                <ResourceRowOpenAction
                     title={info.getValue()}
                     rowData={info.row.original}
                     setData={setData}