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/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..ca68cdb
--- /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/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}
+
+
+
+
= ({ children }) => {
return (
-
+
{children}
);
diff --git a/compass/components/resource/Callout.tsx b/compass/components/resource/Callout.tsx
new file mode 100644
index 0000000..c51f3f2
--- /dev/null
+++ b/compass/components/resource/Callout.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface CalloutProps {
+ children: ReactNode;
+}
+
+const Callout = ({ children }: CalloutProps) => {
+ return (
+
+ {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
+