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 | 1x 1x 1x 20x 2x 2x 2x | import Markdown from 'markdown-to-jsx'
import Collapse from '../Collapse'
export interface ContactProvinceRowItem {
content?: string
recipient?: string
program?: string
poBox?: string
station?: string
city?: string
province?: string
postal?: string
country?: string
}
export interface ContactProvinceRowProps {
title: string
items: ContactProvinceRowItem[]
id: string
}
const ap = (addressContent: string | undefined, append: string): string => {
return addressContent ? addressContent + append : ''
}
export const ContactProvinceRow = ({
title,
items,
id = 'mscaPlaceholder',
}: ContactProvinceRowProps) => {
return (
items.length > 0 && (
<div className="py-2" key={id} data-cy="provinceCards">
<Collapse title={title} id={id} dataTestId={`dataTest`}>
<div
className="grid grid-cols-2 text-xl"
data-cy="mailContactDetails"
>
{items.map((rowItem, i) => (
<div
className="col-span-2 cursor-default select-text py-3 md:col-span-1"
key={i}
>
<div className="prose prose-h3:font-display prose-h3:text-xl prose-p:font-display prose-p:text-xl">
<Markdown className="font-bold">{`${ap(rowItem.content, ' ')}`}</Markdown>
</div>
<Markdown>{`${ap(rowItem.recipient, '\n\n')}${ap(
rowItem.program,
'\n\n',
)}${ap(rowItem.poBox, ' ')} ${ap(rowItem.station, ' ')} ${ap(
' ',
'\n\n',
)} ${ap(rowItem.city, ' ')} ${ap(rowItem.province, ' ')} ${ap(
rowItem.postal,
' \n\n',
)} ${ap(rowItem.country, ' ')}`}</Markdown>
</div>
))}
</div>
</Collapse>
</div>
)
)
}
|