feat: added toasts

feat: added toasts feat: added toasts without styling feat: added toast without styling
webscopeio · May 17, 2023 · 066e5fb · 066e5fb
1 parent 14d3440
commit 066e5fb
Show file tree

Hide file tree

Showing 8 changed files with 556 additions and 35 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@radix-ui/react-radio-group": "^1.1.2",
     "@radix-ui/react-slider": "^1.1.1",
     "@radix-ui/react-switch": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.3",
     "@types/node": "20.1.0",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -8,6 +8,9 @@ import { cn } from "@utils/cn";
 import { useSettings } from "@hooks/useSettings";
 import { Settings } from "@components/Settings";
 import { Loader } from "@components/Loader";
+import { Toaster } from "@components/ui/toast/toaster";
+
+
 
 const background = {
   light:
@@ -27,43 +30,46 @@ export default function Home() {
   } = useSettings(defaultSettings);
 
   return (
-    <Loader>
-      <section className="grid grid-cols-[1fr_auto] w-full max-w-[90rem] place-items-end border-8 rounded-md border-slate-900/50">
-        <div className="grid w-full place-items-center h-full bg-[#020617] bg-[length:15px_15px] [background-image:radial-gradient(#64748b_0.75px,_transparent_0)] p-12">
-          <div
-            ref={clipboardRef}
-            style={{
-              padding: `${settings.padding}%`,
-            }}
-            className={`${cn(
-              "max-w-6xl max-h-[648px] grid place-items-center",
-              settings.padding === 0 && "[&>img]:rounded-none",
-              settings.aspectRatio,
-              settings.aspectRatio === "aspect-video" && "w-full",
-              !settings.isDark ? background.light : background.dark
-            )}`}
-          >
-            <ClipboardImage
-              insetColor={settings.insetColor}
-              insetPadding={settings.insetPadding}
+    <>
+      <Loader>
+        <section className="grid grid-cols-[1fr_auto] w-full max-w-[90rem] place-items-end border-8 rounded-md border-slate-900/50">
+          <div className="grid w-full place-items-center h-full bg-[#020617] bg-[length:15px_15px] [background-image:radial-gradient(#64748b_0.75px,_transparent_0)] p-12">
+            <div
+              ref={clipboardRef}
+              style={{
+                padding: `${settings.padding}%`,
+              }}
+              className={`${cn(
+                "max-w-6xl max-h-[648px] grid place-items-center",
+                settings.padding === 0 && "[&>img]:rounded-none",
+                settings.aspectRatio,
+                settings.aspectRatio === "aspect-video" && "w-full",
+                !settings.isDark ? background.light : background.dark
+              )}`}
+            >
+              <ClipboardImage
+                insetColor={settings.insetColor}
+                insetPadding={settings.insetPadding}
+                setInsetColor={setInsetColor}
+                setInsetPadding={setInsetPadding}
+                setIsDark={setIsDark}
+              />
+            </div>
+          </div>
+          <div className="gap-4 w-fit h-full flex flex-col justify-between p-6 min-w-[300px] bg-slate-900 text-slate-100 relative">
+            <Settings
+              settings={settings}
+              setAspectRatio={setAspectRatio}
+              setPadding={setPadding}
               setInsetColor={setInsetColor}
               setInsetPadding={setInsetPadding}
               setIsDark={setIsDark}
             />
+            <ActionPanel clipboardRef={clipboardRef} />
           </div>
-        </div>
-        <div className="gap-4 w-fit h-full flex flex-col justify-between p-6 min-w-[300px] bg-slate-900 text-slate-100 relative">
-          <Settings
-            settings={settings}
-            setAspectRatio={setAspectRatio}
-            setPadding={setPadding}
-            setInsetColor={setInsetColor}
-            setInsetPadding={setInsetPadding}
-            setIsDark={setIsDark}
-          />
-          <ActionPanel clipboardRef={clipboardRef} />
-        </div>
-      </section>
-    </Loader>
+        </section>
+      </Loader>
+      <Toaster />
+    </>
   );
 }
diff --git a/src/components/ClipboardImage.tsx b/src/components/ClipboardImage.tsx
@@ -3,6 +3,10 @@ import Image from "next/image";
 import placeholder from "../app/placeholder.svg";
 import { getBackgroundColor, isColorDark, rgbToHex } from "@utils/color";
 import { pasteImage } from "@utils/clipboard";
+import { useToast } from "./ui/toast/use-toast";
+
+
+
 
 export const ClipboardImage = ({
   insetColor,
@@ -17,9 +21,18 @@ export const ClipboardImage = ({
   setInsetPadding: (input: number) => void;
   setIsDark: (input: boolean) => void;
 }) => {
+
+  const {toast} = useToast();
+
+
+
   const imageCallback = React.useCallback(
     (ref: HTMLImageElement | null) => {
-      ref?.addEventListener("click", () => pasteImage(ref));
+      ref?.addEventListener("click", async () => {
+        const result:any = await pasteImage(ref)
+        if (result instanceof Error) toast({title: result.message, variant:"destructive"});
+        else toast({title: "Image uploaded"});
+      });
       ref?.addEventListener("load", () => {
         const backgroundColor = getBackgroundColor(ref);
         if (backgroundColor) {
@@ -39,6 +52,7 @@ export const ClipboardImage = ({
   );
 
   return (
+
     <Image
       src={placeholder}
       ref={imageCallback}
@@ -51,5 +65,6 @@ export const ClipboardImage = ({
         background: insetPadding ? insetColor : "transparent",
       }}
     />
+
   );
 };