From 796133760661faa38c6d575d47449d259d42e663 Mon Sep 17 00:00:00 2001 From: Phodal Huang Date: Thu, 23 Nov 2023 16:47:30 +0800 Subject: [PATCH] feat: init setting dialog --- package-lock.json | 68 +++++++++++ package.json | 2 + pages/index.js | 16 +-- pages/settings.js | 59 ++++++++++ styles/global.css | 292 ++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 424 insertions(+), 13 deletions(-) create mode 100644 pages/settings.js diff --git a/package-lock.json b/package-lock.json index 51d7fd2..dc3ca1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "@radix-ui/colors": "^3.0.0", "@radix-ui/popper": "^0.1.0", "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-select": "^2.0.0", + "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@tailwindcss/typography": "^0.5.10", @@ -530,6 +532,42 @@ } } }, + "node_modules/@radix-ui/react-dialog": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz", + "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.5", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.4", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-portal": "1.0.4", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-controllable-state": "1.0.1", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-direction": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz", @@ -942,6 +980,36 @@ } } }, + "node_modules/@radix-ui/react-tabs": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz", + "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-presence": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-toggle": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz", diff --git a/package.json b/package.json index 8176aa4..0dccdc0 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,12 @@ "@radix-ui/colors": "^3.0.0", "@radix-ui/popper": "^0.1.0", "@radix-ui/react-accordion": "^1.1.2", + "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-popover": "^1.0.7", "@radix-ui/react-select": "^2.0.0", + "@radix-ui/react-tabs": "^1.0.4", "@radix-ui/react-toggle": "^1.0.3", "@radix-ui/react-toggle-group": "^1.0.4", "@tailwindcss/typography": "^0.5.10", diff --git a/pages/index.js b/pages/index.js index f5cb2c4..0e901ca 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,17 +1,7 @@ -import Head from 'next/head'; -import styles from '../styles/Home.module.css'; +import Head from 'next/head' +import styles from '../styles/Home.module.css' import LiveEditor from '../components/editor/live-editor' -import { GearIcon } from '@radix-ui/react-icons' - -function Settings () { - return
- -
-} +import { Settings } from './settings' export default function Home() { return ( diff --git a/pages/settings.js b/pages/settings.js new file mode 100644 index 0000000..3c89bca --- /dev/null +++ b/pages/settings.js @@ -0,0 +1,59 @@ +import styles from '../styles/Home.module.css' +import { Cross2Icon, GearIcon } from '@radix-ui/react-icons' +import * as Dialog from '@radix-ui/react-dialog' +import * as Tabs from '@radix-ui/react-tabs' + +export function Settings () { + return + +
+ +
+ + + + + Custom Prompt Settings + + + + + Toolbar AI + + + Bubble Menu + + + Slash Command + + + + + + + + + + + + + + + + + + + +} + +const SettingField = ({ label, children }) => ( + +) \ No newline at end of file diff --git a/styles/global.css b/styles/global.css index 8fc5030..2058fb8 100644 --- a/styles/global.css +++ b/styles/global.css @@ -390,9 +390,11 @@ input { color: var(--mauve-11); background-color: var(--mauve-2); } + .AccordionContent[data-state='open'] { animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1); } + .AccordionContent[data-state='closed'] { animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1); } @@ -405,6 +407,7 @@ input { color: var(--violet-10); transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1); } + .AccordionTrigger[data-state='open'] > .AccordionChevron { transform: rotate(180deg); } @@ -431,6 +434,295 @@ input { background-color: var(--violet-3); } +/* reset */ +button, +fieldset, +input { + all: unset; +} + +.DialogOverlay { + background-color: var(--black-a9); + position: fixed; + inset: 0; + animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.DialogContent { + background-color: white; + border-radius: 6px; + box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 90vw; + max-width: 450px; + max-height: 85vh; + padding: 25px; + animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1); +} + +.DialogContent:focus { + outline: none; +} + +.DialogTitle { + margin: 0; + font-weight: 500; + color: var(--mauve-12); + font-size: 17px; +} + +.DialogDescription { + margin: 10px 0 20px; + color: var(--mauve-11); + font-size: 15px; + line-height: 1.5; +} + +.Button { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 15px; + font-size: 15px; + line-height: 1; + font-weight: 500; + height: 35px; +} + +.Button.violet { + background-color: white; + color: var(--violet-11); + box-shadow: 0 2px 10px var(--black-a7); +} + +.Button.violet:hover { + background-color: var(--mauve-3); +} + +.Button.violet:focus { + box-shadow: 0 0 0 2px black; +} + +.Button.green { + background-color: var(--green-4); + color: var(--green-11); +} + +.Button.green:hover { + background-color: var(--green-5); +} + +.Button.green:focus { + box-shadow: 0 0 0 2px var(--green-7); +} + +.IconButton { + font-family: inherit; + border-radius: 100%; + height: 25px; + width: 25px; + display: inline-flex; + align-items: center; + justify-content: center; + color: var(--violet-11); + position: absolute; + top: 10px; + right: 10px; +} + +.IconButton:hover { + background-color: var(--violet-4); +} + +.IconButton:focus { + box-shadow: 0 0 0 2px var(--violet-7); +} + +.Fieldset { + display: flex; + gap: 20px; + align-items: center; + margin-bottom: 15px; +} + +.Label { + font-size: 15px; + color: var(--violet-11); + width: 90px; + text-align: right; +} + +.Input { + width: 100%; + flex: 1; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 10px; + font-size: 15px; + line-height: 1; + color: var(--violet-11); + box-shadow: 0 0 0 1px var(--violet-7); + height: 35px; +} + +.Input:focus { + box-shadow: 0 0 0 2px var(--violet-8); +} + +@keyframes overlayShow { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes contentShow { + from { + opacity: 0; + transform: translate(-50%, -48%) scale(0.96); + } + to { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } +} + + +.TabsRoot { + display: flex; + flex-direction: column; + margin-top: 2rem; + box-shadow: 0 2px 10px var(--black-a4); +} + +.TabsList { + flex-shrink: 0; + display: flex; + border-bottom: 1px solid var(--mauve-6); +} + +.TabsTrigger { + font-family: inherit; + background-color: white; + padding: 0 20px; + height: 45px; + flex: 1; + display: flex; + align-items: center; + justify-content: center; + font-size: 15px; + line-height: 1; + color: var(--mauve-11); + user-select: none; +} + +.TabsTrigger:first-child { + border-top-left-radius: 6px; +} + +.TabsTrigger:last-child { + border-top-right-radius: 6px; +} + +.TabsTrigger:hover { + color: var(--violet-11); +} + +.TabsTrigger[data-state='active'] { + color: var(--violet-11); + box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor; +} + +.TabsTrigger:focus { + position: relative; + box-shadow: 0 0 0 2px black; +} + +.TabsContent { + flex-grow: 1; + padding: 20px; + background-color: white; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + outline: none; +} + +.TabsContent:focus { + box-shadow: 0 0 0 2px black; +} + +.Text { + margin-top: 0; + margin-bottom: 20px; + color: var(--mauve-11); + font-size: 15px; + line-height: 1.5; +} + +.Fieldset { + margin-bottom: 15px; + width: 100%; + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.Label { + font-size: 13px; + line-height: 1; + margin-bottom: 10px; + color: var(--violet-12); + display: block; +} + +.Input { + flex: 1 0 auto; + border-radius: 4px; + padding: 0 10px; + font-size: 15px; + line-height: 1; + color: var(--violet-11); + box-shadow: 0 0 0 1px var(--violet-7); + height: 35px; +} + +.Input:focus { + box-shadow: 0 0 0 2px var(--violet-8); +} + +.Button { + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + padding: 0 15px; + font-size: 15px; + line-height: 1; + font-weight: 500; + height: 35px; +} + +.Button.green { + background-color: var(--green-4); + color: var(--green-11); +} + +.Button.green:hover { + background-color: var(--green-5); +} + +.Button.green:focus { + box-shadow: 0 0 0 2px var(--green-7); +} + .editor-section { margin: 1rem auto; padding: 1rem;