chore: refactoring the toast docs (#4883)

apps/docs/content/components/toast/color.raw.jsx

@@ -3,16 +3,16 @@ import {addToast, Button} from "@heroui/react";
 export default function App() {
   return (
     <div className="flex flex-wrap gap-2">
-      {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+      {["Default", "Primary", "Secondary", "Success", "Warning", "Danger"].map((color) => (
         <Button
           key={color}
-          color={color}
+          color={color.toLowerCase()}
           variant={"flat"}
           onPress={() =>
             addToast({
               title: "Toast title",
               description: "Toast displayed successfully",
-              color: color,
+              color: color.toLowerCase(),
             })
           }
         >

apps/docs/content/components/toast/placement.raw.jsx

@@ -9,25 +9,25 @@ export default function App() {
       <ToastProvider placement={placement} toastOffset={placement.includes("top") ? 60 : 0} />
       <div className="flex flex-wrap gap-2">
         {[
-          "top-left",
-          "top-center",
-          "top-right",
-          "bottom-left",
-          "bottom-center",
-          "bottom-right",
+          ["Top Left", "top-left"],
+          ["Top Center", "top-center"],
+          ["Top Right", "top-right"],
+          ["Bottom Left", "bottom-left"],
+          ["Bottom Center", "bottom-center"],
+          ["Bottom Right", "bottom-right"],
         ].map((position) => (
           <Button
-            key={position}
+            key={position[1]}
             variant={"flat"}
             onPress={() => {
-              setPlacement(position);
+              setPlacement(position[1]);
               addToast({
                 title: "Toast title",
                 description: "Toast displayed successfully",
               });
             }}
           >
-            {position}
+            {position[0]}
           </Button>
         ))}
       </div>

apps/docs/content/components/toast/radius.raw.jsx

@@ -3,20 +3,26 @@ import {addToast, Button} from "@heroui/react";
 export default function App() {
   return (
     <div className="flex flex-wrap gap-2">
-      {["none", "sm", "md", "lg", "full"].map((radius) => (
+      {[
+        ["None", "none"],
+        ["Small", "sm"],
+        ["Medium", "md"],
+        ["Large", "lg"],
+        ["Full", "full"],
+      ].map((radius) => (
         <Button
-          key={radius}
-          radius={radius}
+          key={radius[1]}
+          radius={radius[1]}
           variant={"flat"}
           onPress={() =>
             addToast({
               title: "Toast title",
               description: "Toast displayed successfully",
-              radius: radius,
+              radius: radius[1],
             })
           }
         >
-          {radius}
+          {radius[0]}
         </Button>
       ))}
     </div>

apps/docs/content/components/toast/variants.raw.jsx

@@ -4,9 +4,9 @@ export default function App() {
   return (
     <div className="flex flex-wrap gap-2">
       {[
-        ["solid", "solid"],
-        ["bordered", "bordered"],
-        ["flat", "faded"],
+        ["Solid", "solid"],
+        ["Bordered", "bordered"],
+        ["Flat", "faded"],
       ].map((variant) => (
         <Button
           key={variant[0]}
@@ -17,7 +17,7 @@ export default function App() {
               title: "Toast title",
               description: "Toast displayed successfully",
               // @ts-ignore
-              variant: variant[0],
+              variant: variant[0].toLowerCase(),
               color: "secondary",
             })
           }

apps/docs/content/docs/components/toast.mdx

@@ -299,7 +299,7 @@ Toast has the following slots:
       attribute: "maxVisibleToasts",
       type: "number",
       description: "Maximum toasts which will be visible",
-      default: "5"
+      default: "3"
     },
     {
       attribute: "placement",