docs: update desc and examples

nhanluongoe · Mar 27, 2024 · 7749d43 · 7749d43
1 parent 4c239d4
commit 7749d43
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 13 deletions.
diff --git a/site/components/docs-layout.tsx b/site/components/docs-layout.tsx
@@ -2,6 +2,7 @@ import { NextSeo } from 'next-seo';
 import Link from 'next/link';
 import * as React from 'react';
 import { Footer } from './sections/footer';
+import GitHub from '../assets/github.svg';
 
 const TableItem: React.FC<{
   href: string;
@@ -35,11 +36,8 @@ export default function DocsLayout({ meta, children }) {
           <a href="/" className="font-bold text-2xl">
             react-stacked-toast
           </a>
-          <a
-            className="flex text-toast-600 underline"
-            href="https://github.com/nhanluongoe/react-stacked-toast"
-          >
-            GitHub
+          <a href="https://github.com/nhanluongoe/react-stacked-toast">
+            <GitHub />
           </a>
         </header>
 

diff --git a/site/pages/docs/index.mdx b/site/pages/docs/index.mdx
@@ -42,14 +42,22 @@ const App = () => {
 import { toast } from 'react-stacked-toast';
 
 const Component = () => {
+  const handleClick = () => {
+    // Quickly make a toast
+    toast("Here is your toast");
+
+    // Or need more customization
+    toast({
+      title: 'React Stacked Toast',
+      description: 'Here is your toast!',
+      icon: '🍞'
+      ...
+    });
+  }
+
   return (
     <button
-      onClick={() => {
-        toast({
-          title: 'React Stacked Toast',
-          description: 'Here is your toast!',
-        });
-      }}
+      onClick={handleClick}
     >
       Show toast
     </button>

diff --git a/site/pages/index.tsx b/site/pages/index.tsx
@@ -65,7 +65,7 @@ const Steps = () => (
       code={
         <>
           <span className="text-toast-600">toast</span>
-          <span className="text-toast-800">{`({title: "Wanna a toast?"})`}</span>
+          <span className="text-toast-800">{`("Wanna a toast?")`}</span>
         </>
       }
     />
@@ -76,7 +76,7 @@ const Features = () => (
   <div className="my-12 grid gap-x-8 gap-y-5 grid-cols-2 md:grid-cols-3">
     <Feature>Easy to use</Feature>
     <Feature>Customizable</Feature>
-    <Feature>Tiny</Feature>
+    <Feature>Stackable</Feature>
   </div>
 );