UGC Gallery

import UgcGallery from "./index.jsx";
import { ugcGallery } from "../demo-data.js";

function Placeholder({ height = "60vh", background = "#ffffff" }) {
  return (
    <div
      style={{
        height,
        background,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        color: "#ccc",
        fontSize: "1rem",
        fontFamily: "sans-serif",
        letterSpacing: "0.05em",
        textTransform: "uppercase",
      }}
    >
      Section Placeholder
    </div>
  );
}

export default function UgcGalleryDemo() {
  return (
    <>
      <Placeholder />
      <UgcGallery {...ugcGallery} />
      <Placeholder />
    </>
  );
}