54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import styled from '@emotion/styled';
|
|
|
|
import { H2Title } from '@/ui/display/typography/components/H2Title';
|
|
import { AutosizeTextInput } from '@/ui/input/components/AutosizeTextInput';
|
|
import { TextInput } from '@/ui/input/components/TextInput';
|
|
import { Section } from '@/ui/layout/section/components/Section';
|
|
|
|
type SettingsObjectFormSectionProps = {
|
|
singularName?: string;
|
|
pluralName?: string;
|
|
description?: string;
|
|
};
|
|
|
|
const StyledInputsContainer = styled.div`
|
|
display: flex;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
margin-bottom: ${({ theme }) => theme.spacing(2)};
|
|
width: 100%;
|
|
`;
|
|
|
|
const StyledTextInput = styled(TextInput)`
|
|
flex: 1 0 auto;
|
|
`;
|
|
|
|
export const SettingsObjectFormSection = ({
|
|
singularName,
|
|
pluralName,
|
|
description,
|
|
}: SettingsObjectFormSectionProps) => (
|
|
<Section>
|
|
<H2Title
|
|
title="Name and description"
|
|
description="Name in both singular (e.g., 'Invoice') and plural (e.g., 'Invoices') forms."
|
|
/>
|
|
<StyledInputsContainer>
|
|
<StyledTextInput
|
|
label="Singular"
|
|
placeholder="Invoice"
|
|
value={singularName}
|
|
/>
|
|
<StyledTextInput
|
|
label="Plural"
|
|
placeholder="Invoices"
|
|
value={pluralName}
|
|
/>
|
|
</StyledInputsContainer>
|
|
<AutosizeTextInput
|
|
placeholder="Write a description"
|
|
minRows={4}
|
|
value={description}
|
|
/>
|
|
</Section>
|
|
);
|