function TransitionHoverDemoProto()

in packages/palette-mantine-core/palette.tsx [2302:2355]

• 53 lines of code
• 1 McCabe index (conditional complexity)

function TransitionHoverDemoProto(
  transition:
    | "fade"
    | "skew-up"
    | "skew-down"
    | "rotate-right"
    | "rotate-left"
    | "slide-down"
    | "slide-up"
    | "slide-right"
    | "slide-left"
    | "scale-y"
    | "scale-x"
    | "scale"
    | "pop"
    | "pop-top-left"
    | "pop-top-right"
    | "pop-bottom-left"
    | "pop-bottom-right"
) {
  const [opened, setOpened] = useState(false);

  return (
    <div
      style={{
        position: "relative",
        display: "flex",
        justifyContent: "center",
      }}
    >
      <Badge
        onMouseEnter={() => setOpened(true)}
        onMouseLeave={() => setOpened(false)}
      >
        {transition}
      </Badge>
      <Transition mounted={opened} transition={transition} duration={400}>
        {(styles) => (
          <Paper
            shadow="md"
            style={{
              ...styles,
              position: "absolute",
              bottom: 0,
              transform: "translateY(100%)",
            }}
          >
            {transition}
          </Paper>
        )}
      </Transition>
    </div>
  );
}