`apps/admin/src/app/live/LivePreview.tsx`

57 lines
"use client";

import { useState } from "react";

const URL = "https://homesonspec.com/";

export default function LivePreview() {
  const [mode, setMode] = useState<"desktop" | "mobile">("desktop");
  const [nonce, setNonce] = useState(0); // bump to force-reload the iframe
  const width = mode === "mobile" ? 390 : "100%";

  return (
    <div className="mt-4">
      <div className="mb-3 flex flex-wrap items-center gap-2 text-sm">
        <div className="inline-flex rounded-lg border border-neutral-200 bg-white p-0.5">
          {(["desktop", "mobile"] as const).map((m) => (
            <button
              key={m}
              onClick={() => setMode(m)}
              className={`rounded-md px-3 py-1 text-xs capitalize ${mode === m ? "bg-teal-600 text-white" : "text-neutral-600 hover:text-teal-700"}`}
            >
              {m}
            </button>
          ))}
        </div>
        <button
          onClick={() => setNonce((n) => n + 1)}
          className="rounded-md border border-neutral-200 bg-white px-2 py-1 text-xs text-neutral-600 hover:text-teal-700"
        >
          ↻ Reload
        </button>
        <span className="text-xs text-neutral-400">viewing the customer-facing storefront</span>
        <a
          href={URL}
          target="_blank"
          rel="noopener noreferrer"
          className="ml-auto rounded-md border border-teal-200 bg-teal-50 px-3 py-1 text-xs font-medium text-teal-700 hover:bg-teal-100"
        >
          Open full ↗
        </a>
      </div>
      <div
        className="flex justify-center overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100 p-2"
        style={{ height: "calc(100vh - 230px)", minHeight: 480 }}
      >
        <iframe
          key={nonce}
          src={URL}
          title="homesonspec.com — live storefront"
          style={{ width, height: "100%", border: 0, borderRadius: 8, background: "#fff", maxWidth: "100%" }}
          className="shadow-sm"
        />
      </div>
    </div>
  );
}