From 2246c458c886e8d2c57a2e229858168bb635b70b Mon Sep 17 00:00:00 2001 From: Salmen Hichri Date: Mon, 24 Jun 2024 06:56:25 +0100 Subject: [PATCH] Added examples to home page --- docs/package.json | 1 + docs/src/pages/(sections)/hero/hero.tsx | 18 +-- .../(sections)/previews/previews.module.css | 25 ++++ .../pages/(sections)/previews/previews.tsx | 68 ++++++++++ yarn.lock | 123 +++++++++++++++++- 5 files changed, 219 insertions(+), 16 deletions(-) create mode 100644 docs/src/pages/(sections)/previews/previews.module.css create mode 100644 docs/src/pages/(sections)/previews/previews.tsx diff --git a/docs/package.json b/docs/package.json index eab7b965..7545fd27 100644 --- 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 index 6cfb44e2..c4769c67 100644 --- 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 }) => {
- + +
diff --git a/docs/src/pages/(sections)/previews/previews.module.css b/docs/src/pages/(sections)/previews/previews.module.css new file mode 100644 index 00000000..cb25f2e1 --- /dev/null +++ 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 new file mode 100644 index 00000000..2bd3d041 --- /dev/null +++ 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: ( + + ) + }, + { + name: 'ChatGPT-Inspired UI', + content: ( + + ) + }, +]); + +export default function Previews() { + const {colorMode} = useColorMode(); + const categories = getCategories(colorMode === 'dark' ? 'dark' : 'light'); + + return ( +
+
+ + + {categories.map(({ name }) => ( + + {name} + + ))} + + + {categories.map(({ name, content }) => ( + + {content} + + ))} + + +
+
+ ) +} diff --git a/yarn.lock b/yarn.lock index f4dc34e0..472314a4 100644 --- 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,6 +2768,13 @@ "@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" @@ -2678,6 +2782,18 @@ dependencies: defer-to-connect "^2.0.1" +"@tanstack/react-virtual@3.5.0": + 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/virtual-core@3.5.0": + 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==