Merge pull request #13 from CS3219-AY2324S1/homepage

charltonator · web-flow · commit 7e4d53833512 · 2023-09-16T13:27:42.000+08:00
Homepage
diff --git a/public/index.html b/public/index.html
@@ -3,6 +3,9 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,4 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 400
+  }
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,8 @@
 import React from "react";
 import { Container, Stack } from "@mui/material";
 import Navbar from "./components/Navbar";
+import Home from "./components/Home";
+import './App.css';
 import Titlebar from "./components/Questions/Titlebar";
 
 export default function App() {
@@ -9,6 +11,7 @@ export default function App() {
     <Stack gap={5}>
       <Navbar />
       <Titlebar />
+      <Home/>
       <Container>hello world!</Container>
     </Stack>
     </>
diff --git a/src/components/Home.tsx b/src/components/Home.tsx
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+
+function Home() {
+  // Sample data for practice questions (you can replace this with actual data)
+  const practiceQuestions = [
+    { difficulty: 'Easy', count: 10 },
+    { difficulty: 'Medium', count: 20 },
+    { difficulty: 'Hard', count: 15 },
+  ];
+
+  // State to hold the practice questions data
+  const [questionsData, setQuestionsData] = useState(practiceQuestions);
+
+  // You can fetch the actual data from your API using useEffect
+
+  useEffect(() => {
+    // Fetch practice questions data from your API here and update the state
+    // Example API call:
+    // fetch('/api/practice-questions')
+    //   .then((response) => response.json())
+    //   .then((data) => setQuestionsData(data));
+  }, []);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'center' }}>
+      <div>
+        <h1>Welcome to the Technical Interview Preparation Portal</h1>
+        <div>
+          <h2>Practice Questions</h2>
+          <ul>
+            {questionsData.map((question, index) => (
+              <li key={index}>
+                {question.difficulty}: {question.count} questions
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Home;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -42,7 +42,7 @@ function Navbar() {
     <AppBar position="static">
       <Container maxWidth="xl">
         <Toolbar disableGutters>
-          <AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1 }} />
+          <AdbIcon sx={{ display: { xs: "none", md: "flex" }, mr: 1}} />
           <Typography
             variant="h6"
             noWrap
@@ -51,7 +51,7 @@ function Navbar() {
             sx={{
               mr: 2,
               display: { xs: "none", md: "flex" },
-              fontFamily: "monospace",
+              fontFamily: "Roboto",
               fontWeight: 700,
               letterSpacing: ".3rem",
               color: "inherit",
@@ -61,7 +61,7 @@ function Navbar() {
             LOGO
           </Typography>
 
-          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" } }}>
+          <Box sx={{ flexGrow: 1, display: { xs: "flex", md: "none" },  }}>
             <IconButton
               size="large"
               aria-label="account of current user"

-Original file line number
+Diff line change
@@ @@ -0,0 +1,4 @@ @@
 +body {
 +    font-family: 'Roboto', sans-serif;
 +    font-weight: 400
 +  }