地点の詳細PlacePanelExperimental

"use client";

import * as React from "react";
import { PlacePanel } from "@gunjo/ui";

type Current = { temperature_2m?: number; relative_humidity_2m?: number };

export function PickedPlace() {
  const [name, setName] = React.useState<string | null | undefined>(undefined);
  const [now, setNow] = React.useState<Current | null | undefined>(undefined);

  React.useEffect(() => {
    setName("千代田区・東京都・日本");
    fetch("https://api.open-meteo.com/v1/forecast?latitude=35.69&longitude=139.75&current=temperature_2m,relative_humidity_2m")
      .then((r) => (r.ok ? r.json() : Promise.reject()))
      .then((j) => setNow(j.current ?? null))
      // 取れなかったら null。骨組みは「—」で止まります
      .catch(() => setNow(null));
  }, []);

  // undefined は読み込み中、null は取れなかった
  const pick = <T,>(v: T | undefined) => (now === undefined ? undefined : v ?? null);

  return (
    <div className="relative h-[32rem] overflow-hidden rounded-lg bg-muted">
      <PlacePanel
        className="absolute inset-x-0 bottom-0"
        label="地点の詳細"
        closeLabel="閉じる"
        title={name}
        headline={{ value: pick(now?.temperature_2m != null ? `${now.temperature_2m}°C` : undefined) }}
        fields={[
          { id: "hum", label: "湿度", value: pick(now?.relative_humidity_2m != null ? `${now.relative_humidity_2m}%` : undefined) },
          { id: "pos", label: "座標", value: "N35.69° E139.75°" },
        ]}
        onClose={() => setName(undefined)}
      />
    </div>
  );
}