Merge pull request #2856 from Northeastern-Electric-Racing/#2714-FAQs…

…-Component

#2714 FAQs dropdown component

src/frontend/src/pages/HomePage/components/Dropdown.tsx

@@ -0,0 +1,43 @@
+import { Box, Accordion, AccordionSummary, Typography, AccordionDetails } from '@mui/material';
+
+import { ChevronRight } from '@mui/icons-material';
+import React, { useState } from 'react';
+
+interface DropdownProps {
+ title: string;
+ description: string;
+}
+
+const Dropdown = ({ title, description }: DropdownProps) => {
+ const [expanded, setExpanded] = useState(false);
+
+ return (
+ <Box marginBottom={2}>
+ <Accordion
+ expanded={expanded}
+ onChange={() => setExpanded(!expanded)}
+ sx={{
+ backgroundColor: '#ef4244'
+ }}
+ >
+ <AccordionSummary
+ sx={{ flexDirection: 'row-reverse', borderBottomLeftRadius: '100px', borderBottomRightRadius: '100px' }}
+ >
+ <ChevronRight
+ sx={{
+ transition: 'transform 0.3s ease',
+ transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
+ fontSize: 30
+ }}
+ />
+ <Typography sx={{ color: 'white', fontWeight: 'bold', fontSize: 20 }}>{title}</Typography>
+ </AccordionSummary>
+ <AccordionDetails sx={{ backgroundColor: 'white', borderBottomLeftRadius: '4px', borderBottomRightRadius: '4px' }}>
+ <Typography sx={{ color: 'black' }}>{description}</Typography>
+ </AccordionDetails>
+ </Accordion>
+ </Box>
+ );
+};
+
+export default Dropdown;

src/frontend/src/pages/HomePage/components/FAQsSection.tsx

@@ -1,8 +1,23 @@
-import { Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import LoadingIndicator from '../../../components/LoadingIndicator';
+import { useAllFaqs } from '../../../hooks/recruitment.hooks';
+import ErrorPage from '../../ErrorPage';
+import Dropdown from './Dropdown';
+import React from 'react';
 
 const FAQsSection = () => {
- // TODO: Ticket #2714
- return <Typography>FAQ section</Typography>;
+ const { isLoading, isError, error, data: faqs } = useAllFaqs();
+ if (isLoading || !faqs) return <LoadingIndicator />;
+
+ if (isError) return <ErrorPage message={error.message} />;
+
+ return (
+ <Box sx={{ width: '100%' }}>
+ {faqs.map((faq) => (
+ <Dropdown title={faq.question} description={faq.answer} />
+ ))}
+ </Box>
+ );
 };
 
 export default FAQsSection;