diff --git a/compass/app/auth/new_password/page.tsx b/compass/app/auth/new_password/page.tsx
index 3fb3e83..1d9ca52 100644
--- a/compass/app/auth/new_password/page.tsx
+++ b/compass/app/auth/new_password/page.tsx
@@ -2,8 +2,6 @@
"use client";
import { useState, useEffect } from 'react';
import Button from '@/components/Button';
-
-import Paper from '@/components/auth/Paper';
import PasswordInput from '@/components/auth/PasswordInput';
import ErrorBanner from '@/components/auth/ErrorBanner';
diff --git a/compass/app/layout.tsx b/compass/app/layout.tsx
index 2509089..e9ef9ca 100644
--- a/compass/app/layout.tsx
+++ b/compass/app/layout.tsx
@@ -1,20 +1,16 @@
-import '../styles/globals.css';
-import { Metadata } from 'next'
-
-export const metadata: Metadata = {
- title: 'Login',
-}
-
-export default function RootLayout({
- // Layouts must accept a children prop.
- // This will be populated with nested layouts or pages
- children,
-}: {
- children: React.ReactNode
-}) {
- return (
-
- {children}
-
- )
+import '../styles/globals.css';
+
+
+export default function RootLayout({
+ // Layouts must accept a children prop.
+ // This will be populated with nested layouts or pages
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+
+ {children}
+
+ )
}
\ No newline at end of file
diff --git a/compass/app/pages/page/page.tsx b/compass/app/pages/page/page.tsx
new file mode 100644
index 0000000..dce1122
--- /dev/null
+++ b/compass/app/pages/page/page.tsx
@@ -0,0 +1,26 @@
+// 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() {
+ const [pageContent, setPageContent] = useState("")
+
+ const handleDrawerContentChange = (newContent) => {
+ setPageContent(newContent);
+ };
+
+ return (
+ <>
+
Resources
+
{pageContent}
+
+ );
+};
\ No newline at end of file
diff --git a/compass/app/resource/layout.tsx b/compass/app/resource/layout.tsx
new file mode 100644
index 0000000..bb7fddd
--- /dev/null
+++ b/compass/app/resource/layout.tsx
@@ -0,0 +1,37 @@
+"use client"
+
+import Sidebar from '@/components/resource/Sidebar';
+import React, { useState } from 'react';
+import { ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
+
+export default function RootLayout({
+
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+ return (
+
+ {/* button to open sidebar */}
+
setIsSidebarOpen(!isSidebarOpen)}
+ className={`fixed z-20 p-2 text-gray-500 hover:text-gray-800 left-0`}
+ aria-label={'Open sidebar'}
+ >
+ {!isSidebarOpen &&
+
+ {/* sidebar */}
+
+
+ {/* page ui */}
+
+ {children}
+
+
+ )
+}
\ No newline at end of file
diff --git a/compass/app/resource/page.tsx b/compass/app/resource/page.tsx
new file mode 100644
index 0000000..2e4f4cd
--- /dev/null
+++ b/compass/app/resource/page.tsx
@@ -0,0 +1,39 @@
+"use client"
+import Callout from "@/components/resource/Callout";
+import Card from "@/components/resource/Card";
+import { LandingSearchBar } from "@/components/resource/LandingSearchBar";
+import { BookOpenIcon, BookmarkIcon, ClipboardIcon } from "@heroicons/react/24/solid";
+import Image from 'next/image';
+
+export default function Page() {
+ return (
+
+ {/* icon + title */}
+
+
+
Compass Center Advocate Landing Page
+
+
+ Welcome! Below you will find a list of resources for the Compass Center's trained advocates. These materials serve to virtually provide a collection of advocacy, resource, and hotline manuals and information.
+ If you are an advocate looking for the contact information of a particular Compass Center employee, please directly contact your staff back-up or the person in charge of your training.
+
+
+
+ {/* link to different pages */}
+
+
+ {/* search bar */}
+
+
+
+ )
+}
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
) => void;
+ href?: string;
+ children: ReactNode;
}
-const InlineLink: React.FC
- {children}
-
+
+ {children}
+
)
}
diff --git a/compass/components/Input.tsx b/compass/components/Input.tsx
index d7fafc7..b8eff67 100644
--- a/compass/components/Input.tsx
+++ b/compass/components/Input.tsx
@@ -1,37 +1,37 @@
-import React, { FunctionComponent, InputHTMLAttributes, ReactNode, ChangeEvent } from 'react';
-
-type InputProps = InputHTMLAttributes & {
- icon?: ReactNode;
- title?: ReactNode;
- type?:ReactNode;
- placeholder?:ReactNode
- valid?:boolean;
- onChange: (event: ChangeEvent) => void;
-};
-
-const Input: FunctionComponent = ({ icon, type, title, placeholder, onChange, valid = true, ...rest }) => {
- return (
-
-
- {title}
-
-
- {icon}
-
-
-
-
& {
+ icon?: ReactNode;
+ title?: ReactNode;
+ type?:ReactNode;
+ placeholder?:ReactNode
+ valid?:boolean;
+ onChange: (event: ChangeEvent) => void;
+};
+
+const Input: FunctionComponent = ({ icon, type, title, placeholder, onChange, valid = true, ...rest }) => {
+ return (
+
+
+ {title}
+
+
+ {icon}
+
+
+
+
= ({ icon, title, children }) => {
+ return (
+
+ {/* icon + title */}
+
+ {/* data */}
+
+ {children}
+
+
= ({ children }) => {
return (
-
+
{children}
);
diff --git a/compass/components/page/Drawer.tsx b/compass/components/page/Drawer.tsx
new file mode 100644
index 0000000..217fbd2
--- /dev/null
+++ b/compass/components/page/Drawer.tsx
@@ -0,0 +1,76 @@
+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
) => void;
+ type?: "button" | "submit" | "reset"; // specify possible values for type
+ disabled?: boolean;
+ editableContent?: any;
+ onSave?: (content: any) => void;
+};
+
+const Drawer: FunctionComponent = ({ title, children, onSave, 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) => {
+ 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 = () => {
+ console.log(editContent);
+ if (onSave) {
+ onSave(editContent);
+ }
+ setIsEditing(false);
+ };
+
+ const addRow = () => {
+
+ }
+
+ return (
+
+
{isOpen ? "Close" : "Open"} Drawer
+
+
+
{title}
+
+ {isEditing ? 'Cancel' : 'Edit'}
+ «
+
+
+
+ {isEditing ? (
+ <>
+ Save
+
+ ) : (
+ children
+ )}
+
+
+
+ {children}
+
+ );
+};
+
+export default Callout;
\ No newline at end of file
diff --git a/compass/components/resource/Card.tsx b/compass/components/resource/Card.tsx
new file mode 100644
index 0000000..140542b
--- /dev/null
+++ b/compass/components/resource/Card.tsx
@@ -0,0 +1,20 @@
+import React, { ReactNode } from "react";
+
+
+interface TagProps {
+ text: string;
+ icon: React.ReactNode;
+}
+
+const Card: React.FC = ({ text, icon }) => {
+ return (
+
+
+ {icon}
+
+ {text}
+
+ );
+};
+
+export default Card;
\ No newline at end of file
diff --git a/compass/components/resource/LandingSearchBar.tsx b/compass/components/resource/LandingSearchBar.tsx
new file mode 100644
index 0000000..f52b6ba
--- /dev/null
+++ b/compass/components/resource/LandingSearchBar.tsx
@@ -0,0 +1,48 @@
+import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
+import React, { useState } from 'react';
+import Image from 'next/image';
+
+export const LandingSearchBar: React.FC = () => {
+ const [searchTerm, setSearchTerm] = useState('');
+
+ const handleSearchChange = (event: React.ChangeEvent) => {
+ setSearchTerm(event.target.value);
+ };
+
+ const clearSearch = () => {
+ setSearchTerm('');
+ };
+
+ return (
+
+ {/* searchbar */}
+
+
+
+ {/* input */}
+ {searchTerm && (
+
+
+ )}
+
+
+
+ {/* search results, for now since it's empty this is the default screen */}
+
+
Need to find something? Use the links or the search bar above to get your results.
+
+
>;
+}
+
+const Sidebar: React.FC = ({ setIsSidebarOpen }) => {
+ return (
+
+ {/* button to close sidebar */}
+
+ setIsSidebarOpen(false)}
+ className="py-2 text-gray-500 hover:text-gray-800"
+ aria-label="Close sidebar"
+ >
+
+
+
+
+ {/* user + logout button */}
+
+
+
+ {/* navigation menu */}
+
+
Pages
+
+
+
+
+
= ({ icon, text }) => {
+ return (
+
+
+ {icon}
+
+ {text}
+
+ );
+};
\ No newline at end of file
diff --git a/compass/components/resource/UserProfile.tsx b/compass/components/resource/UserProfile.tsx
new file mode 100644
index 0000000..0471596
--- /dev/null
+++ b/compass/components/resource/UserProfile.tsx
@@ -0,0 +1,11 @@
+export const UserProfile = () => {
+ return (
+
+
+ Compass Center
+ cssgunc@gmail.com
+
+
Sign out
+