feat: add zustand playground (#3209)

* feat: add zustand playground

* use another playground

* fix styles

---------

Co-authored-by: daishi <[email protected]>

Author: Triumph-light

examples/demo/src/components/Details.jsx

@@ -6,18 +6,17 @@ export default function Details() {
         <a href="https://github.com/pmndrs/zustand">Github</a>
       </nav>
       <div className="bottom">
-        <a
-          href="https://github.com/pmndrs/zustand/tree/main/examples/demo"
-          className="bottom-right"
-        >
-          {'<Source />'}
-        </a>
-        <a
-          href="https://www.instagram.com/tina.henschel/"
-          className="bottom-left"
-        >
+        <a href="https://www.instagram.com/tina.henschel/">
           Illustrations @ Tina Henschel
         </a>
+        <div className="bottom-links">
+          <a href="https://github.com/pmndrs/zustand/tree/main/examples/demo">
+            {'<Source />'}
+          </a>
+          <a href="https://stackblitz.com/github/pmndrs/zustand/tree/main/examples/starter?file=src%2Findex.tsx">
+            {'<Playground />'}
+          </a>
+        </div>
       </div>
       <span className="header-left">Zustand</span>
     </>

examples/demo/src/styles.css

@@ -158,14 +158,26 @@ a {
   flex: 0 0 auto;
 }
 
-a.bottom-left {
+.bottom {
+  position: fixed;
   bottom: 40px;
   left: 40px;
+  right: 40px;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
 }
 
-a.bottom-right {
-  bottom: 40px;
-  right: 40px;
+.bottom a {
+  position: static;
+}
+
+.bottom-links {
+  display: flex;
+  gap: 16px;
+  align-items: center;
 }
 
 .snippet-container {