first commit

web/src/pages/CustomerPage.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import userContext from "../context/userContext";
+import BasicLayout from "../layouts/BasicLayout";
+import ImageCard from "../components/ImageCard";
+import LogoutCard from "../components/LogoutCard";
+
+// images
+import locationImage from "../../public/images/location.webp";
+import purchasedImage from "../../public/images/purchased.webp";
+import { Box, Typography } from "@mui/material";
+
+const CustomerPage = () => {
+  const { user } = React.useContext(userContext);
+  return (
+    <BasicLayout>
+      <Typography variant="h4">Hello, customer {user.username}</Typography>
+      <hr />
+      <Box style={{ display: "flex", flexWrap: "wrap" }}>
+        <Link to="/customer/market">
+          <ImageCard
+            title="Nearby Market"
+            description="Find your neaest market"
+            image={locationImage}
+          />
+        </Link>
+        <Link to="/customer/purchased">
+          <ImageCard
+            title="Purchased"
+            description="See what you have purchased"
+            image={purchasedImage}
+          />
+        </Link>
+        <LogoutCard />
+      </Box>
+    </BasicLayout>
+  );
+};
+
+export default CustomerPage;