github.com/tilt-dev/tilt@v0.33.15-0.20240515162809-0a22ed45d8a0/web/src/Snackbar.tsx (about)

     1  import { SnackbarContent, SnackbarProvider } from "notistack"
     2  import React, { forwardRef, PropsWithChildren } from "react"
     3  import styled from "styled-components"
     4  import { Color, Font, FontSize, SizeUnit } from "./style-helpers"
     5  
     6  const SnackbarContentRoot = styled(SnackbarContent)`
     7    background-color: ${Color.grayLightest};
     8    font-family: ${Font.sansSerif};
     9    font-size: ${FontSize.small};
    10    font-weight: 400;
    11    color: ${Color.gray20};
    12    padding: ${SizeUnit(0.25)};
    13    border: 1px solid ${Color.gray50};
    14    border-radius: ${SizeUnit(0.125)};
    15  `
    16  
    17  const SnackMessage = forwardRef<
    18    HTMLDivElement,
    19    { id: string | number; message: string | React.ReactNode }
    20  >((props, ref) => {
    21    return <SnackbarContentRoot ref={ref}>{props.message}</SnackbarContentRoot>
    22  })
    23  
    24  export function TiltSnackbarProvider(
    25    props: PropsWithChildren<{ className?: string }>
    26  ) {
    27    return (
    28      <SnackbarProvider
    29        maxSnack={3}
    30        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
    31        autoHideDuration={6000}
    32        content={(key: any, message: any) => (
    33          <SnackMessage id={key} message={message} />
    34        )}
    35      >
    36        {props.children}
    37      </SnackbarProvider>
    38    )
    39  }