Function AppExampleSandbox

src/components/AppExampleSandbox.tsx:114–230

({ Example }: { Example: ExampleComponent })

}

export function AppExampleSandbox({ Example }: { Example: ExampleComponent }) {
  const [state, send] = useActor(inspectorLauncherMachine);

  return (
    <div
      className={cx(
        css({
          base: {
            mx: "-4",
            py: "12",
            mt: "12",
            borderYWidth: 2,
            borderColor: "gray.300",
            pos: "relative",
          },
          sm: {
            mx: "0",
            rounded: "md",
            borderWidth: 2,
          },
        }),
        "not-prose"
      )}
    >
      <InspectorSetter
        key={state.context.updateId}
        Example={Example}
        inspector={state.context.inspector}
      />

      <div
        className={flex({
          pos: "absolute",
          right: 0,
          top: 0,
          mt: "4",
          mr: "4",
        })}
      >
        {state.matches("closed") === true ? (
          <Tooltip.Root openDelay={0} positioning={{ strategy: "fixed" }}>
            <Tooltip.Trigger
              onClick={() => {
                send({
                  type: "inspector.open",
                });
              }}
              className={css({
                rounded: "full",
                bgColor: "white",
                px: "2",
                py: "0.5",
                fontSize: "xs",
                fontWeight: "semibold",
                color: "gray.900",
                shadow: "1",
                borderWidth: "1",
                borderColor: "gray.300",