Merge pull request #29 from Nagarjuna0033/main

Refactor: Home page UI

src/App.js

@@ -1,6 +1,4 @@
 import { useState } from "react";
-import "slick-carousel/slick/slick.css";
-import "slick-carousel/slick/slick-theme.css";
 import { Route, Routes } from "react-router-dom";
 import StudentFee from "./pages/StudentFee";
 import CustomizedSnackbar from "./components/Snackbar";

src/components/CutsomAccordion.jsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Typography from "@mui/material/Typography";
+import { Stack } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+export default function CustomAccordion({ faq }) {
+  const [expanded, setExpanded] = React.useState(false);
+  console.log(faq);
+  const handleChange = (panel) => (event, isExpanded) => {
+    setExpanded(isExpanded ? panel : false);
+  };
+
+  return (
+    <Stack mt={3}>
+      <Accordion
+        elevation={0}
+        sx={{ border: "1px solid #1976d2", padding: "5px" }}
+        expanded={expanded === faq.index}
+        onChange={handleChange(faq.index)}
+      >
+        <AccordionSummary
+          expandIcon={<AddIcon />}
+          aria-controls="panel1bh-content"
+          id="panel1bh-header"
+        >
+          <Typography component="span" sx={{ flexShrink: 0 }}>
+            {faq.question}
+          </Typography>
+        </AccordionSummary>
+        <AccordionDetails>
+          <Typography
+            m={1.5}
+            fontWeight={"bold"}
+            variant="h6"
+            textAlign={"center"}
+            sx={{ flexShrink: 0 }}
+          >
+            Go to the Upload section in the Navbar and select the option that
+            you want upload the file you want in the below format
+          </Typography>
+          {faq.file && faq.file.endsWith(".mp4") ? (
+            <video width="100%" controls>
+              <source src={faq.file} type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
+          ) : (
+            faq.file && <img src={faq.file} alt="hint" width={"100%"} />
+          )}
+        </AccordionDetails>
+      </Accordion>
+    </Stack>
+  );
+}

src/components/Faq.jsx

@@ -0,0 +1,44 @@
+import { Box } from "@mui/material";
+import React from "react";
+import student from "../assets/studentDetails.png";
+import tutionFee from "../assets/tutionFee.png";
+import hostelFee from "../assets/hostelFee.png";
+import scholrship from "../assets/sch.png";
+import mis from "../assets/mis.mp4";
+import CustomAccordion from "./CutsomAccordion";
+const faqs = [
+  {
+    index: 1,
+    file: student,
+    question: "In which format student details should upload?",
+  },
+  {
+    index: 2,
+    file: tutionFee,
+    question: "In which format Tution Fee Excel file should upload?",
+  },
+  {
+    index: 3,
+    file: hostelFee,
+    question: "In which format Hostel Fee Excel file should upload?",
+  },
+  {
+    index: 4,
+    file: scholrship,
+    question: "In which format Scholar ship details should upload?",
+  },
+  {
+    index: 5,
+    file: mis,
+    question: "In which format MSI Excel file should upload",
+  },
+];
+export default function Faq() {
+  return (
+    <Box width={"100%"}>
+      {faqs.map((faq) => {
+        return <CustomAccordion faq={faq} />;
+      })}
+    </Box>
+  );
+}