basic seach small json data set models and parts

2025-11-24 12:51:14 +00:00
parent b064d458c4
commit ffe7ea5d75
58 changed files with 3006 additions and 81 deletions
@@ -0,0 +1,44 @@
+import { getPart, getCompatibleModels } from "@/lib/ui/api";
+
+export default async function PartDetailPage({ params }) {
+  const { partId } = await params;
+
+  const part = await getPart(partId);
+  const models = await getCompatibleModels(partId);
+
+  if (!part) return <p className="text-red-500">Part not found</p>;
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-4xl font-bold">{part.name}</h1>
+        <p className="opacity-75">Part ID: {part.id}</p>
+
+        {part.universalFit && (
+          <span className="inline-block mt-2 px-3 py-1 bg-green-200 text-green-800 text-sm rounded">
+            Universal Fit
+          </span>
+        )}
+
+        {part.upgrade && (
+          <span className="inline-block mt-2 px-3 py-1 bg-blue-200 text-blue-800 text-sm rounded">
+            Upgrade Part
+          </span>
+        )}
+      </div>
+
+      <h2 className="text-2xl font-bold">Compatible Models</h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {Array.isArray(models) && models.length ? (
+          models.map((item) => (
+            <div key={item.model.id}>
+              <p className="font-bold">{item.model.name}</p>
+            </div>
+          ))
+        ) : (
+          <p>No compatible models found.</p>
+        )}
+      </div>
+    </div>
+  );
+}