80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { FC, useState } from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
import {
|
|
Grid,
|
|
Box,
|
|
Accordion,
|
|
AccordionSummary,
|
|
AccordionDetails,
|
|
} from "@mui/material";
|
|
import {
|
|
ChevronRight as ChevronRightIcon,
|
|
ExpandMore as ExpandMoreIcon,
|
|
Circle as CircleIcon,
|
|
} from "@mui/icons-material";
|
|
import { useAppContext } from "./AppProvider";
|
|
|
|
interface QuestionProps {
|
|
question: string;
|
|
answer: string;
|
|
}
|
|
|
|
export const Question: FC<QuestionProps> = ({ question, answer }) => {
|
|
const [expanded, setExpanded] = useState(false);
|
|
const {
|
|
colors: { lavender, darkLavender },
|
|
typography: { h5, p },
|
|
} = useAppContext();
|
|
|
|
return (
|
|
<Accordion
|
|
expanded={expanded}
|
|
onChange={() => setExpanded(!expanded)}
|
|
elevation={0}
|
|
sx={{ "::before": { display: "none" } }}
|
|
>
|
|
<AccordionSummary>
|
|
<Grid
|
|
container
|
|
direction="row"
|
|
justifyContent="space-between"
|
|
sx={{ maxWidth: 500 }}
|
|
>
|
|
<Box component="h5" sx={h5}>
|
|
<CircleIcon
|
|
sx={{
|
|
fontSize: 14,
|
|
color: expanded ? darkLavender : lavender,
|
|
mr: 1,
|
|
mb: "-2px",
|
|
}}
|
|
/>
|
|
{question}
|
|
</Box>
|
|
{expanded ? (
|
|
<ExpandMoreIcon
|
|
htmlColor={lavender}
|
|
fontSize="medium"
|
|
sx={{ mt: "2px" }}
|
|
/>
|
|
) : (
|
|
<ChevronRightIcon
|
|
htmlColor={lavender}
|
|
fontSize="medium"
|
|
sx={{ mt: "4px" }}
|
|
/>
|
|
)}
|
|
</Grid>
|
|
</AccordionSummary>
|
|
<AccordionDetails sx={{ border: 0 }}>
|
|
<Box
|
|
sx={{ ...p, p: 2, border: `1px solid ${lavender}`, borderRadius: 3 }}
|
|
>
|
|
<ReactMarkdown>{answer}</ReactMarkdown>
|
|
</Box>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
);
|
|
};
|