client/src/themes/ThemeDemonstrator.js

import { Button, Stack, Switch, ThemeProvider, Typography } from '@mui/material';

import {
  BackButton,
  CancelPictureButton,
  CloseButton,
  EditPictureButton,
  InfoButton,
  TakePictureButton,
  TipButton,
  UploadPictureButton,
} from '../components/buttons';
import { NickNameInput, PasswordInput, RegularInput, UsernameInput } from '../components/inputs';
import defaultTheme from './default';

export const ThemeDemonstrator = () => {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Stack spacing="5px">
        <Stack>
          <Typography variant="h1">Exemple de titre H1</Typography>
          <Typography variant="h2">Exemple de titre H2</Typography>
          <Typography variant="h3">Exemple de titre H3</Typography>
          <Typography variant="h4">Exemple de titre H4</Typography>
          <Typography variant="h5">Exemple de titre H5</Typography>
          <Typography variant="body1">Texte courant principal</Typography>
          <Typography variant="body2">Texte courant secondaire</Typography>
          <Typography variant="caption">Légendes et annotations</Typography>
        </Stack>
        <Stack spacing="5px" padding="5px" width="300px">
          <Button variant="contained">Bouton primaire</Button>
          <Button variant="outlined">Bouton secondaire</Button>
          <Button variant="text">Bouton tertiaire</Button>
          <Button variant="contained" size="small">
            Bouton liste préférences
          </Button>
        </Stack>
        <Stack direction="row" spacing="5px">
          <CancelPictureButton />
          <EditPictureButton />
          <UploadPictureButton />
          <TakePictureButton />
        </Stack>
        <Stack direction="row" spacing="5px">
          <InfoButton />
          <TipButton />
        </Stack>
        <Stack direction="row" spacing="5px">
          <BackButton />
          <CloseButton />
        </Stack>
        <Stack>
          <Switch />
        </Stack>
        <Stack padding="5px" width="300px">
          <UsernameInput />
          <UsernameInput error defaultValue="Cyrille" />
          <PasswordInput />
          <PasswordInput error defaultValue="SavoirFaireLinux" />
          <NickNameInput />
          <RegularInput />
        </Stack>
      </Stack>
    </ThemeProvider>
  );
};