MUI snippets / utility components

Form.tsx

import { Box, Paper, PaperProps, styled } from "@mui/material";
import React, { FormEvent, ReactNode } from "react";
import { StyledForm, FormBody } from "./Form.styles";

export const StyledForm = styled(Paper)<PaperProps & { component: string }>(
  ({ theme }) => ({
    display: "flex",
    flexDirection: "column",
    gap: theme.spacing(2),
    padding: theme.spacing(3),
    maxWidth: "100%",
    width: "500px",
  })
);

export const FormBody = styled(Box)(({ theme }) => ({
  display: "flex",
  flexDirection: "column",
  gap: theme.spacing(3),
  marginBottom: theme.spacing(3),
}));

export type FormProps = {
  title: string;
  children: ReactNode;
  actions: ReactNode;
  onSubmit: (e: FormEvent) => void;
};

export const Form: React.FC<FormProps> = ({
  title,
  children,
  actions,
  onSubmit,
}) => (
  <StyledForm component="form" onSubmit={onSubmit}>
    <Typography component="h1" variant="h6" mb={1} textAlign="center">
      {title}
    </Typography>

    <FormBody>{children}</FormBody>

    <Box>{actions}</Box>
  </StyledForm>
);

TextOverflowContainer.tsx

import { Box, styled } from '@mui/material'

export const TextOverflowContainer = styled(Box)({
  overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap'
})