Initial commit

app/buying-guide/layout.tsx

@@ -0,0 +1,4 @@
+import { Suspense } from "react";
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense fallback={null}>{children}</Suspense>;
+}

app/buying-guide/page.tsx

@@ -0,0 +1,342 @@
+"use client";
+
+import { useEffect, useState, useMemo } from "react";
+import { useSearchParams } from "next/navigation";
+import Link from "next/link";
+import Image from "next/image";
+
+interface Entry {
+  id: number;
+  product_make: string;
+  product_model: string;
+  product_price?: string;
+  review_overview_text?: string;
+  bg_entry_sub_cat?: number;
+  bg_entry_cat?: number;
+  index?: {
+    id: string;
+    filename_disk?: string;
+    type?: string;
+  };
+  header?: {
+    id: string;
+    filename_disk?: string;
+    type?: string;
+  };
+}
+
+interface SubCategory {
+  id: number;
+  name: string;
+  bg_entry_cat?: number;
+}
+
+interface Category {
+  id: number;
+  name: string;
+}
+
+export default function BuyingGuidePage() {
+  const searchParams = useSearchParams();
+  const initialQuery = searchParams.get("query") || "";
+
+  const [query, setQuery] = useState(initialQuery);
+  const [debouncedQuery, setDebouncedQuery] = useState(initialQuery);
+  const [entries, setEntries] = useState<Entry[]>([]);
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [subcategories, setSubcategories] = useState<SubCategory[]>([]);
+  const [selectedCat, setSelectedCat] = useState("");
+  const [selectedSubCat, setSelectedSubCat] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedQuery(query), 300);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const [entriesRes, catRes, subCatRes] = await Promise.all([
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_entries?fields=id,index.id,index.filename_disk,index.type,header.id,header.filename_disk,product_make,product_model,product_price,review_overview_text,bg_entry_cat,bg_entry_sub_cat&limit=-1&sort[]=sort`),
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_cat?fields=id,name&limit=-1`),
+          fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/bg_sub_cat?fields=id,name,bg_entry_cat&limit=-1`),
+        ]);
+
+        const [entriesData, catData, subCatData] = await Promise.all([
+          entriesRes.json(),
+          catRes.json(),
+          subCatRes.json(),
+        ]);
+
+        setEntries(entriesData?.data || []);
+        setCategories(catData?.data || []);
+        setSubcategories(subCatData?.data || []);
+        setLoading(false);
+      } catch (err) {
+        console.error("Error fetching data:", err);
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  const normalize = (str: string) => str?.toLowerCase().replace(/[_\s]/g, "");
+
+  const filtered = useMemo(() => {
+    const q = normalize(debouncedQuery);
+    return entries.filter((entry) => {
+      const catMatch = selectedCat ? entry.bg_entry_cat === parseInt(selectedCat) : true;
+      const subCatMatch = selectedSubCat ? entry.bg_entry_sub_cat === parseInt(selectedSubCat) : true;
+      const searchMatch = q
+        ? [entry.product_make, entry.product_model, entry.review_overview_text].some((field) =>
+            normalize(field || "").includes(q)
+          )
+        : true;
+      return catMatch && subCatMatch && searchMatch;
+    });
+  }, [entries, debouncedQuery, selectedCat, selectedSubCat]);
+
+  const filteredSubcategories = useMemo(() => {
+    return selectedCat
+      ? subcategories.filter((sub) => sub.bg_entry_cat === parseInt(selectedCat))
+      : subcategories;
+  }, [subcategories, selectedCat]);
+
+  const featuredEntry = useMemo(() => {
+    if (!entries.length) return null;
+    const randomIndex = Math.floor(Math.random() * entries.length);
+    return entries[randomIndex];
+  }, [entries]);
+
+  const secondFeaturedEntry = useMemo(() => {
+    if (entries.length < 2) return null;
+    let secondIndex = Math.floor(Math.random() * entries.length);
+    while (entries[secondIndex].id === featuredEntry?.id) {
+      secondIndex = Math.floor(Math.random() * entries.length);
+    }
+    return entries[secondIndex];
+  }, [entries, featuredEntry]);
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <style jsx global>{`
+        mark {
+          background: #ffde59;
+          color: #242424;
+          padding: 0 2px;
+          border-radius: 2px;
+        }
+        .card-grid {
+          display: grid;
+          grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
+          gap: 1rem;
+        }
+        .entry-card {
+          display: flex;
+          background-color: #242424;
+          color: var(--card-foreground);
+          border: 1px solid var(--border);
+          border-radius: 0.5rem;
+          overflow: hidden;
+          height: 150px;
+        }
+        .entry-image {
+          width: 150px;
+          height: 150px;
+          object-fit: cover;
+        }
+        .entry-content {
+          padding: 0.75rem;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+        .truncate-title {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      `}</style>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 mb-6">
+        <div className="card bg-card text-card-foreground p-4">
+          <h1 className="text-2xl font-bold mb-2">Buying Guide</h1>
+          <select
+            className="w-full border rounded px-3 py-2 mb-2"
+            value={selectedCat}
+            onChange={(e) => {
+              setSelectedCat(e.target.value);
+              setSelectedSubCat("");
+            }}
+          >
+            <option value="">All Categories</option>
+            {categories.map((cat) => (
+              <option key={cat.id} value={cat.id.toString()}>
+                {cat.name}
+              </option>
+            ))}
+          </select>
+          <select
+            className="w-full border rounded px-3 py-2 mb-2"
+            value={selectedSubCat}
+            onChange={(e) => setSelectedSubCat(e.target.value)}
+          >
+            <option value="">All Subcategories</option>
+            {filteredSubcategories.map((sub) => (
+              <option key={sub.id} value={sub.id.toString()}>
+                {sub.name}
+              </option>
+            ))}
+          </select>
+          <input
+            type="search"
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Search products by make, model, etc..."
+            className="w-full mb-4 dark:bg-background border border-border rounded-md p-2"
+          />
+          <p className="text-sm text-muted-foreground mb-2">
+            Discover reviewed laser products and accessories.
+          </p>
+          <a
+            href="/"
+            className="inline-block mt-2 px-4 py-2 bg-accent text-background rounded-md text-sm"
+          >
+            ← Back to Main Menu
+          </a>
+        </div>
+
+        {[featuredEntry, secondFeaturedEntry].map((entry, idx) => (
+          entry && (
+            <div key={idx} className="card bg-card text-card-foreground p-4">
+              <h2 className="text-md font-semibold mb-2">Featured Product</h2>
+              {entry.header?.filename_disk ? (
+                <Image
+                  src={`https://forms.lasereverything.net/assets/${entry.header.filename_disk}`}
+                  alt="Header image"
+                  width={800}
+                  height={100}
+                  className="w-full h-[100px] object-cover mb-2 rounded-md"
+                  unoptimized
+                />
+              ) : (
+                <div className="w-full h-[100px] bg-zinc-800 flex items-center justify-center text-zinc-400 text-sm rounded-md mb-2">
+                  No Header
+                </div>
+              )}
+              <Link
+                href={`/buying-guide/product/${entry.id}`}
+                className="text-accent font-semibold text-lg hover:underline"
+              >
+                {entry.product_make} {entry.product_model}
+              </Link>
+              {entry.product_price && (
+                <p className="text-sm text-white">Starting at {entry.product_price}</p>
+              )}
+              <p className="text-sm text-muted-foreground mt-1">
+                {entry.review_overview_text?.slice(0, 140)}...
+              </p>
+            </div>
+          )
+        ))}
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Popular Categories</h2>
+          <ul className="text-sm space-y-1">
+            {categories.slice(0, 5).map((cat) => (
+              <li key={cat.id}>
+                <button
+                  onClick={() => {
+                    setSelectedCat(cat.id.toString());
+                    setSelectedSubCat("");
+                  }}
+                  className="text-accent hover:underline"
+                >
+                  {cat.name}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">Recently Added</h2>
+          <ul className="text-sm space-y-1">
+            {entries.slice(0, 3).map((e) => (
+              <li key={e.id}>
+                <Link href={`/buying-guide/product/${e.id}`} className="text-accent hover:underline">
+                  {e.product_make} {e.product_model}
+                </Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        <div className="card bg-card text-card-foreground p-4">
+          <h2 className="text-md font-semibold mb-2">What Is This?</h2>
+          <p className="text-sm text-muted-foreground">
+            This Buying Guide helps you compare laser-related gear with hands-on reviews, scores, and recommendations. Use the filters and search to find what you’re looking for!
+          </p>
+        </div>
+      </div>
+
+      <hr className="my-8 border-border" />
+
+      {loading ? (
+        <p className="text-muted">Loading entries...</p>
+      ) : filtered.length === 0 ? (
+        <p className="text-muted">No entries found.</p>
+      ) : (
+        <div className="card-grid">
+          {filtered.map((entry) => {
+            const filename = entry.index?.filename_disk;
+            return (
+              <div key={entry.id} className="entry-card">
+                {filename ? (
+                  <Image
+                    src={`https://forms.lasereverything.net/assets/${filename}`}
+                    alt={`${entry.product_make} ${entry.product_model}`}
+                    width={150}
+                    height={150}
+                    className="entry-image"
+                    unoptimized
+                  />
+                ) : (
+                  <div className="entry-image bg-zinc-800 flex items-center justify-center text-zinc-400">
+                    No Image
+                  </div>
+                )}
+                <div className="entry-content">
+                  <div>
+                    <p className="text-sm font-medium text-muted-foreground truncate-title">
+                      {entry.product_make}
+                    </p>
+                    <Link
+                      href={`/buying-guide/product/${entry.id}`}
+                      className="text-lg font-semibold text-accent underline truncate-title"
+                      title={entry.product_model}
+                    >
+                      {entry.product_model}
+                    </Link>
+                    {entry.product_price !== undefined && (
+                      <p className="text-sm text-foreground mt-1 font-medium">
+                        Starting at {entry.product_price}
+                      </p>
+                    )}
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {entry.review_overview_text?.slice(0, 120)}...
+                    </p>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+

app/buying-guide/product/[id]/page.tsx

@@ -0,0 +1,188 @@
+// app/buying-guide/product/[id]/page.tsx
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+const API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+const ASSET_URL = process.env.NEXT_PUBLIC_ASSET_URL;
+
+async function getEntry(id: string) {
+  const res = await fetch(
+    `${API_URL}/items/bg_entries/${id}?fields=*,links.id,links.text,links.url,links.target,scores.id,scores.cat,scores.value,scores.body,header.id,date_updated`,
+    {
+      cache: "no-store",
+    }
+  );
+
+  if (!res.ok) {
+    const error = await res.text();
+    console.error(`Failed to fetch entry: ${error}`);
+    throw new Error(`Error fetching entry ${id}`);
+  }
+
+  const { data } = await res.json();
+  return data;
+}
+
+export default async function ProductDetail({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = (await params).id;
+  const entry = await getEntry(id);
+
+  const avgScore =
+    entry?.scores?.length > 0
+      ? (
+          entry.scores.reduce((sum: number, s: any) => sum + Number(s.value), 0) /
+          entry.scores.length
+        ).toFixed(1)
+      : "N/A";
+
+  const headerUrl = entry.header?.id
+    ? `${ASSET_URL}/assets/${entry.header.id}?cache-buster=${entry.date_updated}&key=system-large-contain`
+    : null;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+      {/* Header Banner */}
+      {headerUrl && (
+        <div className="w-full h-64 relative overflow-hidden rounded-xl shadow">
+          <img
+            src={headerUrl}
+            alt="Header Image"
+            className="object-cover w-full h-full rounded-xl"
+          />
+        </div>
+      )}
+
+      {/* Title */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h2 className="text-xl font-semibold text-white">{entry.product_make}</h2>
+          <h1 className="text-4xl font-bold text-yellow-500 mt-2">{entry.product_model}</h1>
+        </div>
+        <div className="text-right">
+          {entry.product_price && (
+            <p className="text-lg text-white font-medium mt-1">
+              {entry.product_price.startsWith("Starting at") ? entry.product_price : `Starting at ${entry.product_price}`}
+            </p>
+          )}
+          <Link
+            href="/buying-guide"
+            className="text-sm text-blue-500 underline mt-2 inline-block"
+          >
+            ← Back to Buying Guide
+          </Link>
+        </div>
+      </div>
+
+      {/* Links & Score Summary */}
+      {(Array.isArray(entry.links) || Array.isArray(entry.scores)) && (
+        <div className="flex flex-col md:flex-row gap-8">
+          {Array.isArray(entry.links) && entry.links.length > 0 && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Links</h3>
+              <ul className="list-disc ml-6 space-y-1">
+                {entry.links.map((link: any, idx: number) => (
+                  <li key={idx}>
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-700 underline"
+                    >
+                      {link.text || link.url}
+                    </a>
+                    {link.target && (
+                      <span className="text-sm text-gray-500"> ({link.target})</span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Score Summary</h3>
+              <ul className="space-y-1">
+                {entry.scores.map((s: any, idx: number) => (
+                  <li key={idx} className="flex justify-between">
+                    <span>{s.cat}</span>
+                    <span className="font-semibold">{s.value}/10</span>
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 font-bold text-right">Total: {avgScore}</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Overview */}
+      {entry.review_overview_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Overview</h3>
+          <ReactMarkdown>{entry.review_overview_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Intro */}
+      {entry.review_intro_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">{`${entry.product_make}, ${entry.product_model} Review by ${entry.author}`}</h3>
+          <ReactMarkdown>{entry.review_intro_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Detailed Scores */}
+      {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+        <div className="space-y-4">
+          {entry.scores.map((s: any, idx: number) => (
+            <div key={idx} className="p-4 rounded border">
+              <p className="text-xl font-semibold">
+                {s.cat} – <span className="text-blue-600">{s.value}/10</span>
+              </p>
+              <div className="text-sm text-gray-400">
+                <ReactMarkdown>{s.body}</ReactMarkdown>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Recommendation */}
+      {entry.rec_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Recommendation</h3>
+          <ReactMarkdown>{entry.rec_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Updates */}
+      {entry.updates && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Updates</h3>
+          <ReactMarkdown>{entry.updates}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Video */}
+      {entry.video_review_url && (
+        <div>
+          <h3 className="text-xl font-semibold mb-2">Video Review</h3>
+          <div className="aspect-w-16 aspect-h-9">
+            <iframe
+              src={entry.video_review_url.replace("watch?v=", "embed/")}
+              className="w-full h-96 rounded"
+              frameBorder="0"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

app/buying-guide/product/[id]/page.tsx.bak.1755462414

@@ -0,0 +1,188 @@
+// app/buying-guide/product/[id]/page.tsx
+import Link from "next/link";
+import ReactMarkdown from "react-markdown";
+
+const API_URL = process.env.NEXT_PUBLIC_API_BASE_URL;
+const ASSET_URL = process.env.NEXT_PUBLIC_ASSET_URL;
+
+async function getEntry(id: string) {
+  const res = await fetch(
+    `${API_URL}/items/bg_entries/${id}?fields=*,links.id,links.text,links.url,links.target,scores.id,scores.cat,scores.value,scores.body,header.id,date_updated`,
+    {
+      cache: "no-store",
+    }
+  );
+
+  if (!res.ok) {
+    const error = await res.text();
+    console.error(`Failed to fetch entry: ${error}`);
+    throw new Error(`Error fetching entry ${id}`);
+  }
+
+  const { data } = await res.json();
+  return data;
+}
+
+export default async function ProductDetail({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = params.id;
+  const entry = await getEntry(id);
+
+  const avgScore =
+    entry?.scores?.length > 0
+      ? (
+          entry.scores.reduce((sum: number, s: any) => sum + Number(s.value), 0) /
+          entry.scores.length
+        ).toFixed(1)
+      : "N/A";
+
+  const headerUrl = entry.header?.id
+    ? `${ASSET_URL}/assets/${entry.header.id}?cache-buster=${entry.date_updated}&key=system-large-contain`
+    : null;
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+      {/* Header Banner */}
+      {headerUrl && (
+        <div className="w-full h-64 relative overflow-hidden rounded-xl shadow">
+          <img
+            src={headerUrl}
+            alt="Header Image"
+            className="object-cover w-full h-full rounded-xl"
+          />
+        </div>
+      )}
+
+      {/* Title */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h2 className="text-xl font-semibold text-white">{entry.product_make}</h2>
+          <h1 className="text-4xl font-bold text-yellow-500 mt-2">{entry.product_model}</h1>
+        </div>
+        <div className="text-right">
+          {entry.product_price && (
+            <p className="text-lg text-white font-medium mt-1">
+              {entry.product_price.startsWith("Starting at") ? entry.product_price : `Starting at ${entry.product_price}`}
+            </p>
+          )}
+          <Link
+            href="/buying-guide"
+            className="text-sm text-blue-500 underline mt-2 inline-block"
+          >
+            ← Back to Buying Guide
+          </Link>
+        </div>
+      </div>
+
+      {/* Links & Score Summary */}
+      {(Array.isArray(entry.links) || Array.isArray(entry.scores)) && (
+        <div className="flex flex-col md:flex-row gap-8">
+          {Array.isArray(entry.links) && entry.links.length > 0 && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Links</h3>
+              <ul className="list-disc ml-6 space-y-1">
+                {entry.links.map((link: any, idx: number) => (
+                  <li key={idx}>
+                    <a
+                      href={link.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-blue-700 underline"
+                    >
+                      {link.text || link.url}
+                    </a>
+                    {link.target && (
+                      <span className="text-sm text-gray-500"> ({link.target})</span>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+
+          {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+            <div className="md:w-1/2">
+              <h3 className="text-xl font-semibold mb-2">Score Summary</h3>
+              <ul className="space-y-1">
+                {entry.scores.map((s: any, idx: number) => (
+                  <li key={idx} className="flex justify-between">
+                    <span>{s.cat}</span>
+                    <span className="font-semibold">{s.value}/10</span>
+                  </li>
+                ))}
+              </ul>
+              <p className="mt-2 font-bold text-right">Total: {avgScore}</p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Overview */}
+      {entry.review_overview_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Overview</h3>
+          <ReactMarkdown>{entry.review_overview_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Intro */}
+      {entry.review_intro_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">{`${entry.product_make}, ${entry.product_model} Review by ${entry.author}`}</h3>
+          <ReactMarkdown>{entry.review_intro_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Detailed Scores */}
+      {(Array.isArray(entry.scores) && entry.scores.length > 0) && (
+        <div className="space-y-4">
+          {entry.scores.map((s: any, idx: number) => (
+            <div key={idx} className="p-4 rounded border">
+              <p className="text-xl font-semibold">
+                {s.cat} – <span className="text-blue-600">{s.value}/10</span>
+              </p>
+              <div className="text-sm text-gray-400">
+                <ReactMarkdown>{s.body}</ReactMarkdown>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Recommendation */}
+      {entry.rec_text && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Recommendation</h3>
+          <ReactMarkdown>{entry.rec_text}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Updates */}
+      {entry.updates && (
+        <div className="prose max-w-none">
+          <h3 className="text-xl font-semibold mb-2">Updates</h3>
+          <ReactMarkdown>{entry.updates}</ReactMarkdown>
+        </div>
+      )}
+
+      {/* Video */}
+      {entry.video_review_url && (
+        <div>
+          <h3 className="text-xl font-semibold mb-2">Video Review</h3>
+          <div className="aspect-w-16 aspect-h-9">
+            <iframe
+              src={entry.video_review_url.replace("watch?v=", "embed/")}
+              className="w-full h-96 rounded"
+              frameBorder="0"
+              allowFullScreen
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+