From 4327a33837c5a912bcf94e832c482e9479c139bf Mon Sep 17 00:00:00 2001
From: David Katrinka <davidkatrinka1995@gmail.com>
Date: Sat, 22 Nov 2025 20:06:53 +0100
Subject: [PATCH] index page and adaptive

---
 src/App.css                                   |  3 --
 src/components/Question/Question.styles.ts    | 28 ++++++++++
 src/components/Question/Question.tsx          | 51 +++++++++++++++++++
 .../StartTestForm/StartTestForm.styles.tsx    | 26 ++++++----
 src/index.css                                 |  2 +-
 src/pages/IndexPage/IndexPage.tsx             | 21 +++++---
 6 files changed, 110 insertions(+), 21 deletions(-)
 create mode 100644 src/components/Question/Question.styles.ts
 create mode 100644 src/components/Question/Question.tsx

diff --git a/src/App.css b/src/App.css
index 6971584..e69de29 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,3 +0,0 @@
-*{
-  box-sizing: border-box;
-}
\ No newline at end of file
diff --git a/src/components/Question/Question.styles.ts b/src/components/Question/Question.styles.ts
new file mode 100644
index 0000000..65ec319
--- /dev/null
+++ b/src/components/Question/Question.styles.ts
@@ -0,0 +1,28 @@
+import styled from "@emotion/styled";
+
+export const QuestionWrapper = styled("div")({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  padding: "15px",
+  border: "3px solid #4B2981",
+  borderRadius: "10px",
+});
+
+export const QuestionTitle = styled("div")({
+  display: "flex",
+  alignItems: "center",
+  marginBottom: "10px"
+});
+
+export const QuestionMetadata = styled("div")({
+  display: "flex",
+  justifyContent: "space-between",
+  color: "#4c4c4c",
+  marginTop: "10px"
+});
+
+export const AuthorMeta = styled("div")({
+  display: "flex",
+  justifyContent: "center",
+});
diff --git a/src/components/Question/Question.tsx b/src/components/Question/Question.tsx
new file mode 100644
index 0000000..95b9b9d
--- /dev/null
+++ b/src/components/Question/Question.tsx
@@ -0,0 +1,51 @@
+import { Chip, Typography } from "@mui/material";
+import {
+  AuthorMeta,
+  QuestionMetadata,
+  QuestionTitle,
+  QuestionWrapper,
+} from "./Question.styles";
+import CategoryIcon from "@mui/icons-material/Category";
+import PersonIcon from "@mui/icons-material/Person";
+
+type Question = {
+  title: string;
+  category: string;
+  description: string;
+  difficulty: number;
+  author: string;
+};
+
+type QuestionProps = {
+  question: Question;
+};
+
+const Question = ({ question }: QuestionProps) => {
+  return (
+    <QuestionWrapper>
+      <QuestionTitle>
+        <Typography sx={{ mr: "10px" }} variant="h5">
+          {question.title}
+        </Typography>
+        <Chip
+          variant="outlined"
+          icon={<CategoryIcon />}
+          color="primary"
+          label={`${question.category}`}
+        />
+      </QuestionTitle>
+      <Typography variant="body1">{question.description}</Typography>
+      <QuestionMetadata>
+        <Typography variant="body1">
+          Difficulty: {question.difficulty}
+        </Typography>
+        <AuthorMeta>
+          <PersonIcon/>
+          <Typography variant="body1">{question.author}</Typography>
+        </AuthorMeta>
+      </QuestionMetadata>
+    </QuestionWrapper>
+  );
+};
+
+export default Question;
diff --git a/src/components/StartTestForm/StartTestForm.styles.tsx b/src/components/StartTestForm/StartTestForm.styles.tsx
index 286b068..dd60691 100644
--- a/src/components/StartTestForm/StartTestForm.styles.tsx
+++ b/src/components/StartTestForm/StartTestForm.styles.tsx
@@ -1,13 +1,19 @@
 import styled from "@emotion/styled";
 
-export const StartTestWrapper = styled('div')({
-    color: "#fff",
-    minWidth: "600px",
-    backgroundColor: "#fff",
-    padding: "10px",
-    borderRadius: "10px",
-    display: "flex",
-    justifyContent: "space-between",
-    marginBottom: "36px"
-})
+export const StartTestWrapper = styled("div")({
+  color: "#fff",
+  minWidth: "600px",
+  backgroundColor: "#fff",
+  padding: "10px",
+  borderRadius: "10px",
+  display: "flex",
+  justifyContent: "space-between",
+  marginBottom: "36px",
+  flexDirection: "row",
 
+  "@media (max-width: 1024px)": {
+    flexDirection: "column",
+    minWidth: "auto",
+    gap: "12px",
+  },
+});
diff --git a/src/index.css b/src/index.css
index 4a6b607..f9fd7ab 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,3 @@
 body {
   font-family: 'Roboto', sans-serif;
-}
\ No newline at end of file
+}
diff --git a/src/pages/IndexPage/IndexPage.tsx b/src/pages/IndexPage/IndexPage.tsx
index d4e76aa..86796b4 100644
--- a/src/pages/IndexPage/IndexPage.tsx
+++ b/src/pages/IndexPage/IndexPage.tsx
@@ -2,21 +2,28 @@ import { Typography } from "@mui/material";
 import Container from "../../components/shared/Container";
 import { WelcomeContainer } from "./IndexPage.styles";
 import StartTestForm from "../../components/StartTestForm/StartTestForm";
+import Question from "../../components/Question/Question";
 
 const IndexPage = () => {
+
+const myQuestion = {
+  title: "Example Question",
+  category: "Math",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ultricies, urna eu aliquet tincidunt, augue turpis gravida risus, sit amet posuere neque tellus sit amet justo. Curabitur non facilisis orci, vitae eleifend est. Cras fermentum, velit at scelerisque varius, mauris justo cursus lacus, ac porttitor ante metus sit amet nibh. Vivamus imperdiet, diam vel efficitur euismod, urna odio pharetra ipsum, vitae sollicitudin neque enim ut tortor. Donec gravida orci.",
+  difficulty: 3,
+  author: "David"
+};
+
+
   return (
     <Container>
       <WelcomeContainer>
         <Typography variant="h2">Welcome To HoshiAI!</Typography>
         <Typography variant="subtitle1">The best place to learn!</Typography>
       </WelcomeContainer>
-      <StartTestForm/>
-      {/* <ButtonGroup>
-        <Button sx={{ backgroundColor: "#6610F2" }} variant="contained">
-          Im Feeling Lucky
-        </Button>
-      </ButtonGroup> */}
-      <Typography variant="h3">Browse Questions</Typography>
+      <StartTestForm />
+      <Typography sx={{mb:"36px"}} variant="h3">Browse Questions</Typography>
+      <Question question={myQuestion} />
     </Container>
   );
 };