Function Detail

packages/dev/s2-docs/pages/s2/home/ExampleApp.tsx:91–223

({detail, img, setDetail, showArrows}: any)

}

function Detail({detail, img, setDetail, showArrows}: any) {
  let [panel, setPanel] = useState('properties');
  let [filters, setFilters] = useState({
    brightness: 0,
    contrast: 0,
    saturation: 0
  });

  return (
    <FilterContext value={{...filters, onChange: setFilters}}>
      <ExampleApp2
        panel={panel}
        onPanelChange={setPanel}
        onBack={() => {
          if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
            setDetail([]);
            return;
          }

          document
            .startViewTransition(async () => {
              flushSync(() => setDetail([]));
              img.style.viewTransitionName = 'photo';
            })
            .ready.then(() => {
              img.style.viewTransitionName = '';
            });
        }}>
        <div
          className={style({
            size: 'full',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            overflow: 'clip'
          })}
          style={
            {
              containerType: 'size'
            } as any
          }>
          <Image
            src={detail.urls.regular}
            width={detail.width}
            height={detail.height}
            alt={detail.description || detail.alt_description}
            UNSAFE_style={
              {
                viewTransitionName: 'photo',
                '--scale': `min(100cqw / ${detail.width}, 100cqh / ${detail.height})`,
                width: `calc(${detail.width} * var(--scale))`,
                height: `calc(${detail.height} * var(--scale))`,
                filter: `${filters.brightness ? `brightness(${filters.brightness + 100}%)` : ''} ${filters.contrast ? `contrast(${filters.contrast + 100}%)` : ''} ${filters.saturation ? `saturate(${filters.saturation + 100}%)` : ''}`
              } as any
            }
          />
        </div>
      </ExampleApp2>