41 lines
1.8 KiB
Plaintext
41 lines
1.8 KiB
Plaintext
//-
|
|
Collapsable Component
|
|
@param {Object} data - The data object containing the collapsable content
|
|
@param {Boolean} isOpen - The initial state of the collapsable content
|
|
@param {String} data.color - The color of the collapsable content
|
|
@param {String} data.category - The category of the collapsable content
|
|
@param {String} data.summary - The summary of the collapsable content
|
|
@param {Array} data.items - The items of the collapsable content
|
|
mixin Collapsable(data, open)
|
|
- const isExpanded = open || false;
|
|
- const color = data.color || "orange";
|
|
- const category = data.category || "default";
|
|
- const linkEventName = "external link clicked";
|
|
|
|
div
|
|
details.mb-4(open=isExpanded)
|
|
summary.rounded-sm.transition.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer(
|
|
class=`sm:text-lg text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
|
|
onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
|
|
)= data.summary
|
|
ul.list-disc.list-inside.text-gray-400
|
|
each item in data.items
|
|
li
|
|
if item.text
|
|
= item.text
|
|
if item.links
|
|
each link, index in item.links
|
|
a.transition.underline-offset-2.underline(
|
|
class=`text-nls-${color} hover:text-white hover:decoration-2`,
|
|
href=link.url,
|
|
title=link.description,
|
|
target="_blank",
|
|
aria-label=link.description,
|
|
rel="noopener noreferrer",
|
|
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
|
|
)= link.text
|
|
if index < item.links.length - 1
|
|
| ,
|
|
if item.suffix
|
|
= ` ${item.suffix}`
|