Function ExpandableCode

packages/dev/s2-docs/src/ExpandableCode.tsx:59–111

({
  children,
  hasHighlightedLine
}: {
  children: ReactNode;
  hasHighlightedLine?: boolean;
})

}

export function ExpandableCode({
  children,
  hasHighlightedLine
}: {
  children: ReactNode;
  hasHighlightedLine?: boolean;
}) {
  let state = useState(false);
  let ctx = useContext(ExpandableCodeContext);
  let [isExpanded, setExpanded] = ctx || state;
  let ref = useRef<HTMLDivElement | null>(null);
  let mask: string | undefined;
  let padding: string | undefined;
  if (!isExpanded) {
    if (hasHighlightedLine) {
      // mask the top, bottom, and right sides
      mask =
        'linear-gradient(transparent, white 25% 50%, transparent), linear-gradient(to right, white 0% 85%, transparent)';
      padding = '0px';
    } else {
      // only mask the bottom and right
      mask =
        'linear-gradient(white 0% 50%, transparent), linear-gradient(to right, white 0% 85%, transparent)';
    }
  }

  return (
    <div ref={ref} className={example({isExpanded})}>
      <div
        style={
          {
            maskImage: mask,
            maskComposite: 'intersect',
            maxHeight: isExpanded ? undefined : 'inherit',
            '--code-padding-y': padding
          } as CSSProperties
        }>
        {children}
      </div>
      <div className={expandWrapper({isExpanded})}>
        <ActionButton
          onPress={() => {
            viewTransition(() => {
              setExpanded(!isExpanded);
              ref.current?.scrollTo(0, 0);
            });
          }}>
          {isExpanded ? 'Collapse code' : 'Expand code'}
        </ActionButton>
      </div>
    </div>
  );
}

function viewTransition(cb) {
  if ('startViewTransition' in document) {