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 | 2x 2x 4x 3x | import Link from 'next/link'
export interface Task {
title: string
areaLabel: string
link: string
betaPopUp?: boolean
id: string
}
interface ProfileTasksProps {
dataCy?: string
programTitle: string
tasks: Task[]
refPageAA: string
acronym: string
}
const ProfileTasks = ({
dataCy,
programTitle,
tasks = [
{
id: 'mscaPlaceholder',
title: 'mscaPlaceholder',
areaLabel: 'mscaPlaceholder',
link: 'mscaPlaceholder',
betaPopUp: true,
},
],
refPageAA = 'mscaPlaceholder',
acronym,
}: ProfileTasksProps) => {
return (
<div data-cy={dataCy} className="mb-12 mt-10">
<h2
className="font-display text-4xl font-bold text-gray-darker"
data-cy="program-title"
>
{programTitle}
</h2>
<ul
className="grid w-full items-center pl-5 pt-3 xs:pl-6 md:grid-cols-1"
data-cy="task"
aria-label={programTitle}
>
{tasks.map((task, index) => {
return (
<li key={index} className="flex py-2 font-bold">
<Link
href={task.link}
passHref
className="list-item list-outside list-disc items-center rounded-sm px-1 text-deep-blue-dark underline visited:text-purple-50a hover:text-blue-hover focus:outline-1 focus:outline-blue-hover"
data-cy="task-link"
data-gc-analytics-customclick={`${refPageAA} ${acronym}:${task.id}`}
>
<span
aria-label={task.areaLabel}
className="text-xl font-normal"
data-cy="task-item"
>
{task.title}
</span>
</Link>
</li>
)
})}
</ul>
</div>
)
}
export default ProfileTasks
|