Notice

Notice.tsx

import styled from "styled-components";

interface NoticeProps {
  variant: "hint" | "important";
}

const backgroundColors: { [key: string]: string } = {
  hint: "#01920124",
  important: "#ffff002e",
};

const borderColors: { [key: string]: string } = {
  hint: "#01920161",
  important: "#ffff0094",
};

const Notice = styled.div<NoticeProps>`
  background-color: ${(props) => backgroundColors[props.variant]};
  border-left: 9px solid ${(props) => borderColors[props.variant]};
  padding: 10px;

  p:first-child {
    margin-top: 0;
  }

  p:last-child {
    margin-bottom: 0;
  }
`;

export default Notice;

usage.mdx

import Notice from "relative/path/to/Notice";

Tip:

This is my tip to you!