Merge pull request #21 from xandemon/feat/actionFeedback

Action feedback and UX improvements in icons card

docs/package.json

@@ -17,7 +17,9 @@
     "@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",

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>
   );
 };

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: {

docs/src/components/ui/button.tsx

@@ -10,16 +10,16 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-sky-500 text-zinc-100 hover:bg-sky-500/90 dark:bg-zinc-200 dark:text-sky-500 dark:hover:bg-zinc-200/90",
+          "bg-zinc-200 text-sky-500 hover:bg-zinc-200/90 dark:bg-sky-500 dark:text-zinc-100 dark:hover:bg-sky-500/90",
         destructive:
-          "bg-red-500 text-zinc-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-zinc-50 dark:hover:bg-red-900/90",
+          "bg-red-900 text-zinc-50 hover:bg-red-900/90 dark:bg-red-500 dark:text-zinc-50 dark:hover:bg-red-500/90",
         outline:
-          "border border-zinc-800 text-sky-400 bg-transparent hover:bg-zinc-800 hover:text-sky-400 dark:border-zinc-200 dark:bg-transparent dark:hover:bg-zinc-200 dark:hover:text-zinc-50",
+          "border border-zinc-200 text-zinc-50 bg-transparent hover:bg-zinc-200 hover:text-zinc-50 dark:border-zinc-800 dark:bg-transparent dark:hover:bg-zinc-800 dark:hover:text-zinc-400",
         secondary:
-          "bg-zinc-700 text-zinc-200 hover:bg-zinc-700/80 dark:bg-zinc-200 dark:text-zinc-200 dark:hover:bg-zinc-200/80",
+          "bg-zinc-200 text-zinc-200 hover:bg-zinc-200/80 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-700/80",
         ghost:
-          "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
-        link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50",
+          "hover:bg-zinc-800 hover:text-zinc-50 dark:hover:bg-zinc-100 dark:hover:text-zinc-900",
+        link: "text-zinc-50 underline-offset-4 hover:underline dark:text-zinc-900",
       },
       size: {
         default: "h-10 px-5 py-2",