feat(catalog): make entire disease card clickable to toggle accordion

- Move the `onClick` event handler from the accordion header to the outermost card container in `catalog-page.tsx`.
- Allow users to click anywhere on the expanded card (including the description and treatment sections) to collapse it.
- Improve overall user experience by providing a significantly larger tap target, especially beneficial for mobile or touch-screen users.
This commit is contained in:
seriouselly
2026-06-14 19:46:38 +07:00
parent 37ac82b2d2
commit 2733a36ea8
+3 -3
View File
@@ -118,6 +118,9 @@ export function CatalogPage() {
return (
<div
key={disease.slug}
onClick={() =>
setExpandedId(isExpanded ? null : disease.slug)
}
className={`bg-white rounded-2xl border transition-all duration-300 ${
isExpanded
? "border-[#214B11]/30 shadow-md ring-1 ring-[#214B11]/5"
@@ -126,9 +129,6 @@ export function CatalogPage() {
>
{/* Accordion Header */}
<div
onClick={() =>
setExpandedId(isExpanded ? null : disease.slug)
}
className="flex items-center justify-between p-4 md:p-5 cursor-pointer select-none"
>
<div className="flex items-center gap-4">