Update docs for 2.0 release

timolins · May 28, 2021 · 7587f5e · 7587f5e
1 parent a35ebb3
commit 7587f5e
Show file tree

Hide file tree

Showing 8 changed files with 455 additions and 170 deletions.
diff --git a/site/components/code.tsx b/site/components/code.tsx
@@ -103,9 +103,10 @@ const theme: PrismTheme = {
 
 export const Code: React.FC<{
   snippet: string;
+  language?: Language;
   className?: string;
 }> = (props) => {
-  const language = (props.className?.replace(/language-/, '') as any) || 'jsx';
+  const language = props.language || 'jsx';
 
   return (
     <Highlight

diff --git a/site/components/sections/toast-example.tsx b/site/components/sections/toast-example.tsx
@@ -171,16 +171,100 @@ const examples: Array<{
   },
   {
     title: 'Custom Position',
-    emoji: '⬇️',
+    emoji: '⬆️',
     snippet: `toast.success('Always at the bottom.', {
   position: "bottom-center"
 })`,
     action: () => {
       toast.success('Always at the bottom.', {
         position: 'bottom-center',
+        duration: 10000,
       });
     },
   },
+  {
+    title: 'TailwindCSS',
+    emoji: '️💨',
+    snippet: `toast.custom((t) => (
+  <div
+    className={\`\${
+      t.visible ? 'animate-enter' : 'animate-leave'
+    } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5\`}
+  >
+    <div className="flex-1 w-0 p-4">
+      <div className="flex items-start">
+        <div className="flex-shrink-0 pt-0.5">
+          <img
+            className="h-10 w-10 rounded-full"
+            src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
+            alt=""
+          />
+        </div>
+        <div className="ml-3 flex-1">
+          <p className="text-sm font-medium text-gray-900">
+            Emilia Gates
+          </p>
+          <p className="mt-1 text-sm text-gray-500">
+            Sure! 8:30pm works great!
+          </p>
+        </div>
+      </div>
+    </div>
+    <div className="flex border-l border-gray-200">
+      <button
+        onClick={() => toast.dismiss(t.id)}
+        className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+))`,
+    action: () => {
+      // toast.custom(<TestApp />);
+
+      toast.custom(
+        (t) => (
+          <div
+            className={`${
+              t.visible ? 'animate-enter' : 'animate-leave'
+            } max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+          >
+            <div className="flex-1 w-0 p-4">
+              <div className="flex items-start">
+                <div className="flex-shrink-0 pt-0.5">
+                  <img
+                    className="h-10 w-10 rounded-full"
+                    src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixqx=6GHAjsWpt9&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.2&w=160&h=160&q=80"
+                    alt=""
+                  />
+                </div>
+                <div className="ml-3 flex-1">
+                  <p className="text-sm font-medium text-gray-900">
+                    Emilia Gates
+                  </p>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Sure! 8:30pm works great!
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex border-l border-gray-200">
+              <button
+                onClick={() => toast.dismiss(t.id)}
+                className="w-full border border-transparent rounded-none rounded-r-lg p-4 flex items-center justify-center text-sm font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        ),
+        {
+          duration: 10000,
+        }
+      );
+    },
+  },
 ];
 
 export const ToastExample = () => {
@@ -208,8 +292,8 @@ export const ToastExample = () => {
           ))}
         </div>
       </div>
-      <div className="md:h-72 w-full overflow-hidden">
-        <Code snippet={snippet} />
+      <div className="md:h-72 w-full overflow-auto rounded-lg">
+        <Code snippet={snippet} className="!h-auto min-h-full" />
       </div>
     </section>
   );