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:
@@ -118,6 +118,9 @@ export function CatalogPage() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={disease.slug}
|
key={disease.slug}
|
||||||
|
onClick={() =>
|
||||||
|
setExpandedId(isExpanded ? null : disease.slug)
|
||||||
|
}
|
||||||
className={`bg-white rounded-2xl border transition-all duration-300 ${
|
className={`bg-white rounded-2xl border transition-all duration-300 ${
|
||||||
isExpanded
|
isExpanded
|
||||||
? "border-[#214B11]/30 shadow-md ring-1 ring-[#214B11]/5"
|
? "border-[#214B11]/30 shadow-md ring-1 ring-[#214B11]/5"
|
||||||
@@ -126,9 +129,6 @@ export function CatalogPage() {
|
|||||||
>
|
>
|
||||||
{/* Accordion Header */}
|
{/* Accordion Header */}
|
||||||
<div
|
<div
|
||||||
onClick={() =>
|
|
||||||
setExpandedId(isExpanded ? null : disease.slug)
|
|
||||||
}
|
|
||||||
className="flex items-center justify-between p-4 md:p-5 cursor-pointer select-none"
|
className="flex items-center justify-between p-4 md:p-5 cursor-pointer select-none"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-4">
|
<div className="flex items-center gap-4">
|
||||||
|
|||||||
Reference in New Issue
Block a user