feat: implement searchbar based on doc content (#9)

Author: LeadcodeDev

package.json

@@ -17,10 +17,10 @@
     "@iconify/react": "^6.0.0",
     "@lucide/astro": "^0.488.0",
     "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.13",
+    "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-navigation-menu": "^1.2.5",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.3",
     "@scalar/api-reference-react": "^0.6.19",
     "@tailwindcss/vite": "^4.0.17",
     "@types/hast": "^3.0.4",
@@ -34,6 +34,7 @@
     "autoprefixer": "^10.4.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "hast": "^1.0.0",
     "hast-util-to-html": "^9.0.5",
     "hastscript": "^9.0.1",

pnpm-lock.yaml

@@ -22,7 +22,7 @@ const props = Astro.props;
     />
   </div>
   <div class="mt-4">
-    <p class="font-semibold text-gray-900 !mt-0 !p-0">{props.label}</p>
+    <p class="font-semibold text-muted-foreground !mt-0 !p-0">{props.label}</p>
     <p class="text-sm text-gray-500 !mt-0 !p-0">
       <slot />
     </p>

src/lib/components/content/card-group/card.astro

@@ -41,7 +41,9 @@ const container = "flex flex-col justify-between border rounded-xl p-6 w-1/2";
           </div>
         </div>
         <div class="mt-4">
-          <h3 class="font-semibold text-gray-900">{previousPage.data.title}</h3>
+          <h3 class="font-semibold text-muted-foreground">
+            {previousPage.data.title}
+          </h3>
           <p class="text-sm text-gray-500 mt-1">
             {previousPage.data.description}
           </p>
@@ -67,7 +69,9 @@ const container = "flex flex-col justify-between border rounded-xl p-6 w-1/2";
           </div>
         </div>
         <div class="mt-4 text-right">
-          <h3 class="font-semibold text-gray-900">{nextPage.data.title}</h3>
+          <h3 class="font-semiboldtext-muted-foreground">
+            {nextPage.data.title}
+          </h3>
           <p class="text-sm text-gray-500 mt-1">{nextPage.data.description}</p>
         </div>
       </a>