Merge pull request #21 from xandemon/feat/actionFeedback

Action feedback and UX improvements in icons card
xandemon · Dec 5, 2024 · 5de9d7b · 5de9d7b
2 parents 0f64a99 + b9ad284
commit 5de9d7b
Show file tree

Hide file tree

Showing 14 changed files with 467 additions and 48 deletions.
diff --git a/docs/package-lock.json b/docs/package-lock.json
diff --git a/docs/package.json b/docs/package.json
@@ -17,13 +17,15 @@
     "@astrojs/tailwind": "^5.1.0",
     "@fontsource-variable/noto-sans": "^5.0.5",
     "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.8.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "developer-icons": "^5.0.5",
+    "developer-icons": "^5.0.6",
     "lucide-react": "^0.378.0",
     "moment": "^2.30.1",
     "react": "^18.3.1",

diff --git a/docs/src/components/HeroSection.astro b/docs/src/components/HeroSection.astro
@@ -7,7 +7,7 @@ import { publicBaseUrl } from "@/config";
 
 <div class="flex items-center justify-between gap-4 w-full py-4">
   <div class="flex flex-col gap-4">
-    <Badge className="tracking-widest">🚀 v5.0.5</Badge>
+    <Badge className="tracking-widest">🚀 v5.0.6</Badge>
     <p class="text-5xl font-bold leading-tight">
       <span class="text-sky-600">Ready-to-use</span>
       <br />

diff --git a/docs/src/components/iconsList.tsx b/docs/src/components/iconsList.tsx
@@ -3,6 +3,7 @@ import { SearchIcon, X } from "lucide-react";
 import type { IconDataType } from "../../../lib/iconsData";
 import { IconCard } from "./ui/iconCard";
 import { useDebounce } from "@/lib/hooks";
+import { TooltipProvider } from "./ui/tooltip";
 
 export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => {
   const [searchQuery, setSearchQuery] = useState("");
@@ -43,11 +44,13 @@ export const IconsList = ({ iconsData }: { iconsData: IconDataType[] }) => {
           )}
         </div>
       </div>
-      <div className="grid grid-cols-auto-fit gap-4 pr-1">
-        {filteredIcons.map((icon, index) => (
-          <IconCard key={index} icon={icon} />
-        ))}
-      </div>
+      <TooltipProvider>
+        <div className="grid grid-cols-auto-fit gap-4 pr-1">
+          {filteredIcons.map((icon, index) => (
+            <IconCard key={index} icon={icon} />
+          ))}
+        </div>
+      </TooltipProvider>
     </section>
   );
 };
diff --git a/docs/src/components/ui/badge.tsx b/docs/src/components/ui/badge.tsx
@@ -9,12 +9,12 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          "border-transparent bg-zinc-800 text-zinc-300 hover:bg-zinc-800/80 dark:bg-zinc-300 dark:text-zinc-800 dark:hover:bg-zinc-300/80 pl-3 pr-5",
+          "border-transparent bg-zinc-300 text-zinc-800 hover:bg-zinc-300/80 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-800/80 pl-3 pr-5",
         secondary:
-          "border-zinc-800 bg-zinc-800 bg-opacity-25 text-zinc-400 hover:bg-zinc-800/80 dark:bg-zinc-800 dark:text-zinc-50 dark:hover:bg-zinc-800/80",
+          "border-zinc-800 bg-zinc-800 bg-opacity-25 text-zinc-50 hover:bg-zinc-800/80 dark:bg-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800/80",
         destructive:
-          "border-transparent bg-red-500 text-zinc-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/80",
-        outline: "text-zinc-950 dark:text-zinc-50",
+          "border-transparent bg-red-900 text-zinc-50 hover:bg-red-900/80 dark:bg-red-500 dark:text-zinc-50 dark:hover:bg-red-500/80",
+        outline: "text-zinc-50 dark:text-zinc-950",
       },
     },
     defaultVariants: {