О
У меня есть lightbox-компонент, в нём куча инпутов, чекбоксов, полей, datepicker, timepicker и прочего, всё это я реализовал через компоненты, полчучилось что-то тип такого:
<div class="lightbox_body">
<Input
className="mb-20"
name="eventName"
label="Title"
on:change={getEventName}
/>
<Row className="mb-20" title="Time">
<Datepicker selected={selectedDate} />
<Timepicker id="start" />
<span class="lightbox_innerText">to</span>
<Datepicker selected={selectedDate} />
<Timepicker id="finish" />
</Row>
<Row className="mb-20">
<Checkbox
label="All day"
checkboxBackgroundImage="./codebase/img/check-black.svg"
bgPosition="-1px -1px" />
<Select className="ml-40" id="repeat" data={SelectConfig} />
</Row>
<Row title="Calendar" className="mb-20">
<SelectEventType data={checkboxOptions} bind:value={text} />
</Row>
<Row className="mb-20" title="Description">
<Textarea {...textareaConfig} />
</Row>
<Row withoutTitle>
<Button
type="button"
value="delete"
className="button--del"
css="width: 68px;margin-right: auto;" />
<Button type="button" value="reset" css="width: 68px;magin-left: auto" />
<Button
type="button"
value="save"
className="button--submit"
css="width: 68px;"
/>
</Row>
</div>