59 lines
2.2 KiB
Text
59 lines
2.2 KiB
Text
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import Image from "next/image";
|
|
import Markdown from "react-markdown";
|
|
|
|
export default function FiberSettingDetailPage() {
|
|
const { id } = useParams();
|
|
const [setting, setSetting] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch(
|
|
`${process.env.NEXT_PUBLIC_API_BASE_URL}/items/settings_fiber/${id}?fields=submission_id,setting_title,uploader,setting_notes,photo.filename_disk,mat.name,mat_coat.name,mat_color.name,mat_opacity.opacity,source.model,lens.field_size`
|
|
)
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error("Failed to load");
|
|
return res.json();
|
|
})
|
|
.then((data) => setSetting(data.data))
|
|
.catch(() => setSetting(null))
|
|
.finally(() => setLoading(false));
|
|
}, [id]);
|
|
|
|
if (loading) return <p className="p-6">Loading setting...</p>;
|
|
if (!setting) return <p className="p-6">Setting not found.</p>;
|
|
|
|
return (
|
|
<div className="p-6 max-w-4xl mx-auto">
|
|
<h1 className="text-3xl font-bold mb-4">{setting.setting_title}</h1>
|
|
{setting.photo?.filename_disk && (
|
|
<Image
|
|
src={`https://forms.lasereverything.net/assets/${setting.photo.filename_disk}`}
|
|
alt="Laser preview"
|
|
width={512}
|
|
height={512}
|
|
className="rounded mb-4"
|
|
/>
|
|
)}
|
|
<div className="space-y-2">
|
|
<p><strong>Uploader:</strong> {setting.uploader || "—"}</p>
|
|
<p><strong>Material:</strong> {setting.mat?.name || "—"}</p>
|
|
<p><strong>Coating:</strong> {setting.mat_coat?.name || "—"}</p>
|
|
<p><strong>Color:</strong> {setting.mat_color?.name || "—"}</p>
|
|
<p><strong>Opacity:</strong> {setting.mat_opacity?.opacity || "—"}</p>
|
|
<p><strong>Source Model:</strong> {setting.source?.model || "—"}</p>
|
|
<p><strong>Lens Field Size:</strong> {setting.lens?.field_size || "—"}</p>
|
|
</div>
|
|
{setting.setting_notes && (
|
|
<div className="mt-6 prose dark:prose-invert">
|
|
<h2>Notes</h2>
|
|
<Markdown>{setting.setting_notes}</Markdown>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|