import React from 'react';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
import { TextInput } from '@digigov/ui/form/TextInput';

export const FluidWidths = (_: any) => (
  <div>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Μέγιστο πλάτος</LabelTitle>
        <TextInput name="inputext" width="full"></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πλάτος στα τρία-τέταρτα</LabelTitle>
        <TextInput name="inputext" width="75%"></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πλάτος στα δύο-τρίτα</LabelTitle>
        <TextInput name="inputext" width="66.6%"></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πλάτος στο μισό</LabelTitle>
        <TextInput name="inputext" width="50%"></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πλάτος στο ένα-τρίτο</LabelTitle>
        <TextInput name="inputext" width="33.3%"></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πλάτος στο ένα-τέταρτο</LabelTitle>
        <TextInput name="inputext" width="25%"></TextInput>
      </LabelContainer>
    </FieldContainer>
  </div>
);

export default FluidWidths;