84 lines
4.5 KiB
TypeScript
84 lines
4.5 KiB
TypeScript
import { useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import InputCheckbox from "./InputCheckbox";
|
|
import InputDate from "./InputDate";
|
|
import InputNumber from "./InputNumber";
|
|
import InputRadioGroup from "./InputRadioGroup";
|
|
import InputSelect from "./InputSelect";
|
|
import InputSelector from "./InputSelector";
|
|
import InputText from "./InputText";
|
|
|
|
export default function PreviewInputs() {
|
|
const { t } = useTranslation();
|
|
const [selectedOption, setSelectedOption] = useState<string | number | undefined>("");
|
|
const sampleOptions = [
|
|
{ value: "1", name: t("components.previewInputs.options.option1") },
|
|
{ value: "2", name: t("components.previewInputs.options.option2") },
|
|
];
|
|
return (
|
|
<div id="inputs" className="space-y-6">
|
|
<div className="space-y-1">
|
|
<h3 className="text-sm font-medium">{t("components.previewInputs.sections.text")}</h3>
|
|
<div id="text" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
|
|
<InputText name="input-text" title={t("components.previewInputs.examples.inputTextSimple")} defaultValue={undefined} />
|
|
<InputText name="input-text" title={t("components.previewInputs.examples.inputTextWithHint")} hint={<div>{t("components.previewInputs.hint")}</div>} defaultValue={undefined} />
|
|
<InputText name="input-text" title={t("components.previewInputs.examples.inputTextWithHelp")} help={t("components.previewInputs.help")} defaultValue={undefined} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-sm font-medium">{t("components.previewInputs.sections.number")}</h3>
|
|
<div id="number" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
|
|
<InputNumber name="input-number" title={t("components.previewInputs.examples.inputNumberSimple")} defaultValue={undefined} />
|
|
<InputNumber name="input-number-with-help" title={t("components.previewInputs.examples.inputNumberWithHint")} hint={<div>{t("components.previewInputs.hint")}</div>} defaultValue={undefined} />
|
|
<InputNumber name="input-number-with-help" title={t("components.previewInputs.examples.inputNumberWithHelp")} help={t("components.previewInputs.help")} defaultValue={undefined} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-sm font-medium">{t("components.previewInputs.sections.select")}</h3>
|
|
<div id="select" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
|
|
<InputSelect name="input-select" title={t("components.previewInputs.examples.simple")} options={sampleOptions} value={2} />
|
|
|
|
<InputSelect name="input-select" title={t("components.previewInputs.examples.simple")} options={sampleOptions} value={2} />
|
|
|
|
<div>
|
|
<InputSelector name="input-selector" title={t("components.previewInputs.examples.custom")} options={sampleOptions} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-sm font-medium">{t("components.previewInputs.sections.radio")}</h3>
|
|
<div id="radio" className=" border-border border border-dashed px-10 py-12 lg:px-64">
|
|
<InputRadioGroup
|
|
name="input-radio-group"
|
|
title={t("components.previewInputs.examples.inputRadioGroup")}
|
|
value={selectedOption}
|
|
setValue={setSelectedOption}
|
|
options={[
|
|
...sampleOptions,
|
|
{ value: "3", name: t("components.previewInputs.options.option3"), disabled: true },
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-sm font-medium">{t("components.previewInputs.sections.checkbox")}</h3>
|
|
<div id="checkbox" className=" border-border space-y-3 border border-dashed px-10 py-12 lg:px-64">
|
|
<InputCheckbox name="input-check" title={t("components.previewInputs.examples.inputCheckboxSimple")} />
|
|
<InputCheckbox name="input-check-as-toggle" title={t("components.previewInputs.examples.inputCheckboxAsToggle")} asToggle={true} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="text-sm font-medium">{t("components.previewInputs.sections.date")}</h3>
|
|
<div id="date" className=" border-border border border-dashed px-10 py-12 lg:px-64">
|
|
<InputDate name="input-date" title={t("components.previewInputs.examples.inputDate")} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|