Added examples to home page

nlkitai · Jun 24, 2024 · 2246c45 · 2246c45
1 parent 68084c4
commit 2246c45
Show file tree

Hide file tree

Showing 5 changed files with 219 additions and 16 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -21,6 +21,7 @@
     "@docusaurus/preset-classic": "^3",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@headlessui/react": "^2.1.0",
     "@mdx-js/react": "^3",
     "add": "^2",
     "clsx": "^2",

diff --git a/docs/src/pages/(sections)/hero/hero.tsx b/docs/src/pages/(sections)/hero/hero.tsx
@@ -2,12 +2,9 @@ import {useEffect, useState} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import {useColorMode} from '@docusaurus/theme-common';
-import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
-import exampleIntroFileSendFunction from '@site/src/pages/(examples)/intro/send';
-import exampleIntroFileAiChatBot from '@site/src/pages/(examples)/intro/example';
-import exampleIntroFilePersonas from '@site/src/pages/(examples)/intro/personas';
 import styles from '@site/src/pages/index.module.css';
 import borderStyles from './border.module.css';
+import Previews from '@site/src/pages/(sections)/previews/previews';
 import heroStyles from '@site/src/pages/(sections)/hero/hero.module.css';
 import Heading from '@theme/Heading';
 
@@ -102,17 +99,8 @@ export const Hero = ({className}: { className?: string }) => {
                     </Link>
                 </div>
                 <div className={styles.nluxInAction}>
-                    <CodeEditor
-                        className={styles.codeEditor}
-                        direction="row"
-                        files={{
-                            'App.tsx': exampleIntroFileAiChatBot,
-                            'send.ts': exampleIntroFileSendFunction,
-                            'personas.tsx': exampleIntroFilePersonas,
-                        }}
-                        editorHeight={420}
-                        simulatedPrompt="How an AI assistant can enhance my website's user experience?"
-                    />
+                    <Previews/>
+
                 </div>
             </div>
         </header>

diff --git a/docs/src/pages/(sections)/previews/previews.module.css b/docs/src/pages/(sections)/previews/previews.module.css
@@ -0,0 +1,25 @@
+.tabList {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    width: 840px;
+}
+
+.tab {
+    padding: 10px;
+    margin: 10px 0;
+    border: none;
+    background: none;
+    font-weight: bold;
+    border-bottom: 2px solid #f75f02;
+}
+
+.tab[aria-selected="true"] {
+    font-weight: bolder;
+    color: #f75f02;
+}
+
+.tab:active,
+.tab:hover {
+    cursor: pointer;
+}
diff --git a/docs/src/pages/(sections)/previews/previews.tsx b/docs/src/pages/(sections)/previews/previews.tsx
@@ -0,0 +1,68 @@
+import {useColorMode} from '@docusaurus/theme-common';
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import {CodeEditor} from '@site/src/components/CodeEditor/CodeEditor';
+import exampleIntroFileAiChatBot from '@site/src/pages/(examples)/intro/example';
+import exampleIntroFilePersonas from '@site/src/pages/(examples)/intro/personas';
+import exampleIntroFileSendFunction from '@site/src/pages/(examples)/intro/send';
+import styles from '@site/src/pages/index.module.css';
+import previewsStyle from './previews.module.css';
+
+const getCategories = (colorScheme) => ([
+    {
+        name: 'NLUX with React',
+        content: (
+            <CodeEditor
+                className={styles.codeEditor}
+                direction="row"
+                files={{
+                    'App.tsx': exampleIntroFileAiChatBot,
+                    'send.ts': exampleIntroFileSendFunction,
+                    'personas.tsx': exampleIntroFilePersonas,
+                }}
+                editorHeight={420}
+                simulatedPrompt="How an AI assistant can enhance my website's user experience?"
+            />
+        )
+    },
+    {
+        name: 'ChatGPT-Inspired UI',
+        content: (
+            <iframe
+                style={{
+                    width: 840,
+                    maxWidth: '100%',
+                    height: 520,
+                }}
+                src={`https://nlux-shadcn-chatgpt-ui.vercel.app/?colorScheme=${colorScheme}`}
+            ></iframe>
+        )
+    },
+]);
+
+export default function Previews() {
+    const {colorMode} = useColorMode();
+    const categories = getCategories(colorMode === 'dark' ? 'dark' : 'light');
+
+    return (
+        <div>
+            <div>
+                <TabGroup>
+                    <TabList className={previewsStyle.tabList}>
+                        {categories.map(({ name }) => (
+                            <Tab key={name} className={previewsStyle.tab}>
+                                {name}
+                            </Tab>
+                        ))}
+                    </TabList>
+                    <TabPanels>
+                        {categories.map(({ name, content }) => (
+                            <TabPanel key={name}>
+                                {content}
+                            </TabPanel>
+                        ))}
+                    </TabPanels>
+                </TabGroup>
+            </div>
+        </div>
+    )
+}
diff --git a/yarn.lock b/yarn.lock
@@ -2095,6 +2095,42 @@
   resolved "https://registry.yarnpkg.com/@eslint/object-schema/-/object-schema-2.1.4.tgz#9e69f8bb4031e11df79e03db09f9dbbae1740843"
   integrity sha512-BsWiH1yFGjXXS2yvrf5LyuoSIIbPrGUWob917o+BTKuZ7qJdxX8aJLRxs1fS9n6r7vESrq1OUqb68dANcFXuQQ==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.2.tgz#d37f3e0ac1f1c756c7de45db13303a266226851a"
+  integrity sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==
+  dependencies:
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/dom@^1.0.0":
+  version "1.6.5"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9"
+  integrity sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.0.tgz#4f0e5e9920137874b2405f7d6c862873baf4beff"
+  integrity sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==
+  dependencies:
+    "@floating-ui/dom" "^1.0.0"
+
+"@floating-ui/react@^0.26.16":
+  version "0.26.17"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react/-/react-0.26.17.tgz#efa2e1a0dea3d9d308965c5ccd49756bb64a883d"
+  integrity sha512-ESD+jYWwqwVzaIgIhExrArdsCL1rOAzryG/Sjlu8yaD3Mtqi3uVyhbE2V7jD58Mo52qbzKz2eUY/Xgh5I86FCQ==
+  dependencies:
+    "@floating-ui/react-dom" "^2.1.0"
+    "@floating-ui/utils" "^0.2.0"
+    tabbable "^6.0.0"
+
+"@floating-ui/utils@^0.2.0":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
+  integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
+
 "@hapi/hoek@^9.0.0", "@hapi/hoek@^9.3.0":
   version "9.3.0"
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.3.0.tgz#8368869dcb735be2e7f5cb7647de78e167a251fb"
@@ -2107,6 +2143,16 @@
   dependencies:
     "@hapi/hoek" "^9.0.0"
 
+"@headlessui/react@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-2.1.0.tgz#a699e60a6b72b6bc2eb3a23eacf5bda28e773926"
+  integrity sha512-/MizQk2xqR5ELkmCI1xWy3VgJULvR8gcAXtZhcK7sY53TNRCPeMdeODEXKSv9LPSSRlEAyzW1+NGJiaXq6dLRw==
+  dependencies:
+    "@floating-ui/react" "^0.26.16"
+    "@react-aria/focus" "^3.17.1"
+    "@react-aria/interactions" "^3.21.3"
+    "@tanstack/react-virtual" "3.5.0"
+
 "@huggingface/inference@^2":
   version "2.7.0"
   resolved "https://registry.yarnpkg.com/@huggingface/inference/-/inference-2.7.0.tgz#7a44a3c40683b9355933e98e639998da62c58117"
@@ -2352,6 +2398,45 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.25.tgz#f077fdc0b5d0078d30893396ff4827a13f99e817"
   integrity sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==
 
+"@react-aria/focus@^3.17.1":
+  version "3.17.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/focus/-/focus-3.17.1.tgz#c796a188120421e2fedf438cadacdf463c77ad29"
+  integrity sha512-FLTySoSNqX++u0nWZJPPN5etXY0WBxaIe/YuL/GTEeuqUIuC/2bJSaw5hlsM6T2yjy6Y/VAxBcKSdAFUlU6njQ==
+  dependencies:
+    "@react-aria/interactions" "^3.21.3"
+    "@react-aria/utils" "^3.24.1"
+    "@react-types/shared" "^3.23.1"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
+"@react-aria/interactions@^3.21.3":
+  version "3.21.3"
+  resolved "https://registry.yarnpkg.com/@react-aria/interactions/-/interactions-3.21.3.tgz#a2a3e354a8b894bed7a46e1143453f397f2538d7"
+  integrity sha512-BWIuf4qCs5FreDJ9AguawLVS0lV9UU+sK4CCnbCNNmYqOWY+1+gRXCsnOM32K+oMESBxilAjdHW5n1hsMqYMpA==
+  dependencies:
+    "@react-aria/ssr" "^3.9.4"
+    "@react-aria/utils" "^3.24.1"
+    "@react-types/shared" "^3.23.1"
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/ssr@^3.9.4":
+  version "3.9.4"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.4.tgz#9da8b10342c156e816dbfa4c9e713b21f274d7ab"
+  integrity sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-aria/utils@^3.24.1":
+  version "3.24.1"
+  resolved "https://registry.yarnpkg.com/@react-aria/utils/-/utils-3.24.1.tgz#9d16023f07c23c41793c9030a9bd203a9c8cf0a7"
+  integrity sha512-O3s9qhPMd6n42x9sKeJ3lhu5V1Tlnzhu6Yk8QOvDuXf7UGuUjXf9mzfHJt1dYzID4l9Fwm8toczBzPM9t0jc8Q==
+  dependencies:
+    "@react-aria/ssr" "^3.9.4"
+    "@react-stately/utils" "^3.10.1"
+    "@react-types/shared" "^3.23.1"
+    "@swc/helpers" "^0.5.0"
+    clsx "^2.0.0"
+
 "@react-hook/intersection-observer@^3.1.1":
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/@react-hook/intersection-observer/-/intersection-observer-3.1.1.tgz#6b8fdb80d133c9c28bc8318368ecb3a1f8befc50"
@@ -2365,6 +2450,18 @@
   resolved "https://registry.yarnpkg.com/@react-hook/passive-layout-effect/-/passive-layout-effect-1.2.1.tgz#c06dac2d011f36d61259aa1c6df4f0d5e28bc55e"
   integrity sha512-IwEphTD75liO8g+6taS+4oqz+nnroocNfWVHWz7j+N+ZO2vYrc6PV1q7GQhuahL0IOR7JccFTsFKQ/mb6iZWAg==
 
+"@react-stately/utils@^3.10.1":
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/@react-stately/utils/-/utils-3.10.1.tgz#dc8685b4994bef0dc10c37b024074be8afbfba62"
+  integrity sha512-VS/EHRyicef25zDZcM/ClpzYMC5i2YGN6uegOeQawmgfGjb02yaCX0F0zR69Pod9m2Hr3wunTbtpgVXvYbZItg==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
+"@react-types/shared@^3.23.1":
+  version "3.23.1"
+  resolved "https://registry.yarnpkg.com/@react-types/shared/-/shared-3.23.1.tgz#2f23c81d819d0ef376df3cd4c944be4d6bce84c3"
+  integrity sha512-5d+3HbFDxGZjhbMBeFHRQhexMFt4pUce3okyRtUVKbbedQFUrtXSBg9VszgF2RTeQDKDkMCIQDtz5ccP/Lk1gw==
+
 "@rollup/plugin-alias@^5":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz#99a94accc4ff9a3483be5baeedd5d7da3b597e93"
@@ -2671,13 +2768,32 @@
     "@svgr/plugin-jsx" "8.1.0"
     "@svgr/plugin-svgo" "8.1.0"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.11"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.11.tgz#5bab8c660a6e23c13b2d23fcd1ee44a2db1b0cb7"
+  integrity sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==
+  dependencies:
+    tslib "^2.4.0"
+
 "@szmarczak/http-timer@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-5.0.1.tgz#c7c1bf1141cdd4751b0399c8fc7b8b664cd5be3a"
   integrity sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==
   dependencies:
     defer-to-connect "^2.0.1"
 
+"@tanstack/[email protected]":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-virtual/-/react-virtual-3.5.0.tgz#873b5b77cf78af563a4a11e6251ed51ee8868132"
+  integrity sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==
+  dependencies:
+    "@tanstack/virtual-core" "3.5.0"
+
+"@tanstack/[email protected]":
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.5.0.tgz#108208d0f1d75271300bc5560cf9a85a1fa01e89"
+  integrity sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==
+
 "@testing-library/dom@^9", "@testing-library/dom@^9.0.0":
   version "9.3.4"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.4.tgz#50696ec28376926fec0a1bf87d9dbac5e27f60ce"
@@ -10840,6 +10956,11 @@ symlink-dir@^6:
     better-path-resolve "^1.0.0"
     rename-overwrite "^5.0.0"
 
+tabbable@^6.0.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97"
+  integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==
+
 tapable@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -11003,7 +11124,7 @@ ts-node@^10:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-tslib@^2, tslib@^2.0.3, tslib@^2.6.0:
+tslib@^2, tslib@^2.0.3, tslib@^2.4.0, tslib@^2.6.0:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.3.tgz#0438f810ad7a9edcde7a241c3d80db693c8cbfe0"
   integrity sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==