Added Navbar and Search UI

client/src/components/Layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import Navbar from "./Navbar";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: Props) {
+  return (
+    <div>
+      <Navbar />
+      {children}
+    </div>
+  );
+}

client/src/components/Navbar.tsx

@@ -0,0 +1,24 @@
+import { Box, Text, Flex } from "@chakra-ui/react";
+import { Link } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+
+export default function Navbar() {
+  const location = useLocation();
+
+  return (
+    <Box bg="#01293f">
+      <Flex p="5" gap="40px" m="0px 40px">
+        <Link to="/">
+          <Text color={location.pathname == "/" ? "#fca95a" : "white"} fontSize="xl">
+            Search
+          </Text>
+        </Link>
+        <Link to="/profile">
+          <Text color={location.pathname == "/profile" ? "#fca95a" : "white"} fontSize="xl">
+            Profile
+          </Text>
+        </Link>
+      </Flex>
+    </Box>
+  );
+}

client/src/components/Root.tsx

@@ -4,6 +4,7 @@ import { Box, CircularProgress } from "@chakra-ui/react";
 import { userProfileSchema } from "../schemas.ts";
 import { useProfileStore } from "../store.ts";
 import { getToken } from "../token.ts";
+import Layout from "./Layout.tsx";
 
 export const loader = () => defer({ response: handleImplicitLogin() });
 
@@ -39,7 +40,11 @@ const Root = () => {
       }
     >
       <Await resolve={data.response} errorElement={<Navigate to="/login" />}>
-        {() => <Outlet />}
+        {() => (
+          <Layout>
+            <Outlet />
+          </Layout>
+        )}
       </Await>
     </Suspense>
   );

client/src/components/Search.tsx

@@ -1,5 +1,43 @@
-import { Text } from "@chakra-ui/react";
+import { Box, HStack, FormControl, FormLabel, Input, Button } from "@chakra-ui/react";
+import { useState } from "react";
+import UserCard from "./UserCard";
 
 export default function Search() {
-  return <Text>Search</Text>;
+  const [budget, setBudget] = useState("");
+  const [cleanliness, setCleanliness] = useState("");
+  const [loudness, setLoudness] = useState("");
+  const [coed, setCoed] = useState("");
+
+  return (
+    <Box bg="#156087" minH="100vh">
+      <HStack textColor="white" gap="60px" mx="70px" p="30px" alignItems="flex-end">
+        <FormControl>
+          <FormLabel>Budget</FormLabel>
+          <Input type="text" value={budget} onChange={event => setBudget(event.target.value)} />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Cleanliness</FormLabel>
+          <Input
+            type="text"
+            value={cleanliness}
+            onChange={event => setCleanliness(event.target.value)}
+          />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Loudness</FormLabel>
+          <Input type="text" value={loudness} onChange={event => setLoudness(event.target.value)} />
+        </FormControl>
+        <FormControl>
+          <FormLabel>Co-Ed</FormLabel>
+          <Input type="text" value={coed} onChange={event => setCoed(event.target.value)} />
+        </FormControl>
+        <FormControl>
+          <Button colorScheme="orange" width="100%" borderRadius="6px">
+            Search
+          </Button>
+        </FormControl>
+      </HStack>
+      <UserCard />
+    </Box>
+  );
 }

client/src/components/UserCard.tsx

@@ -0,0 +1,36 @@
+import { Card, Image, Stack, CardBody, Heading, Text, Box, Button } from "@chakra-ui/react";
+
+export default function UserCard() {
+  return (
+    <Card
+      bg="#07354f"
+      direction={{ base: "column", sm: "row" }}
+      overflow="hidden"
+      variant="outline"
+      textColor="white"
+      mx="300px"
+    >
+      <Box margin="20px" display="flex" justifyContent="center" alignItems="center">
+        <Image
+          src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
+          alt="Caffe Latte"
+          borderRadius="full"
+          boxSize="100px"
+        />
+      </Box>
+
+      <Stack>
+        <CardBody px="0">
+          <Heading size="md">First Name Last Name</Heading>
+          <Text>Gender:</Text>
+          <Text>About:</Text>
+          <Text>Preferences:</Text>
+        </CardBody>
+      </Stack>
+
+      <Button position="absolute" bottom="10px" right="10px" colorScheme="orange">
+        Chat
+      </Button>
+    </Card>
+  );
+}