VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(org): Work on showcase editor

Browse source
This commit is contained in:
Joost De Cock 2023-08-16 15:54:32 +02:00
parent 5e79eec9af
commit 70e636ce52
15 changed files with 492 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

24
sites/org/components/github/inputs.mjs
View file

@ -8,6 +8,7 @@ import { useToast } from 'shared/hooks/use-toast.mjs'
import { useDropzone } from 'react-dropzone'
import { Popout } from 'shared/components/popout/index.mjs'
import { Loading } from 'shared/components/spinner.mjs'
import { DownloadIcon } from 'shared/components/icons.mjs'
export const ns = ['account']
@ -69,6 +70,7 @@ export const ImageInput = ({ slug = false, setImg, img, type = 'showcase', subId
const toast = useToast()
const { t } = useTranslation(ns)
const [uploading, setUploading] = useState(false)
const [url, setUrl] = useState('')
const onDrop = useCallback(
(acceptedFiles) => {
@ -84,6 +86,13 @@ export const ImageInput = ({ slug = false, setImg, img, type = 'showcase', subId
[slug]
)
const imageFromUrl = async () => {
setUploading(true)
const result = await backend.uploadImage({ type, subId, slug, url })
setUploading(false)
if (result.success) setImg(result.data.imgId)
}
const { getRootProps, getInputProps } = useDropzone({ onDrop })
const removeImage = async () => {
@ -134,7 +143,7 @@ export const ImageInput = ({ slug = false, setImg, img, type = 'showcase', subId
{...getRootProps()}
className={`
flex rounded-lg w-full flex-col items-center justify-center
lg:h-64 lg:border-4 lg:border-secondary lg:border-dashed
lg:p-6 lg:border-4 lg:border-secondary lg:border-dashed
`}
>
<input {...getInputProps()} />
@ -142,6 +151,19 @@ export const ImageInput = ({ slug = false, setImg, img, type = 'showcase', subId
<p className="hidden lg:block p-0 my-2">{t('or')}</p>
<button className={`btn btn-secondary btn-outline mt-4 px-8`}>{t('imgSelectImage')}</button>
</div>
<p className="hidden lg:block p-0 my-2 text-center">{t('or')}</p>
<div className="flex flex-row items-center">
<input
type="url"
className="input input-secondary w-full input-bordered rounded-r-none"
placeholder="Paste an image URL here and click the download icon"
value={url}
onChange={(evt) => setUrl(evt.target.value)}
/>
<button disabled={!url} className="btn btn-secondary rounded-l-none" onClick={imageFromUrl}>
<DownloadIcon />
</button>
</div>
</div>
)
}