fix: clicking on tag in card

This commit is contained in:
Zakher Masri
2025-03-11 17:55:50 +03:00
parent df2ddfdab0
commit 8edfd658f6
3 changed files with 36 additions and 8 deletions

View File

@@ -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",

26
app/pnpm-lock.yaml generated
View File

@@ -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

View File

@@ -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>