import * as React from "react";

/**
 * SwipeRow: on phones the items stand side by side and are swiped through,
 * with the next one peeking in; from tablet width on they fall back into the
 * grid given by `className`. It keeps long lists of equal items from
 * stretching the page on a small screen. Styles: `swipe-row` in globals.css.
 */
export const SwipeRow: React.FC<{
  className?: string;
  children: React.ReactNode;
}> = ({ className = "", children }) => (
  <div className={`swipe-row ${className}`}>
    {React.Children.map(children, (child) => (
      <div className="swipe-slide">{child}</div>
    ))}
  </div>
);