feat: polish custom widgets and workshop

apps/docs/src/components/ui/sonner.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { useColorMode } from "@docusaurus/theme-common";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { IconCircleCheck, IconInfoCircle, IconAlertTriangle, IconAlertOctagon, IconLoader } from "@tabler/icons-react";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { colorMode } = useColorMode();
+
+  return (
+    <Sonner
+      theme={colorMode}
+      className="toaster group"
+      icons={{
+        success: <IconCircleCheck className="size-4" />,
+        info: <IconInfoCircle className="size-4" />,
+        warning: <IconAlertTriangle className="size-4" />,
+        error: <IconAlertOctagon className="size-4" />,
+        loading: <IconLoader className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };