From 8edfd658f6784349b093d62b676f7ea8a8e509d1 Mon Sep 17 00:00:00 2001
From: Zakher Masri <zakhermasri@gmail.com>
Date: Tue, 11 Mar 2025 17:55:50 +0300
Subject: [PATCH] fix: clicking on tag in card

---
 app/package.json                    |  3 ++-
 app/pnpm-lock.yaml                  | 26 ++++++++++++++++++++++++++
 app/src/components/TemplateGrid.tsx | 15 ++++++++-------
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/app/package.json b/app/package.json
index aa8eb5d..a0f490f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -37,7 +37,8 @@
     "tailwind-merge": "^3.0.2",
     "tailwindcss": "^4.0.12",
     "tailwindcss-animate": "^1.0.7",
-    "vite-plugin-static-copy": "2.3.0"
+    "vite-plugin-static-copy": "2.3.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/node": "^20.8.2",
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 465439c..3669f77 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -92,6 +92,9 @@ importers:
       vite-plugin-static-copy:
         specifier: 2.3.0
         version: 2.3.0(vite@6.2.1(@types/node@20.17.24)(jiti@2.4.2)(lightningcss@1.29.2))
+      zustand:
+        specifier: ^5.0.3
+        version: 5.0.3(@types/react@19.0.10)(react@19.0.0)
     devDependencies:
       '@types/node':
         specifier: ^20.8.2
@@ -1654,6 +1657,24 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  zustand@5.0.3:
+    resolution: {integrity: sha512-14fwWQtU3pH4dE0dOpdMiWjddcH+QzKIgk1cl8epwSE7yag43k/AD/m4L6+K7DytAOr9gGBe3/EXj9g7cdostg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@ampproject/remapping@2.3.0':
@@ -3089,3 +3110,8 @@ snapshots:
   w3c-keyname@2.2.8: {}
 
   yallist@3.1.1: {}
+
+  zustand@5.0.3(@types/react@19.0.10)(react@19.0.0):
+    optionalDependencies:
+      '@types/react': 19.0.10
+      react: 19.0.0
diff --git a/app/src/components/TemplateGrid.tsx b/app/src/components/TemplateGrid.tsx
index ea06047..0edcbe6 100644
--- a/app/src/components/TemplateGrid.tsx
+++ b/app/src/components/TemplateGrid.tsx
@@ -187,6 +187,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
             filteredTemplates.map((template) => (
               <Card
                 key={template.id}
+                onClick={() => handleTemplateClick(template)}
                 className={cn(
                   " cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]",
                   {
@@ -195,7 +196,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                   }
                 )}
               >
-                <CardHeader onClick={() => handleTemplateClick(template)}>
+                <CardHeader>
                   <CardTitle className="text-xl ">
                     <img
                       src={`/blueprints/${template.id}/${template.logo}`}
@@ -209,10 +210,13 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                   <p className="text-sm text-muted-foreground line-clamp-2">
                     {template.description}
                   </p>
-                  <div className="mt-2 flex flex-wrap gap-1">
+                  <div className="mt-2 flex flex-wrap gap-1 w-fit">
                     {template.tags.slice(0, 3).map((tag) => (
                       <span
-                        onClick={() => addSelectedTag(tag)}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          addSelectedTag(tag);
+                        }}
                         key={tag}
                         className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
                       >
@@ -221,10 +225,7 @@ const TemplateGrid: React.FC<TemplateGridProps> = ({ view }) => {
                     ))}
                   </div>
                 </CardContent>
-                <CardFooter
-                  className="flex justify-between items-center"
-                  onClick={() => handleTemplateClick(template)}
-                >
+                <CardFooter className="flex justify-between items-center">
                   <span className="text-sm text-gray-500">
                     {template.version}
                   </span>