🎨 Migrate to pheralb/toast

Author: pheralb

website/app/components/card/copyIcon.tsx

@@ -1,7 +1,7 @@
 import { useState, type FC, type SVGProps } from "react";
 
 import axios from "axios";
-import { toast } from "sonner";
+import { toast } from "@pheralb/toast";
 import { Symbols } from "@react-symbols/icons";
 import { CodeIcon, CopyIcon, LoaderIcon, XIcon } from "lucide-react";
 
@@ -26,8 +26,8 @@ const CopyIconActions = ({ itemName, isFolder, ItemIcon }: CopyIconProps) => {
   const handleCopyFromLibrary = async () => {
     const code = `<${itemName} />`;
     await clipboard(code);
-    toast.success("Copied to clipboard", {
-      description: code,
+    toast.success({
+      text: "Copied library import",
       icon: <ItemIcon width={24} height={24} />,
     });
     setIsOpen(false);
@@ -41,8 +41,8 @@ const CopyIconActions = ({ itemName, isFolder, ItemIcon }: CopyIconProps) => {
       : `${appConfig.shadcnCommand} ${appConfig.registryUrl}folders/${itemNameLower}.json`;
 
     await clipboard(makeCommand);
-    toast.success("Copied to clipboard", {
-      description: makeCommand,
+    toast.success({
+      text: "Copied shadcn/ui command",
       icon: <ItemIcon width={24} height={24} />,
     });
     setIsOpen(false);
@@ -70,16 +70,16 @@ const CopyIconActions = ({ itemName, isFolder, ItemIcon }: CopyIconProps) => {
       content = content.replace(/\r\n/g, "\n");
 
       await clipboard(content);
-      toast.success("Copied to clipboard", {
-        description: itemName,
+      toast.success({
+        text: "Copied source code",
         icon: <ItemIcon width={24} height={24} />,
       });
       setLoading(false);
       setIsOpen(false);
     } catch (error) {
       console.error("⚠️ Error fetching or copying source code: ", error);
-      toast.error("Failed to copy source code. Please try again.", {
-        closeButton: true,
+      toast.error({
+        text: "Failed to copy source code. Please try again.",
       });
       setLoading(false);
     }

website/app/components/installCommand.tsx

@@ -4,8 +4,7 @@ import {
   type SVGProps,
   useState,
 } from "react";
-import { toast } from "sonner";
-import JSConfetti from "js-confetti";
+import { toast } from "@pheralb/toast";
 import { Bun, NPM, PNPM, Yarn } from "@react-symbols/icons";
 
 import { globals } from "@/globals";
@@ -58,16 +57,14 @@ const InstallCommand = (props: iInstallCommandProps) => {
   const [selectedInstallCommand, setSelectedInstallCommand] =
     useState<iInstallCommands>(installCommands[0]);
 
-  const handleCopy = async (text: string, icon: ReactNode) => {
-    const jsConfetti = new JSConfetti();
-    jsConfetti.addConfetti({
-      confettiColors: ["#2563EB", "#0D9488", "#22D3EE", "#C084FC"],
-      confettiRadius: 3,
-      confettiNumber: 50,
-    });
+  const handleCopy = async (
+    text: string,
+    packageManager: string,
+    icon: ReactNode,
+  ) => {
     await clipboard(text);
-    toast.success("Copied to clipboard", {
-      description: text,
+    toast.success({
+      text: `Copied ${packageManager} command`,
       icon: icon,
     });
   };
@@ -77,7 +74,7 @@ const InstallCommand = (props: iInstallCommandProps) => {
       className={cn(
         buttonVariants({
           variant: "outline",
-          className: "active:scale-100",
+          className: "cursor-default active:scale-100",
         }),
         "select-all space-x-3 rounded-3xl text-zinc-600 hover:bg-transparent dark:text-zinc-400 dark:hover:bg-transparent dark:hover:text-white",
         props.className,
@@ -104,7 +101,11 @@ const InstallCommand = (props: iInstallCommandProps) => {
               onSelect={() => {
                 setSelectedInstallCommand(item);
                 const fullCommand = `${item.command} ${globals.npmPackageName}`;
-                handleCopy(fullCommand, <item.icon width={24} height={24} />);
+                handleCopy(
+                  fullCommand,
+                  item.package,
+                  <item.icon width={20} height={20} />,
+                );
               }}
             >
               <item.icon width={16} height={16} />

website/app/providers/sonner.tsx

@@ -0,0 +1,51 @@
+import { cn } from "@/utils";
+
+import {
+  Toaster,
+  type ToastTheme,
+  type ToasterProperties,
+} from "@pheralb/toast";
+import { XIcon } from "lucide-react";
+
+import { useTheme } from "remix-themes";
+
+const CustomToaster = (props: ToasterProperties) => {
+  const [theme] = useTheme();
+  return (
+    <Toaster
+      theme={theme as ToastTheme}
+      position="bottom-center"
+      toastOptions={{
+        headless: true,
+        classNames: {
+          toast: cn(
+            "font-sans text-sm font-medium z-50 rounded-lg shadow-md relative flex items-center",
+            "border border-zinc-200 dark:border-zinc-800",
+            "bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100",
+          ),
+          container: "flex items-center py-4 space-x-2 px-4 w-full group",
+          content: "flex flex-col space-y-0.5 mr-2 max-w-[calc(100%-2rem)]",
+          actions: {
+            container: "flex flex-col px-3",
+            actionBtn: cn(
+              "bg-zinc-200 dark:bg-zinc-700 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-300 dark:hover:bg-zinc-600",
+              "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-zinc-500 dark:focus-visible:ring-zinc-400",
+              "px-2 py-1 text-[12px] font-medium rounded-md transition duration-200 ease-in-out",
+            ),
+            closeBtn: cn(
+              "bg-zinc-200 dark:bg-zinc-800",
+              "text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100",
+              "border border-zinc-300 dark:border-zinc-600 hover:border-zinc-500 dark:hover:border-zinc-300",
+              "absolute items-center flex justify-center -top-2 -left-2 transition-colors p-0.5 rounded-full focus:outline-none",
+            ),
+          },
+          icon: "flex-shrink-0 mr-2",
+        },
+        defaultCloseContent: <XIcon size={12} />,
+      }}
+      {...props}
+    />
+  );
+};
+
+export default CustomToaster;

website/app/providers/toaster.tsx

@@ -27,7 +27,7 @@ import Navbar from "@/components/navbar";
 import Settings from "@/components/settings";
 
 // Providers:
-import { Toaster } from "@/providers/sonner";
+import CustomToaster from "@/providers/toaster";
 
 // Theme:
 import {
@@ -164,7 +164,7 @@ function App() {
         <Navbar />
         <Outlet />
         <Footer />
-        <Toaster />
+        <CustomToaster />
         <ScrollRestoration />
         <Scripts />
       </body>