AR Portfolio

1"use client";
2 
3import Script from "next/script";
4import { createElement, useState } from "react";
5 
6import { FadeIn } from "@/components/ui/fade-in";
7import { cn } from "@/lib/utils";
8 
9/** Edit CONTENT to swap demo models. */
10const CONTENT = [
11  {
12    id: "og-tool",
13    title: "OG Image Generator",
14    description: "Preview how your social cards look in 3D space before sharing.",
15    src: "https://modelviewer.dev/shared-assets/models/Astronaut.glb",
16    poster: "/opengraph-image",
17  },
18  {
19    id: "dashboard",
20    title: "SaaS Dashboard MVP",
21    description: "Interactive 3D preview of a shipped client dashboard layout.",
22    src: "https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb",
23  },
24];
25 
26const chipBase =
27  "border px-3 py-1.5 text-xs font-medium transition-colors";
28const chipActive = "border-brand bg-brand/10 text-brand";
29const chipIdle =
30  "border-border-subtle text-muted-foreground hover:border-border hover:text-foreground";
31 
32export function ArPortfolio() {
33  const [active, setActive] = useState(CONTENT[0]!.id);
34  const model = CONTENT.find((m) => m.id === active) ?? CONTENT[0]!;
35  const [scriptReady, setScriptReady] = useState(false);
36 
37  return (
38    <>
39      <Script
40        type="module"
41        src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"
42        onLoad={() => setScriptReady(true)}
43        strategy="lazyOnload"
44      />
45 
46      <FadeIn>
47        <p className="ms-stamp">AR portfolio preview</p>
48        <p className="mt-3 max-w-lg text-sm text-muted-foreground">
49          On supported devices, tap &ldquo;View in AR&rdquo; to place a project preview in your
50          space. Demo models are placeholders - replace the hardcoded{" "}
51          <code className="font-mono text-[11px] text-foreground">CONTENT</code>{" "}
52          list for real client work.
53        </p>
54 
55        <div className="mt-4 flex flex-wrap gap-2">
56          {CONTENT.map((m) => (
57            <button
58              key={m.id}
59              type="button"
60              onClick={() => setActive(m.id)}
61              className={cn(
62                chipBase,
63                "rounded-full",
64                active === m.id ? chipActive : chipIdle
65              )}
66            >
67              {m.title}
68            </button>
69          ))}
70        </div>
71 
72        <div className="mt-6 overflow-hidden rounded-2xl border border-border-subtle bg-card/40">
73          {scriptReady ? (
74            createElement("model-viewer", {
75// … truncated