Skip to content

Commit

Permalink
Enhancement to FAQ page & add content (#45)
Browse files Browse the repository at this point in the history
* ui: fix error & change faq baseline code

* ui: add additional faq cards as seperate files

* ui: add additional faq cards to faq home

* ui: add focus to sub menu to take out red default

* Add reusuable component and FAQ data json file

---------

Co-authored-by: Matthew Stankiewicz <[email protected]>
Co-authored-by: akanuri <[email protected]>
  • Loading branch information
3 people authored Apr 1, 2024
1 parent 985fbc0 commit 5ed967e
Show file tree
Hide file tree
Showing 7 changed files with 1,248 additions and 257 deletions.
61 changes: 46 additions & 15 deletions src/components/resources/FAQCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,62 @@ import * as React from 'react'
import Card from '@mui/material/Card'
import Typography from '@mui/material/Typography'
import Divider from '@mui/material/Divider'
import { CardHeader, CardContent, List, ListItem, ListItemText, Box } from '@mui/material'
export interface QAItem {
question: string
answer: string
}

interface FAQCardProps {
header: string
content: React.ReactNode
items: QAItem[]
}

const FAQCard: React.FC<FAQCardProps> = ({ header, content }) => {
const FAQCard = ({ header, items }: FAQCardProps) => {
return (
<Card
sx={{
maxWidth: 1075,
bgcolor: 'background.paper',
p: 2,
borderRadius: '4px',
border: 1,
borderColor: 'grey.300',
boxShadow: '-8px 0px 32px 0px rgba(0, 0, 0, 0.16)',
overflow: 'auto',
width: '100%',
borderRadius: '8px',
}}
>
<Typography variant="h5" component="div" sx={{ fontWeight: 'bold', mb: 2 }}>
{header}
</Typography>
<Divider sx={{ mb: 2 }} />
{content}
<CardHeader titleTypographyProps={{ fontWeight: 700 }} title={header} />
<Divider />
<CardContent>
<List disablePadding>
{items.map((item, index) => (
<React.Fragment key={index}>
<ListItem alignItems="flex-start" sx={{ pb: 1, px: 0 }}>
<ListItemText>
<Box display={'flex'} gap={1} flexDirection={'row'}>
<Typography fontWeight={'600'} variant="h6" gutterBottom>
Q:
</Typography>
<Typography fontWeight={'600'} variant="h6" gutterBottom>
{item.question}
</Typography>
</Box>
<Box display={'flex'} gap={1} flexDirection={'row'}>
<Typography variant="body2" gutterBottom>
A:
</Typography>
<Typography variant="body2">
{item.answer.split('\n').map((i, key) => {
return (
<span key={key}>
{i}
<br />
</span>
)
})}
</Typography>
</Box>
</ListItemText>
</ListItem>
</React.Fragment>
))}
</List>
</CardContent>
</Card>
)
}
Expand Down
267 changes: 92 additions & 175 deletions src/components/resources/FAQHome.tsx

Large diffs are not rendered by default.

64 changes: 0 additions & 64 deletions src/components/resources/OverviewCard.tsx

This file was deleted.

Loading

0 comments on commit 5ed967e

Please sign in to comment.