Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 | 1x 1x 1x 1x 1x | import { Key } from 'react'
import MostReqTasks from './MostReqTasks'
import BenefitTasks, { TaskListProps } from './BenefitTasks'
import Accordion from './Accordion'
interface AlertProps {
id: string
type: string
alertHeading: string
alertBody: string
}
interface AccordionProps {
id: string
title: string
accordionAlerts?: AlertProps[]
lists: {
title: string
aaTitle: string
tasks: {
id: string
title: string
areaLabel: string
link: string
icon: string
betaPopUp: boolean
}[]
}[]
}
interface CardProps {
cardTitle: string
accordions: AccordionProps[]
programUniqueId?: string
acronym: string
refPageAA: string
locale: string
cardAlert?: AlertProps[]
hasAlert?: boolean
}
const Card = ({
cardAlert = [
{
id: '',
type: '',
alertHeading: '',
alertBody: '',
},
],
locale,
cardTitle,
accordions = [
{
id: '',
title: '',
accordionAlerts: [
{
id: '',
type: '',
alertHeading: '',
alertBody: '',
},
],
lists: [
{
title: '',
aaTitle: '',
tasks: [
{
id: '',
title: '',
areaLabel: '',
link: '',
icon: '',
betaPopUp: false,
},
],
},
],
},
],
// programUniqueId,
acronym,
refPageAA,
// children,
}: CardProps) => {
return (
<div className="my-6 rounded border border-gray-300 shadow" data-cy="cards">
<h2
className="px-3 py-4 font-display text-4xl font-bold text-gray-darker sm:px-8 md:mt-2 md:px-15 md:py-8"
data-cy="cardtitle"
>
{cardTitle}
</h2>
<div>
{/* loop through each accordion */}
{accordions.map((accordion) => {
const mostReq = accordion.lists[0]
const tasks = accordion.lists.slice(1, accordion.lists.length)
return (
<>
<Accordion
key={accordion.id}
programUniqueId={accordion.id}
locale={locale}
cardTitle={cardTitle}
viewMoreLessCaption={accordion.title}
acronym={acronym}
refPageAA={refPageAA}
cardAlert={cardAlert}
accordionAlert={accordion.accordionAlerts}
>
{/* code for each section taken from my-dashboard.tsx */}
{/* {children} */}
<div
className="bg-deep-blue-60d"
data-cy="most-requested-section"
>
<MostReqTasks
locale={locale}
taskListMR={mostReq}
dataCy="most-requested"
acronym={acronym}
refPageAA={refPageAA}
/>
</div>
<div
className="gap-x-[60px] pl-3 pt-8 sm:pl-8 md:columns-2 md:px-15"
data-cy="task-list"
>
{tasks.map((taskList: TaskListProps, index: Key) => {
return (
<div key={index} data-cy="Task">
<BenefitTasks
locale={locale}
acronym={acronym}
taskList={taskList}
dataCy="task-group-list"
refPageAA={refPageAA}
/>
</div>
)
})}
</div>
</Accordion>
</>
)
})}
</div>
</div>
)
}
export default Card
|