tonality/packages/app-web/src/components/organisms/forms/CreateRingtone/index.tsx

import {FC, FormEventHandler} from 'react'
import {models} from '@tonality/library-common'
import styled from 'styled-components'
import TextInput from '../../../molecules/forms/TextInput'
import TextArea from '../../../molecules/forms/TextArea'
import ActionButton from '../../../molecules/forms/ActionButton'

const Form = styled('form')({
	display: 'grid',
	gap: '1rem',
})

type Props = {
	onSubmit?: FormEventHandler,
	action?: string,
	labels: Record<string, string>,
	defaultValues?: Partial<models.Ringtone>,
}

const CreateRingtoneForm: FC<Props> = ({
	onSubmit,
	action,
	labels,
	defaultValues = {},
}) => {
	return (
		<Form
			onSubmit={onSubmit}
			method="post"
			action={action}
			aria-label={labels['form']}
		>
			{
				typeof (defaultValues.id as unknown) === 'string'
				&& (
					<input
						type="hidden"
						name="id"
						defaultValue={defaultValues.id}
					/>
				)
			}
			<input
				type="hidden"
				name="composerId"
				defaultValue={defaultValues.composerId}
			/>
			<TextInput
				label={labels['name'] || 'Name'}
				name="name"
				block
				defaultValue={defaultValues.name}
			/>
			<TextArea
				label={labels['data'] || 'Data'}
				name="data"
				block
				defaultValue={defaultValues.data}
			/>
			<ActionButton
				type="submit"
				block
			>
				{labels['cta'] || 'Post'}
			</ActionButton>
		</Form>
	)
}

export default CreateRingtoneForm