diff --git a/compass/app/pages/page/page.tsx b/compass/app/pages/page/page.tsx index dce1122..391c81c 100644 --- a/compass/app/pages/page/page.tsx +++ b/compass/app/pages/page/page.tsx @@ -1,5 +1,7 @@ // pages/index.tsx "use client"; +import Image from 'next/image'; + import Drawer from '@/components/page/Drawer'; @@ -18,9 +20,21 @@ export default function Page() { }; return ( - <> -

Resources

- {pageContent} - +
+
+
+ Compass Center logo +

Untitled Page

+
+ {pageContent} +
+
); -}; \ No newline at end of file +}; + diff --git a/compass/components/page/Card.tsx b/compass/components/page/Card.tsx new file mode 100644 index 0000000..39894cb --- /dev/null +++ b/compass/components/page/Card.tsx @@ -0,0 +1,29 @@ +import React, { ReactNode, useState } from "react"; + + +interface TagProps { + text: string; + icon: React.ReactNode; + onClick?: (event: React.MouseEvent) => void; + children?: React.ReactNode; +} + + +const Card: React.FC = ({children, text, icon, onClick }) => { + return ( + + ); +}; + +export default Card; diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx index 217fbd2..624c92f 100644 --- a/compass/components/page/Drawer.tsx +++ b/compass/components/page/Drawer.tsx @@ -1,8 +1,10 @@ -import { FunctionComponent, ReactNode } from 'react'; +import { FunctionComponent, ReactElement, ReactNode } from 'react'; import Button from '@/components/Button' import React, { useState } from 'react'; -import {DATATYPE} from '@/utils/constants' -import InlineLink from '@/components/InlineLink' +import { ChevronDoubleLeftIcon } from '@heroicons/react/24/solid'; +import { BookmarkIcon, XMarkIcon } from "@heroicons/react/24/solid"; +import Card from '@/components/page/Card' + type DrawerProps = { @@ -15,62 +17,134 @@ type DrawerProps = { onSave?: (content: any) => void; }; +interface EditContent { + content: string; + isEditing: boolean; + } + + const Drawer: FunctionComponent = ({ title, children, onSave, editableContent }) => { const [isOpen, setIsOpen] = useState(false); const [isEditing, setIsEditing] = useState(false); - const [editContent, setEditContent] = useState(editableContent || ''); + const [editContents, setEditContents] = useState(editableContent || [{ content: '', isEditing: true }]); + const [currentCardText, setCurrentCardText] = useState(""); + const [currentCardIcon, setCurrentCardIcon] = useState(''); + const [error, setError] = useState(null); + const toggleDrawer = () => setIsOpen(!isOpen); - const toggleEditing = () => setIsEditing(!isEditing); - const handleContentChange = (event: React.ChangeEvent) => { - setEditContent(event.target.value); - }; + + const handleCardClick = (text: string, icon: ReactElement) => { + console.log('click') + toggleDrawer(); + setCurrentCardText(text); + setCurrentCardIcon(icon)}; + const toggleEditing = () => setIsEditing(!isEditing); + const handleInputChange = (index: number) => (event: React.ChangeEvent) => { + const newContents = editContents.map((item, idx) => idx === index ? { ...item, content: event.target.value } : item); + setEditContents(newContents); + }; 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 addInput = () => { + setEditContents([...editContents, { content: '', isEditing: true }]); + }; - const saveChanges = () => { - console.log(editContent); - if (onSave) { - onSave(editContent); + const saveIndividualChange = (index: number) => { + const content = editContents[index].content.trim(); + if (!content) { + setError("Input cannot be empty."); + return; } - setIsEditing(false); + + setError(null); // Clear error state if input passes validation + + const updatedContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: false } : item); + setEditContents(updatedContents); + + if (onSave) { + onSave(updatedContents); + } + }; + + const toggleEdit = (index: number) => { + const newContents = editContents.map((item, idx) => idx === index ? { ...item, isEditing: !item.isEditing } : item); + setEditContents(newContents); + }; + + const deleteInput = (index: number) => { + // Filter out the input at the given index + const filteredContents = editContents.filter((_, idx) => idx !== index); + setEditContents(filteredContents); }; - const addRow = () => { - - } return (
- + } text="Resources" onClick={() => handleCardClick("Resources", )}/>
-
-

{title}

+
+ + {currentCardIcon} + +

{currentCardText}

- - +
- {isEditing ? ( - <> - - Save - - ) : ( - children - )} -
+ { + editContents.map((item, index) => ( +
+ {item.isEditing ? ( + <> + + + + ) : ( + <> + {item.content} + + + )} + {/* Delete button moved here, outside of the editing conditional */} + +
+ )) +} + +
); }; -export default Drawer; \ No newline at end of file +export default Drawer; + diff --git a/compass/components/page/DropDown.tsx b/compass/components/page/DropDown.tsx new file mode 100644 index 0000000..dfda408 --- /dev/null +++ b/compass/components/page/DropDown.tsx @@ -0,0 +1,30 @@ +import React, { ChangeEvent, FunctionComponent } from 'react'; + +// Define the shape of a single option +interface DropdownOption { + label: string; + value: string | number; +} + +// Define the props for the Dropdown component +interface DropdownProps { + options: DropdownOption[]; + onChange: (event: ChangeEvent) => void; // Type for change event on + {options.map((option, index) => ( + + ))} + + ); +}; + +export default Dropdown; \ No newline at end of file diff --git a/compass/components/page/Field.tsx b/compass/components/page/Field.tsx deleted file mode 100644 index 9ee44b1..0000000 --- a/compass/components/page/Field.tsx +++ /dev/null @@ -1,4 +0,0 @@ -// components/Field.tsx -import { FunctionComponent, ReactNode } from 'react'; -import Button from '@/components/Button' -import React, { useState } from 'react';