refactor: (playground) rename ToastCustomOptions to ToastHeadless and update toast messages for ToastAnimation

Author: pheralb

website/src/components/playground/toastAnimation.tsx

@@ -12,9 +12,9 @@ const ToastAnimation = () => {
 
   const handleChangeAnimation = (animation: ToastAnimations) => {
     setToastAnimation(animation);
-    toast.default({
-      text: `A default toast 🚀`,
-      description: `✨ @pheralb/toast`,
+    toast.info({
+      text: `Close me 👀`,
+      description: `✨ ${animation} animation`,
     });
   };
 

website/src/components/playground/toastCustomOptions.tsx website/src/components/playground/toastHeadless.tsx

@@ -15,7 +15,7 @@ import Codeblock from "@/components/codeblock/client";
 
 import { Button } from "@/ui/button";
 
-const ToastCustomOptions = () => {
+const ToastHeadless = () => {
   const { applyCustomTheme, setApplyCustomTheme } = useDocsStore();
 
   const toastStyles: ToastOptions = {
@@ -30,9 +30,7 @@ const ToastCustomOptions = () => {
         "relative flex items-center",
       ),
       container: cn("flex items-center py-4 space-x-2 px-4 w-full"),
-      content: cn(
-        "flex flex-col space-y-0.5 mr-2 [p:nth-child(1)]:text-red-500 dark:[p:nth-child(1)]:text-red-400",
-      ),
+      content: cn("flex flex-col space-y-0.5 mr-2"),
       actions: {
         container: cn("flex flex-col px-3"),
         actionBtn: cn(
@@ -66,8 +64,8 @@ const ToastCustomOptions = () => {
 
   const handleTryToast = () => {
     toast.success({
-      text: "Custom styles",
-      description: "Built with Tailwind CSS",
+      text: "Headless Toast",
+      description: "with Tailwind CSS",
       delayDuration: 14000,
       action: {
         onClick: () => {
@@ -153,4 +151,4 @@ const ToastCustomOptions = () => {
   );
 };
 
-export default ToastCustomOptions;
+export default ToastHeadless;

website/src/mdx/components.tsx

@@ -6,14 +6,14 @@ import InstallLibrary from "@/components/installLibrary";
 import FrameworkGuidesComponent from "@/components/frameworkGuides";
 
 // Playground Components:
-import ToastCustomOptions from "@/components/playground/toastCustomOptions";
 import {
   ToastVariantExamples,
   ToastActionsExamples,
   ToastLoadingExample,
 } from "@/components/playground/toast";
 import { Positions, ThemeExamples } from "@/components/playground/toaster";
 import ToastAnimation from "@/components/playground/toastAnimation";
+import ToastHeadless from "@/components/playground/toastHeadless";
 
 // Local Components:
 import CodeblockMDX from "@/components/codeblock/mdx";
@@ -34,7 +34,7 @@ export function MDX(props: MDXComponentsProps) {
         Hero,
         Positions,
         ThemeExamples,
-        ToastCustomOptions,
+        ToastHeadless,
         ToastVariantExamples,
         ToastActionsExamples,
         ToastLoadingExample,