From 9a9fd33f1970b4c506772d4677f7c8242e538a72 Mon Sep 17 00:00:00 2001
From: anikaahmed114 <aahm@unc.edu>
Date: Fri, 22 Mar 2024 17:13:14 -0400
Subject: [PATCH] added drawer component

---
 compass/app/pages/page/page.tsx    | 20 +++++++++
 compass/components/InlineLink.tsx  | 17 ++++---
 compass/components/page/Drawer.tsx | 71 ++++++++++++++++++++++++++++++
 compass/components/page/Field.tsx  |  4 ++
 4 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 compass/app/pages/page/page.tsx
 create mode 100644 compass/components/page/Drawer.tsx
 create mode 100644 compass/components/page/Field.tsx

diff --git a/compass/app/pages/page/page.tsx b/compass/app/pages/page/page.tsx
new file mode 100644
index 0000000..1a03610
--- /dev/null
+++ b/compass/app/pages/page/page.tsx
@@ -0,0 +1,20 @@
+// pages/index.tsx
+"use client";
+
+
+import Drawer from '@/components/page/Drawer';
+// import { Metadata } from 'next'
+import {ChangeEvent, useState} from "react";
+
+// export const metadata: Metadata = {
+//   title: 'Login',
+// }
+
+export default function Page()  {
+    return (
+      <>
+    <h1 className="text-2xl font-bold text-gray-700 sm:text-3xl">Resources</h1>
+    <Drawer title="My Drawer Title">hi</Drawer>
+      </>
+    );
+};
\ No newline at end of file
diff --git a/compass/components/InlineLink.tsx b/compass/components/InlineLink.tsx
index f2e45ef..018a5c3 100644
--- a/compass/components/InlineLink.tsx
+++ b/compass/components/InlineLink.tsx
@@ -1,15 +1,20 @@
 import React, { ReactNode } from 'react';
 
 interface Link {
-  href?: string;
-  children: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    href?: string;
+    children: ReactNode;
 }
 
-const InlineLink: React.FC<Link> = ({href = '#', children}) => {
+const InlineLink: React.FC<Link> = ({href = '#', children, onClick}) => {
     return (
-        <a href={href} className='text-sm text-purple-600 hover:underline font-semibold'>
-            {children}
-        </a>
+        <a 
+        onClick={onClick}
+        href={href} 
+        className="text-sm text-purple-600 hover:underline font-semibold"
+    >
+        {children}
+    </a>
     )
 }
 
diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx
new file mode 100644
index 0000000..6a1b712
--- /dev/null
+++ b/compass/components/page/Drawer.tsx
@@ -0,0 +1,71 @@
+import { FunctionComponent, ReactNode } from 'react';
+import Button from '@/components/Button'
+import React, { useState } from 'react';
+import {DATATYPE} from '@/utils/constants'
+import InlineLink from '@/components/InlineLink'
+
+
+type DrawerProps = {
+    title: string;
+    children: ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    type?: "button" | "submit" | "reset"; // specify possible values for type
+    disabled?: boolean;
+    editableContent?: DATATYPE; 
+};
+
+const Drawer: FunctionComponent<DrawerProps> = ({ title, children, editableContent }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [editContent, setEditContent] = useState(editableContent || '');
+
+    const toggleDrawer = () => setIsOpen(!isOpen);
+    const toggleEditing = () => setIsEditing(!isEditing);
+    const handleContentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setEditContent(event.target.value);
+    };
+
+    const drawerClassName = `fixed top-0 right-0 w-1/2 h-full bg-white shadow-xl transform ease-in-out duration-300 ${
+        isOpen ? "translate-x-0" : "translate-x-full"
+    }`;
+    
+    const saveChanges = () => {
+        setIsEditing(false);
+    };
+
+    const addRow = () => {
+        
+    }
+
+    return (
+        <div>
+            <Button onClick={toggleDrawer}>{isOpen ? "Close" : "Open"} Drawer</Button>
+            <div className={drawerClassName}>
+                <div className="flex items-center justify-between p-4 border-b">
+                    <h2>{title}</h2>
+                    <div>
+                        <Button onClick={toggleEditing}>{isEditing ? 'Cancel' : 'Edit'}</Button>
+                        <Button onClick={toggleDrawer}>&laquo;</Button>
+                    </div>
+                </div>
+                <div className="p-4">
+                    {isEditing ? (
+                        <>
+                            <input
+                                type= 'text'
+                                value={editContent}
+                                onChange={handleContentChange}
+                                className="border p-2 w-full"
+                            />
+                            <InlineLink onClick={saveChanges}>Save</InlineLink>
+                        </>
+                    ) : (
+                        children
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Drawer;
\ No newline at end of file
diff --git a/compass/components/page/Field.tsx b/compass/components/page/Field.tsx
new file mode 100644
index 0000000..9ee44b1
--- /dev/null
+++ b/compass/components/page/Field.tsx
@@ -0,0 +1,4 @@
+// components/Field.tsx
+import { FunctionComponent, ReactNode } from 'react';
+import Button from '@/components/Button'
+import React, { useState } from 'react';