import React from 'react'; import { notFound } from 'next/navigation'; import Link from 'next/link'; import Image from 'next/image'; import { PortableText } from 'next-sanity'; import { getLabBySlug } from '@/sanity/lib/labs/getLabBySlug'; import LabImageGallery from '@/components/LabImageGallery'; import { labPortableTextComponents } from '@/components/LabPortableTextComponents'; import { LabWithCategory } from '@/types/custom-sanity-types'; import { urlFor } from '@/sanity/lib/image'; export const dynamic = 'force-static'; export const revalidate = 60; async function LabDetailPage({ params }: { params: { slug: string } }) { const lab: LabWithCategory | null = await getLabBySlug(params.slug); if (!lab || lab.isVisible === false) { return notFound(); } console.log('Lab Data:', { mainImage: lab.mainImage, galleryImages: lab.galleryImages, contentBlocks: lab.contentBlocks, }); return (

← Back to Labs

{(lab.mainImage || (lab.galleryImages && lab.galleryImages.length > 0)) ? ( ) : (

No image available

)}

{lab.title || 'Untitled Lab'}

{lab.shortDescription && (

{lab.shortDescription}

)} {lab.category?.title && (

Category: {lab.category.title}

)} {lab.technologiesUsed && lab.technologiesUsed.length > 0 && (

Technologies Used

{lab.technologiesUsed.map((tech, index) => ( {tech} ))}

)}

{lab.labUrl && (

View Lab

)}

{lab.contentBlocks && lab.contentBlocks.map((block) => { if (block._type === 'richTextSection' && block.body) { return (

); } if (block._type === 'embeddedImage' && block.asset?.url) { return (

{block.caption && (

{block.caption}

)}

); } if (block._type === 'youtubeEmbed' || block._type === 'codeBlock') { return (

); } return null; })}

); } export default LabDetailPage;

DIY RGB Led Controller

Labs.tsx (other)

Hweskas