added starter code for directory

components/DirectoryCard.tsx

@@ -0,0 +1,44 @@
+import { Button, majorScale, Pane, Text } from 'evergreen-ui';
+
+// View is an extremely simple component to make sure that the layout is consistent
+export default function DirectoryCard({}) {
+    return (
+        <Pane
+            marginRight={majorScale(4)}
+            backgroundColor="white"
+            height={majorScale(50)}
+            width={majorScale(50)}
+            borderRadius={majorScale(1)}
+            display="flex"
+            flexDirection="column"
+        >
+            <Pane flex="2" padding={16} textAlign="center">
+                Image would go here probably
+            </Pane>
+            <Pane flex="2" padding={16} textAlign="center">
+                <Text 
+                    fontWeight="700" 
+                    fontSize={majorScale(3)}
+                    lineHeight="2"
+                >
+                    Profile Name
+                    <br />
+                </Text>
+                <Text 
+                    fontSize={majorScale(2)}
+                    lineHeight="2"
+                >
+                    Major - Class Year <br />
+                    Residential Colllege <br />
+                </Text>
+                <br />
+                <Button 
+                    appearance='primary'
+                    size="large"
+                >
+                    Connect
+                </Button>
+            </Pane>
+        </Pane>
+    );
+}

components/HubView.tsx

@@ -0,0 +1,23 @@
+import { majorScale, Pane } from 'evergreen-ui';
+
+// View is an extremely simple component to make sure that the layout is consistent
+export default function HubView({ children }) {
+    return (
+        <Pane
+            width="100%"
+            height="100%"
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            paddingTop={majorScale(5)}
+        >
+            <Pane
+                width="100%"
+                maxWidth="1200px"
+                paddingX={majorScale(5)}
+            >
+                { children }
+            </Pane>
+        </Pane>
+    );
+}

components/ProfileCard/index.tsx

@@ -0,0 +1,51 @@
+import {
+    majorScale, Button, Link, Heading, Card, Avatar, useTheme,
+} from 'evergreen-ui'
+
+interface CardProps {
+    /** authenticated user data */
+    user: any;
+}
+
+const defName = 'Tammy Tiger';
+const defEmail = 'hoagie@princeton.edu';
+
+/** ProfileCard is a profile card meant for display of user information
+ *  throughout different Hoagie applications.
+ */
+function ProfileCard({ user }:CardProps) {
+    const theme = useTheme();
+
+    const name = user?.isLoading ? defName : (user?.user?.name ?? defName);
+    const email = user?.isLoading ? defEmail : (user?.user?.email ?? defEmail);
+
+    return (
+        <Card
+            elevation={1}
+            background="gray50"
+            padding={majorScale(3)}
+            maxWidth={majorScale(30)}
+            borderRadius={8}
+            display="flex"
+            flexDirection="column"
+            alignItems="center"
+        >
+            <Avatar name={name} color={theme.title} size={40} />
+            <Heading size={500} marginTop={majorScale(1)}>
+                {name}
+            </Heading>
+            <Link
+                href={`mailto:${email}`}
+                color="neutral"
+                size={300}
+                marginTop={2}
+            >
+                ({email})
+            </Link>
+            <a href="/profile"><Button marginTop={16}>Your Profile</Button></a>
+            <a href="/api/auth/logout"><Button marginTop={16}>Log Out</Button></a>
+        </Card>
+    )
+}
+
+export default ProfileCard

components/SelectFilter.tsx

@@ -0,0 +1,63 @@
+import { SelectMenu, Button, majorScale } from 'evergreen-ui';
+import { useState } from 'react';
+
+export default function SelectFilter({ 
+        children,
+        options, 
+        title="Select multiple options...",
+        buttonText="",
+        field=""
+    }) {
+
+    const [selectedItemsState, setSelectedItems] = useState([])
+    const [selectedItemNamesState, setSelectedItemNames] = useState(null)
+
+    return (
+        <SelectMenu
+            isMultiSelect
+            title={title}
+            options={options}
+            selected={selectedItemsState}
+            onSelect={(item) => {
+                const selected = [...selectedItemsState, item.value]
+                const selectedItems = selected
+                const selectedItemsLength = selectedItems.length
+                let selectedNames = ''
+                if (selectedItemsLength === 0) {
+                selectedNames = ''
+                } else if (selectedItemsLength === 1) {
+                selectedNames = selectedItems.toString()
+                } else if (selectedItemsLength > 1) {
+                selectedNames = selectedItemsLength.toString() + ' ' + field + ' selected...'
+                }
+                setSelectedItems(selectedItems)
+                setSelectedItemNames(selectedNames)
+            }}
+            onDeselect={(item) => {
+                const deselectedItemIndex = selectedItemsState.indexOf(item.value)
+                const selectedItems = selectedItemsState.filter((_item, i) => i !== deselectedItemIndex)
+                const selectedItemsLength = selectedItems.length
+                let selectedNames = ''
+                if (selectedItemsLength === 0) {
+                selectedNames = ''
+                } else if (selectedItemsLength === 1) {
+                selectedNames = selectedItems.toString()
+                } else if (selectedItemsLength > 1) {
+                selectedNames = selectedItemsLength.toString() + ' selected...'
+                }
+
+                setSelectedItems(selectedItems)
+                setSelectedItemNames(selectedNames)
+            }}
+            width={500}
+        >
+            <Button 
+                width={majorScale(25)}
+                marginTop={majorScale(2)}
+                marginRight={majorScale(2)}
+            >
+                {selectedItemNamesState || buttonText}
+            </Button>
+        </SelectMenu>
+    );
+}

