From c53429fa6c862776bb2d801d33bdcdbb259bc31f Mon Sep 17 00:00:00 2001
From: codytseng <codytseng98@gmail.com>
Date: Sun, 24 Aug 2025 10:44:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=92=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/KindFilter/index.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/KindFilter/index.tsx b/src/components/KindFilter/index.tsx
index e0a81fc..7791696 100644
--- a/src/components/KindFilter/index.tsx
+++ b/src/components/KindFilter/index.tsx
@@ -88,16 +88,17 @@ export default function KindFilter({
   const content = (
     <div>
       <div className="grid grid-cols-2 gap-2">
-        {SUPPORTED_KINDS.map(({ kindGroup, label }) => (
-          <Label
-            key={label}
-            className="focus:bg-accent/50 cursor-pointer flex items-start gap-3 rounded-lg border px-4 py-3 has-[[aria-checked=true]]:border-primary has-[[aria-checked=true]]:bg-primary/20"
-          >
-            <Checkbox
-              id="toggle-2"
-              checked={kindGroup.every((k) => temporaryShowKinds.includes(k))}
-              onCheckedChange={(checked) => {
-                if (checked) {
+        {SUPPORTED_KINDS.map(({ kindGroup, label }) => {
+          const checked = kindGroup.every((k) => temporaryShowKinds.includes(k))
+          return (
+            <div
+              key={label}
+              className={cn(
+                'cursor-pointer grid gap-1.5 rounded-lg border px-4 py-3',
+                checked ? 'border-primary bg-primary/20' : 'clickable'
+              )}
+              onClick={() => {
+                if (!checked) {
                   // add all kinds in this group
                   setTemporaryShowKinds((prev) => Array.from(new Set([...prev, ...kindGroup])))
                 } else {
@@ -105,13 +106,12 @@ export default function KindFilter({
                   setTemporaryShowKinds((prev) => prev.filter((k) => !kindGroup.includes(k)))
                 }
               }}
-            />
-            <div className="grid gap-1.5">
+            >
               <p className="leading-none font-medium">{t(label)}</p>
               <p className="text-muted-foreground text-xs">kind {kindGroup.join(', ')}</p>
             </div>
-          </Label>
-        ))}
+          )
+        })}
       </div>
 
       <div className="flex gap-2 mt-4">