From e698da2b8be03e729808aa323f65b2e9d9354ae8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dani=C3=ABl=20van=20der=20Winden?=
 <danielvanderwinden@ghost.org>
Date: Mon, 14 Oct 2024 14:10:07 +0200
Subject: [PATCH] Made full ListItem clickable

---
 apps/admin-x-design-system/src/global/ListItem.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/admin-x-design-system/src/global/ListItem.tsx b/apps/admin-x-design-system/src/global/ListItem.tsx
index 576f696477..3f4b1465ce 100644
--- a/apps/admin-x-design-system/src/global/ListItem.tsx
+++ b/apps/admin-x-design-system/src/global/ListItem.tsx
@@ -45,17 +45,18 @@ const ListItem: React.FC<ListItemProps> = ({
         'group/list-item relative flex items-center justify-between',
         bgOnHover && 'hover:bg-grey-50 dark:hover:bg-grey-950',
         separator ? 'border-b border-grey-100 last-of-type:border-b-transparent hover:border-b-transparent dark:border-grey-900' : 'border-y border-transparent',
+        onClick && 'cursor-pointer before:absolute before:inset-0 before:content-[""]', 
         className
     );
 
     return (
-        <div className={listItemClasses} data-testid={testId}>
+        <div className={listItemClasses} data-testid={testId} onClick={handleClick}>
             {bgOnHover && (
                 <div className="absolute inset-0 -mx-4 rounded-lg bg-grey-50 opacity-0 group-hover/list-item:opacity-100 dark:bg-grey-950" />
             )}
             <div className="relative flex w-full items-center justify-between">
                 {children ? children :
-                    <div className={`flex grow items-center gap-3 ${onClick && 'cursor-pointer'}`} onClick={handleClick}>
+                    <div className={`flex grow items-center gap-3`}>
                         {avatar && avatar}
                         <div className={`flex grow flex-col py-3 pr-6`} id={id}>
                             <span>{title}</span>