chore: ability to click tag in card

This commit is contained in:
Zakher Masri
2025-03-11 17:19:40 +03:00
parent 41f66e23a4
commit cf5195f40c

View File

@@ -46,8 +46,8 @@ const TemplateGrid: React.FC = () => {
const { templates, setTemplates } = useStore(); const { templates, setTemplates } = useStore();
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const searchQuery = useStore((state) => state.searchQuery); const { addSelectedTag, searchQuery, selectedTags } = useStore();
const selectedTags = useStore((state) => state.selectedTags);
const [selectedTemplate, setSelectedTemplate] = useState<Template | null>( const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(
null null
); );
@@ -160,9 +160,8 @@ const TemplateGrid: React.FC = () => {
<Card <Card
key={template.id} key={template.id}
className=" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]" className=" cursor-pointer hover:shadow-lg transition-all duration-200 h-full max-h-[300px]"
onClick={() => handleTemplateClick(template)}
> >
<CardHeader> <CardHeader onClick={() => handleTemplateClick(template)}>
<CardTitle className="text-xl "> <CardTitle className="text-xl ">
<img <img
src={`/blueprints/${template.id}/${template.logo}`} src={`/blueprints/${template.id}/${template.logo}`}
@@ -179,6 +178,7 @@ const TemplateGrid: React.FC = () => {
<div className="mt-2 flex flex-wrap gap-1"> <div className="mt-2 flex flex-wrap gap-1">
{template.tags.slice(0, 3).map((tag) => ( {template.tags.slice(0, 3).map((tag) => (
<span <span
onClick={() => addSelectedTag(tag)}
key={tag} key={tag}
className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800" className="inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800"
> >
@@ -187,7 +187,10 @@ const TemplateGrid: React.FC = () => {
))} ))}
</div> </div>
</CardContent> </CardContent>
<CardFooter className="flex justify-between items-center"> <CardFooter
className="flex justify-between items-center"
onClick={() => handleTemplateClick(template)}
>
<span className="text-sm text-gray-500"> <span className="text-sm text-gray-500">
{template.version} {template.version}
</span> </span>