worked on dialogs

LiveDuo · Nov 5, 2023 · 1a8ff55 · 1a8ff55
1 parent 2a688ac
commit 1a8ff55
Show file tree

Hide file tree

Showing 4 changed files with 336 additions and 0 deletions.
diff --git a/lib/client/vanilla/button.tsx b/lib/client/vanilla/button.tsx
@@ -0,0 +1,173 @@
+import React, { useState } from 'react'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+
+import Select from './select'
+
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'
+import ChevronDownIcon from '@heroicons/react/24/outline/ChevronDownIcon'
+
+// @ts-ignore
+import cx from 'classnames'
+
+const capitalize = (text: string) => text[0].toUpperCase() + text.substring(1, text.length)
+
+const options = ['url', 'email', 'submit']
+const methods = ['GET', 'POST']
+
+interface DialogProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const Dialog: React.FC<DialogProps> = ({ open, setOpen }) => {
+  const [openSelect, setOpenSelect] = useState(false)
+
+  const [url, setUrl] = useState('')
+  const [email, setEmail] = useState('')
+  const [submitUrl, setSubmitUrl] = useState('')
+  const [submitMethod, setSubmitMethod] = useState('GET')
+  const [submitAsync, setSubmitAsync] = useState(true)
+  const [methodSelect, setMethodSelect] = useState(true)
+  const [newTab, setNewTab] = useState(true)
+  const [type, setType] = useState('url')
+
+  const onChange = (e: string) => {
+    setType(e.toLowerCase())
+  }
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay>
+          <DialogPrimitive.Content
+            className={cx(
+              'fixed shadow bg-white rounded-lg p-4',
+              'w-[95vw] max-w-md md:w-full',
+              'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',
+            )}
+          >
+            <DialogPrimitive.Title className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              Update Button
+            </DialogPrimitive.Title>
+
+            <DialogPrimitive.Description className="mt-2 text-sm font-normal text-gray-700 dark:text-gray-400">
+              <div className="mt-4 mb-4">
+                <div>
+                  <div
+                    className="flex rounded py-2 px-4 transition cursor-pointer items-center ml-2 mb-4"
+                    onClick={() => setOpenSelect(true)}
+                  >
+                    {capitalize(type)} <ChevronDownIcon className="h-4 w-4 ml-2" />
+                  </div>
+                  <Select
+                    defaultValue={type}
+                    values={options.map((o) => capitalize(o))}
+                    open={openSelect}
+                    setOpen={setOpenSelect}
+                    onChange={onChange}
+                  />
+
+                  <div>
+                    {/* Url */}
+                    {type === 'url' && (
+                      <div className="flex justify-center mb-4 flex-col">
+                        <input
+                          type="text"
+                          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 mb-4"
+                          placeholder="Eg. https://github.com/LiveDuo/destack"
+                          defaultValue={url as string}
+                          onChange={(e) => setUrl(e.target.value)}
+                        />
+                        <div className="flex items-center ml-4">
+                          <p>Open in new tab</p>
+                          <input
+                            defaultChecked={newTab}
+                            type="checkbox"
+                            onChange={(e) => setNewTab(e.target.checked)}
+                            className="ml-4 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"
+                          />
+                        </div>
+                      </div>
+                    )}
+                    {/* Email */}
+                    {type === 'email' && (
+                      <div className="flex justify-center mb-4">
+                        <input
+                          type="text"
+                          className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5"
+                          placeholder="Eg. [email protected]"
+                          defaultValue={email as string}
+                          onChange={(e) => setEmail(e.target.value)}
+                        />
+                      </div>
+                    )}
+                    {/* Submit */}
+                    {type === 'submit' && (
+                      <div className="flex justify-center mb-4 flex-col">
+                        <div className="flex justify-end mb-4">
+                          <input
+                            type="text"
+                            className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5"
+                            placeholder="Eg. /api/submit"
+                            defaultValue={submitUrl as string}
+                            onChange={(e) => setSubmitUrl(e.target.value)}
+                          />
+                          <div
+                            className="flex rounded py-2 px-4 transition cursor-pointer items-center ml-2"
+                            onClick={() => setMethodSelect(true)}
+                          >
+                            {submitMethod} <ChevronDownIcon className="h-4 w-4 ml-2" />
+                          </div>
+                          <Select
+                            defaultValue={submitMethod}
+                            values={methods}
+                            open={methodSelect}
+                            setOpen={setMethodSelect}
+                            onChange={(e) => setSubmitMethod(e)}
+                          />
+                        </div>
+                        <div className="flex items-center ml-4">
+                          <p>Async</p>
+                          <input
+                            defaultChecked={submitAsync}
+                            type="checkbox"
+                            onChange={(e) => setSubmitAsync(e.target.checked)}
+                            className="ml-4 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"
+                          />
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </div>
+            </DialogPrimitive.Description>
+
+            <div className="mt-4 flex justify-end">
+              <DialogPrimitive.Close
+                onClick={() => {
+                  setOpen(false)
+                }}
+                className={cx(
+                  'inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium',
+                  'bg-blue-600 text-white hover:bg-blue-700 border border-transparent',
+                )}
+              >
+                Save
+              </DialogPrimitive.Close>
+            </div>
+
+            <DialogPrimitive.Close
+              onClick={() => setOpen(false)}
+              className={cx('absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1')}
+            >
+              <XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-700" />
+            </DialogPrimitive.Close>
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Overlay>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+export default Dialog
diff --git a/lib/client/vanilla/editor.tsx b/lib/client/vanilla/editor.tsx
@@ -16,6 +16,9 @@ import PencilIcon from '@heroicons/react/24/outline/PencilIcon'
 
 import Select from './select'
 import ImageDialog from './image'
+import ButtonDialog from './button'
+import LinkDialog from './link'
+import SvgDialog from './svg'
 
 const standaloneServerPort = 12785
 
@@ -386,6 +389,9 @@ function Editor({ standaloneServer = false }) {
           )}
         </div>
         <ImageDialog open={openImage} setOpen={setOpenImage} standaloneServer={standaloneServer} />
+        <SvgDialog open={false} setOpen={() => {}} />
+        <LinkDialog open={false} setOpen={() => {}} />
+        <ButtonDialog open={false} setOpen={() => {}} />
         <div className="flex justify-center bg-gray-200" style={{ overflowY: 'scroll' }}>
           <div
             id="editor"

diff --git a/lib/client/vanilla/link.tsx b/lib/client/vanilla/link.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'
+
+// @ts-ignore
+import cx from 'classnames'
+
+interface DialogProps {
+  open: boolean
+  setOpen: (open: boolean) => void
+}
+
+const Dialog: React.FC<DialogProps> = ({ open, setOpen }) => {
+  const [link, setLink] = useState('')
+  const [newTab, setNewTab] = useState(true)
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay>
+          <DialogPrimitive.Content
+            className={cx(
+              'fixed shadow bg-white rounded-lg p-4',
+              'w-[95vw] max-w-md md:w-full',
+              'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',
+            )}
+          >
+            <DialogPrimitive.Title className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              Update Link
+            </DialogPrimitive.Title>
+
+            <div className="mt-8 mb-4">
+              <div>
+                <div>
+                  <div className="flex justify-center mb-4 flex-col">
+                    <input
+                      type="text"
+                      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 mb-4"
+                      placeholder="Eg. https://github.com/LiveDuo/destack"
+                      defaultValue={link as string}
+                      onChange={(e) => setLink(e.target.value)}
+                    />
+                    <div className="flex items-center ml-4">
+                      <p>Open in new tab</p>
+                      <input
+                        defaultChecked={newTab}
+                        type="checkbox"
+                        onChange={(e) => setNewTab(e.target.checked)}
+                        className="ml-4 w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-4 flex justify-end">
+              <DialogPrimitive.Close
+                onClick={() => {
+                  setOpen(false)
+                }}
+                className={cx(
+                  'inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium',
+                  'bg-blue-600 text-white hover:bg-blue-700 border border-transparent',
+                )}
+              >
+                Save
+              </DialogPrimitive.Close>
+            </div>
+
+            <DialogPrimitive.Close
+              onClick={() => setOpen(false)}
+              className={cx('absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1')}
+            >
+              <XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-700" />
+            </DialogPrimitive.Close>
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Overlay>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+export default Dialog
diff --git a/lib/client/vanilla/svg.tsx b/lib/client/vanilla/svg.tsx
@@ -0,0 +1,72 @@
+import React, { useState } from 'react'
+
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'
+
+// @ts-ignore
+import cx from 'classnames'
+
+type DialogProps = { open: boolean; setOpen: any }
+
+const Dialog: React.FC<DialogProps> = ({ open, setOpen }) => {
+  const [path, setPath] = useState('')
+
+  return (
+    <DialogPrimitive.Root open={open} onOpenChange={setOpen}>
+      <DialogPrimitive.Portal>
+        <DialogPrimitive.Overlay>
+          <DialogPrimitive.Content
+            className={cx(
+              'fixed shadow bg-white rounded-lg p-4',
+              'w-[95vw] max-w-md md:w-full',
+              'top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2',
+            )}
+          >
+            <DialogPrimitive.Title className="text-sm font-medium text-gray-900 dark:text-gray-100">
+              Update SVG Path
+            </DialogPrimitive.Title>
+
+            <div className="mt-8 mb-4">
+              <div>
+                <div>
+                  <div className="flex justify-center mb-4 flex-col">
+                    <input
+                      type="text"
+                      className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 mb-4"
+                      placeholder="Eg. d = 'M150 0 L75 200 L225 200 Z'"
+                      defaultValue={path as string}
+                      onChange={(e) => setPath(e.target.value)}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-4 flex justify-end">
+              <DialogPrimitive.Close
+                onClick={() => {
+                  setOpen(false)
+                }}
+                className={cx(
+                  'inline-flex select-none justify-center rounded-md px-4 py-2 text-sm font-medium',
+                  'bg-blue-600 text-white hover:bg-blue-700 border border-transparent',
+                )}
+              >
+                Save
+              </DialogPrimitive.Close>
+            </div>
+
+            <DialogPrimitive.Close
+              onClick={() => setOpen(false)}
+              className={cx('absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-full p-1')}
+            >
+              <XMarkIcon className="h-4 w-4 text-gray-500 hover:text-gray-700" />
+            </DialogPrimitive.Close>
+          </DialogPrimitive.Content>
+        </DialogPrimitive.Overlay>
+      </DialogPrimitive.Portal>
+    </DialogPrimitive.Root>
+  )
+}
+
+export default Dialog