fix: update docs website with new useToast API

Author: pheralb

website/app/components/examples.tsx

@@ -53,9 +53,8 @@ const Positions = () => {
   const iconSize = 14;
 
   const handleChangePosition = (position: Position) => {
-    t.open({
+    t.success({
       text: `Position changed`,
-      variant: 'info',
       description: `Position changed to ${position}`,
     });
     setToastPosition(position);
@@ -124,50 +123,50 @@ const Theme = () => {
 
   const handleChangeTheme = (theme: Theme | undefined) => {
     if (theme === undefined) {
-      t.open({
+      t.success({
         text: 'Theme reset to default',
-        variant: 'success',
       });
     } else {
-      t.open({
+      t.success({
         text: `Theme changed to ${theme}`,
-        variant: 'success',
       });
     }
     setToastTheme(theme);
   };
 
   return (
     <div className="flex flex-col space-y-2">
-      <div className="flex items-center space-x-2 py-2">
-        <Button variant="outline" onClick={() => handleChangeTheme(undefined)}>
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2 py-2">
+          <Button
+            variant="outline"
+            className={toastTheme === 'light' ? activeBtn : ''}
+            onClick={() => handleChangeTheme('light')}
+          >
+            {toastTheme === 'light' ? (
+              <CheckIcon size={iconSize} />
+            ) : (
+              <SunIcon size={iconSize} />
+            )}
+            <span>light</span>
+          </Button>
+          <Button
+            variant="outline"
+            className={toastTheme === 'dark' ? activeBtn : ''}
+            onClick={() => handleChangeTheme('dark')}
+          >
+            {toastTheme === 'dark' ? (
+              <CheckIcon size={iconSize} />
+            ) : (
+              <MoonIcon size={iconSize} />
+            )}
+            <span>dark</span>
+          </Button>
+        </div>
+        <Button variant="ghost" onClick={() => handleChangeTheme(undefined)}>
           <RefreshCcwIcon size={iconSize} />
           <span>reset</span>
         </Button>
-        <Button
-          variant="outline"
-          className={toastTheme === 'light' ? activeBtn : ''}
-          onClick={() => handleChangeTheme('light')}
-        >
-          {toastTheme === 'light' ? (
-            <CheckIcon size={iconSize} />
-          ) : (
-            <SunIcon size={iconSize} />
-          )}
-          <span>light</span>
-        </Button>
-        <Button
-          variant="outline"
-          className={toastTheme === 'dark' ? activeBtn : ''}
-          onClick={() => handleChangeTheme('dark')}
-        >
-          {toastTheme === 'dark' ? (
-            <CheckIcon size={iconSize} />
-          ) : (
-            <MoonIcon size={iconSize} />
-          )}
-          <span>dark</span>
-        </Button>
       </div>
       <ProviderCodeBlock label="theme" value={toastTheme || 'system'} />
     </div>

website/app/components/header.tsx

@@ -11,8 +11,8 @@ const Header = () => {
   return (
     <nav
       className={cn(
-        'sticky top-0 z-50 bg-white/90 backdrop-blur-sm dark:bg-neutral-900/90',
-        'flex w-full border-b border-neutral-200 py-3 shadow-sm dark:border-neutral-800',
+        'sticky top-0 z-50 bg-neutral-50/90 backdrop-blur-sm dark:bg-neutral-900/90',
+        'flex w-full py-3 dark:border-neutral-800',
       )}
     >
       <div className="container flex max-w-7xl items-center justify-between">

website/app/components/hero.tsx

@@ -22,7 +22,7 @@ const Hero = () => {
         <Button
           variant="default"
           onClick={() =>
-            toast.open({
+            toast.default({
               text: 'pheralb/toast',
               description: '✨ A beautiful toast library for React',
             })

website/app/root.tsx

@@ -70,12 +70,12 @@ function App() {
           'text-neutral-900 dark:text-neutral-50',
         )}
       >
-        <Header />
         <ToastProvider
           position={toastPosition}
           theme={toastTheme ? toastTheme : theme!}
           toastFont="font-sans"
         >
+          <Header />
           <div className="container w-full max-w-7xl">
             <SidebarContent />
             <article