components/View.tsx

@@ -10,6 +10,7 @@ export default function View({ children }) {
             marginX="8px"
             paddingBottom="24px"
             paddingTop="64px"
+            backgroundColor="#E9DDFE"
         >
             <Pane
                 borderRadius={8}

lib/hoagie-ui/Nav/index.tsx

@@ -4,7 +4,8 @@ import {
 import { ComponentType } from 'react'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import ProfileCard from '../ProfileCard'
+// import ProfileCard from '../ProfileCard'
+import ProfileCard from '../../../components/ProfileCard'
 
 interface NavProps {
     /** name of app for hoagie{name} title */

pages/_app.tsx

@@ -9,6 +9,7 @@ import './hub.css'
 
 function Content({ Component, pageProps }) {
     const tabs = [
+        { href: '/directory', title: 'Directory' },
     ];
     const user = useUser();
 

pages/app.tsx

@@ -6,6 +6,7 @@ import {
 import { useRouter } from 'next/router';
 import Link from 'next/link';
 import View from '../components/View';
+import ProfileCard from '../lib/hoagie-ui/ProfileCard';
 
 export default withPageAuthRequired(() => {
     const { user, isLoading } = useUser();

pages/directory/index.tsx

@@ -0,0 +1,80 @@
+import {
+    Pane, Heading, SearchInput, majorScale, SelectMenu, Button
+} from 'evergreen-ui'
+import DirectoryCard from '../../components/DirectoryCard';
+import HubView from '../../components/HubView';
+import SelectFilter from '../../components/SelectFilter';
+
+const major_options = [
+    { label: 'Computer Science', value: 'COS' },
+    { label: 'Operations Research and Financial Engineering', value: 'ORF' },
+    { label: 'Mathematics', value: 'MAT' },
+];
+const year_options = [
+    { label: '2023', value: '2023' },
+    { label: '2024', value: '2024' },
+    { label: '2025', value: '2025' },
+    { label: '2026', value: '2026' },
+    { label: '2027', value: '2027' },
+]
+const res_options = [
+    { label: 'Mathey', value: 'Mathey' },
+    { label: 'Rocky', value: 'Rocky' },
+    { label: 'Whitman', value: 'Whitman' },
+    { label: 'Forbes', value: 'Forbes' },
+    { label: 'Butler', value: 'Butler' },
+    { label: 'Yeh', value: 'Yeh' },
+    { label: 'New College West', value: 'New College West' },
+];
+const eating_options = [
+    { label: 'Cap & Gown', value: 'Cap' },
+    { label: 'Tower', value: 'Tower' },
+    { label: 'Colonial', value: 'Colonial' }
+];
+
+export default (() => (
+    <HubView>
+    <SearchInput 
+        placeholder="Search by name or netid" 
+        width="100%"
+        height={majorScale(5)}
+    />
+    <SelectFilter
+        options={major_options}
+        title="Major"
+        buttonText="Filter by Major"
+        field="majors"
+    >
+    </SelectFilter>
+    <SelectFilter
+        options={year_options}
+        title="Class Year"
+        buttonText="Filter by Class Year"
+        field="years"
+    >
+    </SelectFilter>
+    <SelectFilter
+        options={res_options}
+        title="Residential College"
+        buttonText="Filter by Residential College"
+        field="residential colleges"
+    >
+    </SelectFilter>
+    <SelectFilter
+        options={eating_options}
+        title="Eating Club"
+        buttonText="Filter by Eating Club"
+        field="eating clubs"
+    >
+    </SelectFilter>
+    <Pane 
+    marginTop={majorScale(4)}
+    display="flex"
+    flexDirection="row">
+        <DirectoryCard />
+        <DirectoryCard />
+        <DirectoryCard />
+    </Pane>
+
+    </HubView>
+));