Function ExampleChooser

app/src/Frame.tsx:14–97

(props: {
  setTileset: Setter<Tileset | undefined>;
})

import { GIT_SHA } from "./utils";

export const ExampleChooser = (props: {
  setTileset: Setter<Tileset | undefined>;
}) => {
  const loadSample = (url: string) => {
    props.setTileset(tilesetFromString(url));
  };

  const onChangeFileInput = (
    event: Event & { currentTarget: HTMLInputElement },
  ) => {
    const file = event.currentTarget.files?.[0];
    if (file) {
      props.setTileset(tilesetFromFile(file));
    }
  };

  return (
    <div class="h-full flex items-center justify-center p-4">
      <div>
        <div class="mb-2 app-text-light">Load an example:</div>
        <div class="app-border divide-y">
          <button
            class="block p-2 flex text-left flex-col hover:bg-slate dark:hover:bg-purple w-full cursor-pointer"
            type="button"
            onClick={() => {
              loadSample("https://demo-bucket.protomaps.com/v4.pmtiles");
            }}
          >
            <div>v4.pmtiles</div>
            <div class="text-xs app-text-light">
              vector basemap, Protomaps daily build channel (OpenStreetMap data)
            </div>
          </button>
          <button
            class="block p-2 flex text-left flex-col hover:bg-slate dark:hover:bg-purple w-full cursor-pointer"
            type="button"
            onClick={() => {
              loadSample("https://air.mtn.tw/flowers.pmtiles");
            }}
          >
            <div>flowers.pmtiles</div>
            <div class="text-xs app-text-light">
              raster overlay, aerial orthomosaic
            </div>
          </button>
          <button
            class="block p-2 flex text-left flex-col hover:bg-slate dark:hover:bg-purple w-full cursor-pointer"
            type="button"
            onClick={() => {
              loadSample(
                "https://overturemaps-tiles-us-west-2-beta.s3.amazonaws.com/2025-04-23/places.pmtiles",
              );
            }}
          >
            <div>places.pmtiles</div>
            <div class="text-xs app-text-light">
              vector overlay, Overture Places, 2025-04-23 release
            </div>