From 61120777d4012a78ce399a5c25f40683d7b537c1 Mon Sep 17 00:00:00 2001
From: satnaing <satnaingdev@gmail.com>
Date: Sat, 14 Sep 2024 16:10:40 +0700
Subject: [PATCH] feat: add example section

---
 README.md   |  6 ++++++
 src/App.tsx | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+)

diff --git a/README.md b/README.md
index d9e1fd3..461e572 100644
--- a/README.md
+++ b/README.md
@@ -161,6 +161,12 @@ export default function MyComponent() {
 }
 ```
 
+## Examples
+
+- [PinInput (ShadcnUI + React Hook Form)](https://stackblitz.com/edit/pin-input-shadcn-react-hook-form?file=src%2FApp.tsx)
+- [PinInput Raw (Controlled)](https://stackblitz.com/edit/pin-input-raw?file=src%2FApp.tsx)
+- [PinInput Raw (Uncontrolled)](https://stackblitz.com/edit/pin-input-raw-uncontolled?file=src%2FApp.tsx)
+
 ## Author
 
 Crafted with 🤍 by [Sat Naing](https://satnaing.dev). The design of the website is inspired by [https://time.openstatus.dev](https://time.openstatus.dev)
diff --git a/src/App.tsx b/src/App.tsx
index 929fa3e..14d287c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,6 +3,7 @@ import {
   IconBrandLinkedin,
   IconBrandX,
   IconDeviceLaptop,
+  IconExternalLink,
   IconGitFork,
   IconHeart,
   IconStar,
@@ -145,6 +146,55 @@ export default function App() {
               </Accordion>
             </div>
           </div>
+
+          {/* Examples */}
+          <div className="bg-card p-4 rounded-md shadow-sm col-span-12">
+            <h2 className="font-medium text-lg">Examples</h2>
+            <ul className="mt-2 divide-y">
+              <li>
+                <a
+                  href="https://stackblitz.com/edit/pin-input-shadcn-react-hook-form?file=src%2FApp.tsx"
+                  target="_blank"
+                  rel="noopener"
+                  className="flex gap-1 justify-between text-sm sm:text-base sm:w-fit w-full items-center hover:underline decoration-dashed underline-offset-4 py-1"
+                >
+                  <span>PinInput (ShadcnUI + React Hook Form)</span>
+                  <IconExternalLink
+                    size={20}
+                    className="flex-none text-muted-foreground stroke-2"
+                  />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://stackblitz.com/edit/pin-input-raw?file=src%2FApp.tsx"
+                  target="_blank"
+                  rel="noopener"
+                  className="flex gap-1 justify-between text-sm sm:text-base sm:w-fit w-full items-center hover:underline decoration-dashed underline-offset-4 py-1"
+                >
+                  <span>PinInput Raw (Controlled)</span>
+                  <IconExternalLink
+                    size={20}
+                    className="flex-none text-muted-foreground stroke-2"
+                  />
+                </a>
+              </li>
+              <li>
+                <a
+                  href="https://stackblitz.com/edit/pin-input-raw-uncontolled?file=src%2FApp.tsx"
+                  target="_blank"
+                  rel="noopener"
+                  className="flex gap-1 justify-between text-sm sm:text-base sm:w-fit w-full items-center hover:underline decoration-dashed underline-offset-4 py-1"
+                >
+                  <span>PinInput Raw (Uncontrolled)</span>
+                  <IconExternalLink
+                    size={20}
+                    className="flex-none text-muted-foreground stroke-2"
+                  />
+                </a>
+              </li>
+            </ul>
+          </div>
         </section>
       </main>