Function ExampleApp2

packages/dev/s2-docs/pages/s2/home/ExampleApp2.tsx:71–379

({onBack, children, showPanel, panel, onPanelChange}: any)

const SM = `@container (width >= ${SM_BREAK}rem)`;

export function ExampleApp2({onBack, children, showPanel, panel, onPanelChange}: any) {
  let [selectedPanel, setSelectedPanel] = useState<Key | null>('properties');
  let [transitioning, setTransitioning] = useState<Key | null>(null);
  let displayPanel = panel || selectedPanel || transitioning;
  let [isLarge, setLarge] = useState(true);

  let setPanel = (panel: Key | null) => {
    onPanelChange?.(panel);
    setSelectedPanel(panel);
  };

  let ref = useRef<HTMLDivElement | null>(null);
  useResizeObserver({
    ref,
    onResize() {
      let width = ref.current!.getBoundingClientRect().width;
      let rem = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
      let breakpoint = width / rem;
      flushSync(() => {
        let matches = breakpoint >= SM_BREAK;
        setLarge(matches);
        if (!showPanel && selectedPanel && isLarge && !matches) {
          setPanel(null);
        }
      });
    }
  });

  return (
    <ColorSchemeProvider>
      <div
        ref={ref}
        className={style({
          display: 'grid',
          gridTemplateAreas: {
            default: ['toolbar toolbar', 'content content', 'assets assets', 'panels panels'],
            [SM]: ['toolbar toolbar toolbar toolbar', 'sidebar content assets panels']
          },
          gridTemplateRows: {
            default: ['max-content', '1fr', 'auto', 'auto'],
            [SM]: ['max-content', '1fr']
          },
          gridTemplateColumns: {
            default: ['minmax(0, 1fr)', 'minmax(0, 1fr)'],
            [SM]: ['auto', '1fr', 'auto', 'auto']
          },
          height: 'full',
          '--radius': {
            type: 'borderTopStartRadius',
            value: 'lg'
          },
          borderRadius: '--radius',
          borderTopRadius: 'var(--app-frame-radius-top, var(--radius))',
          overflow: 'clip',
          boxSizing: 'border-box',
          boxShadow: 'elevated',
          position: 'relative',
          isolation: 'isolate'