loading...
66 | 67 |loading...
{' '} 82 | 83 |55 | Fine tune 56 |
57 |{textList[textIdx]}
18 | } 19 | 20 | export default AnimatedText 21 | -------------------------------------------------------------------------------- /src/Components/UI/Button.jsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact' 2 | 3 | const Button = ({ 4 | variant, 5 | href, 6 | children, 7 | fontWeight, 8 | colorRGB = '#ffffff', 9 | textSize = 'sm', 10 | onClick, 11 | }) => { 12 | const color = 13 | variant === 'white' 14 | ? 'text-black bg-white' 15 | : variant === 'glass' 16 | ? 'text-white bg-grey-light' 17 | : 'text-white bg-darkish-black' 18 | 19 | const text = textSize === 'lg' ? 'text-md lg:text-md' : 'text-sm lg:text-md' 20 | const map = { glass: 'rgba(245,245,245,.1)', solid: `${colorRGB}b2` } 21 | const customColor = map[variant] 22 | 23 | return ( 24 | 35 | {children} 36 | 37 | ) 38 | } 39 | 40 | export default Button 41 | -------------------------------------------------------------------------------- /src/Components/UI/Checkbox.jsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact' 2 | 3 | const Checkbox = ({ text, checked, onChange }) => { 4 | return ( 5 | 14 | ) 15 | } 16 | 17 | export default Checkbox 18 | -------------------------------------------------------------------------------- /src/Components/UI/Modal.jsx: -------------------------------------------------------------------------------- 1 | import { Dialog, Transition } from '@headlessui/react' 2 | import { Fragment, h } from 'preact' 3 | import { useState, useEffect } from 'preact/hooks' 4 | 5 | import { useStore } from './../../hooks/useStore' 6 | import { getFileType } from '../../utils/getFileType' 7 | 8 | export function Modal({ isOpen, closeModal }) { 9 | const [selectedFile, setSelectedFile] = useState(null) 10 | const selectImage = useStore((state) => state.selectImage) 11 | const { 12 | showTints, 13 | toggleTints, 14 | customize, 15 | toggleCustomize, 16 | monoTone, 17 | toggleTone, 18 | setSelectedFileExt, 19 | } = useStore() 20 | 21 | useEffect(() => { 22 | if (selectedFile) { 23 | selectImage(selectedFile) 24 | if (showTints) { 25 | toggleTints() 26 | if (customize) { 27 | toggleCustomize() 28 | } 29 | } 30 | // disable monoTone if new image uploaded 31 | if (monoTone) { 32 | toggleTone() 33 | } 34 | } 35 | }, [selectImage, selectedFile]) 36 | 37 | const onFileChange = (evt) => { 38 | const file = evt.target.files[0] 39 | const srcURL = URL.createObjectURL(file) 40 | setSelectedFile(srcURL) 41 | setSelectedFileExt(getFileType(file.name)) 42 | closeModal() 43 | } 44 | 45 | return ( 46 |
35 | {toastContent.spinner &&
40 | {toastContent.texts[0]} 41 |
42 | )} 43 | 44 |