Function Expander

packages/devtools-ui/src/components/tree.tsx:410–444

(props: { expanded: boolean; onClick: () => void })

}

const Expander = (props: { expanded: boolean; onClick: () => void }) => {
  const styles = createStyles()
  return (
    <span
      onClick={props.onClick}
      class={clsx(
        styles().tree.expander,
        css`
          transform: rotate(${props.expanded ? 90 : 0}deg);
        `,
        props.expanded &&
          css`
            & svg {
              top: -1px;
            }
          `,
      )}
    >
      <svg
        width="16"
        height="16"
        viewBox="0 0 16 16"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M6 12L10 8L6 4"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </span>
  )
}