86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
import '../styles/styles.css'
|
|
|
|
interface InputFieldProps {
|
|
label: string
|
|
description?: string
|
|
type?: 'text' | 'textarea'
|
|
placeholder: string
|
|
name: string
|
|
inputMode?: 'url'
|
|
}
|
|
|
|
export const InputField = ({
|
|
label,
|
|
description,
|
|
type = 'text',
|
|
placeholder,
|
|
name,
|
|
inputMode
|
|
}: InputFieldProps) => (
|
|
<div className='inputLabelWrapperMain'>
|
|
<label className='form-label labelMain'>{label}</label>
|
|
{description && <p className='labelDescriptionMain'>{description}</p>}
|
|
{type === 'textarea' ? (
|
|
<textarea
|
|
className='inputMain'
|
|
placeholder={placeholder}
|
|
name={name}
|
|
></textarea>
|
|
) : (
|
|
<input
|
|
type={type}
|
|
className='inputMain'
|
|
placeholder={placeholder}
|
|
name={name}
|
|
inputMode={inputMode}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
|
|
interface CheckboxFieldProps {
|
|
label: string
|
|
name: string
|
|
}
|
|
|
|
export const CheckboxField = ({ label, name }: CheckboxFieldProps) => (
|
|
<div className='inputLabelWrapperMain inputLabelWrapperMainAlt inputLabelWrapperMainAltStylized'>
|
|
<label className='form-label labelMain'>{label}</label>
|
|
<input type='checkbox' className='CheckboxMain' name={name} />
|
|
</div>
|
|
)
|
|
|
|
interface ImageUploadFieldProps {
|
|
label: string
|
|
description: string
|
|
}
|
|
|
|
export const ImageUploadField = ({
|
|
label,
|
|
description
|
|
}: ImageUploadFieldProps) => (
|
|
<div className='inputLabelWrapperMain'>
|
|
<label className='form-label labelMain'>{label}</label>
|
|
{description && <p className='labelDescriptionMain'>{description}</p>}
|
|
<div className='inputWrapperMain'>
|
|
<input
|
|
type='text'
|
|
className='inputMain'
|
|
inputMode='url'
|
|
placeholder='We recommend to upload images to https://nostr.build/'
|
|
/>
|
|
<button className='btn btnMain btnMainRemove' type='button'>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='-32 0 512 512'
|
|
width='1em'
|
|
height='1em'
|
|
fill='currentColor'
|
|
>
|
|
<path d='M135.2 17.69C140.6 6.848 151.7 0 163.8 0H284.2C296.3 0 307.4 6.848 312.8 17.69L320 32H416C433.7 32 448 46.33 448 64C448 81.67 433.7 96 416 96H32C14.33 96 0 81.67 0 64C0 46.33 14.33 32 32 32H128L135.2 17.69zM394.8 466.1C393.2 492.3 372.3 512 346.9 512H101.1C75.75 512 54.77 492.3 53.19 466.1L31.1 128H416L394.8 466.1z'></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|