Getting Started

Getting Started

Patterns

Adri is beautifulCasperfilter chipsTest from GithubTitle ContainerToothpaste ButtonsToothpaste TabsTop BarTwo Columns Layout

Component

import { Typography } from "@material-ui/core";
import { ReactComponentElement } from "react";

export default function Title({
  title,
  children,
}: {
  title: string;
  children?: ReactComponentElement<any> | undefined;
}) {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Typography variant="h4">{title}</Typography>
      <div className={classes.childrenContainer}>{children || null}</div>
    </div>
  );
}

Styles

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    position: "sticky",
    top: 5,
    zIndex: 100,
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(2),
  },
  childrenContainer: {
    flexShrink: 1,
    flexGrow: 0,
  },
}));