Untitled

import { Stack, Paper, Box, Button, Breadcrumbs, Grid, Link as MuiLink, Typography, Divider } from "@mui/material";
import { Link, SliceRootContainer } from "@origen-studio/starter-components-library";
import { useGetDocumentHref } from "@origen-studio/starter-sanity";
import Image from 'next/image';
import { setComponentSanityDocumentProviderConfig } from "@origen-studio/starter-sanity/next/pages/client.js";
import type { InferGetStaticPropsType } from "next";
import { ComponentProps } from "react";
import { fetchLayoutProps } from "../../lib/layoutProps.jsx";
import { makeGetStaticPaths, makeGetStaticProps } from "../../lib/next/server/context.js";
import { makeReleaseSlices } from "../../lib/sanity/documents/release/slices.jsx";
import {
	fetchReleaseSlicesUseComponentsConfig,
	makeReleaseSlicesServer,
} from "../../lib/sanity/documents/release/slices.server.js";
import {
	fetchPathResolverDocument,
	fetchPathResolverDocumentStaticPaths,
	getRouteFileNameSlugParamConfig,
	NextDynamicRouteFileName,
} from "../../lib/sanity/pages.server.js";
import { Layout } from "../../src/components/index.js";
import { ReleaseStepper } from "../../src/components/ReleaseStepper/ReleaseStepper.jsx";
import { ReleaseTimelineItem } from "../../src/components/ReleaseTimelineItem/ReleaseTimelineItem.jsx";
import { PortableText } from '@portabletext/react';

const typeName = "release";
const slugParamConfig = getRouteFileNameSlugParamConfig(
	__filename as NextDynamicRouteFileName<"slug">,
);

export const getStaticProps = makeGetStaticProps(async (context) => {
	const [layoutProps, release, releasesPage] = await Promise.all([
		fetchLayoutProps(context),
		fetchPathResolverDocument({
			context,
			typeName,
			...slugParamConfig,
			queryFields: ReleaseQueryFields,
		}),
		fetchPathResolverDocument({
			context,
			typeName: "releasesPage",
			slugParam: undefined,
			queryFields: `
				breadcrumb,
				releaseLabels {...}
			`,
		}),
	]);

	if (!release) {
		return { notFound: true };
	}

	return {
		props: {
			layoutProps,
			release: release as typeof release & {
				previous: null | typeof release;
				next: null | typeof release;
			},
			releaseSliceZoneProps: await fetchReleaseSlicesUseComponentsConfig({
				context,
				release,
			}),
			releasesPage,
		},
		revalidate: 1,
	};
});

export const getStaticPaths = makeGetStaticPaths(async (context) => ({
	paths: await fetchPathResolverDocumentStaticPaths({
		context,
		typeName,
		...slugParamConfig,
	}),
	fallback: true,
}));

const ReleaseSlices = makeReleaseSlices();
const ReleaseSlicesServer = makeReleaseSlicesServer();

export default function Release({
	release,
	releaseSliceZoneProps,
	releasesPage,
}: InferGetStaticPropsType<typeof getStaticProps>) {
	const releasesPageBreadcrumb = useReleasesPageBreadcrumb({ releasesPage });
	const getDocumentHref = useGetDocumentHref();

	if (!release) {
		return null;
	}


	const slices = release.body?.slices || null;
	const notes = release.notes || [];



	const styles = {
		mainContainer: {
			display: "flex",
			justifyContent: "center",
			alignItems: "center",
			padding: 5,
		},
		sidebar: {
			padding: 1.5,
			borderRadius: 2,
			marginRight: 3,
			width: 145,
		},
		sidebarTitle: {
			marginBottom: 1,
		},
		sidebarButton: {
			justifyContent: "flex-start",
			textTransform: "none",
			pl: 0,
			width: "100%",
		},
		sidebarButtonText: {
			display: "flex",
			alignItems: "center",
		},
		header: {
			marginTop: 0.5,
		},
		sectionContainer: {
			width: "100%",
			display: "flex",
			justifyContent: "flex-start",
			paddingX: 8,
			paddingY: 1,

		},
		sectionContent: {
			width: "calc(100% - 16px)",
		},
		divider: {
			borderColor: "primary.main",
			borderBottomWidth: 1,
			width: "calc(100% - 16px)",
			mb: 1,
		},
		sliceContainer: {
			width: "100%",
			paddingX: 8,
			paddingY: 2,
		},
		imageWrapper: {
			overflow: "hidden",
			borderRadius: 2,
			"&:hover": {
			transform: "scale(1.05)",
			boxShadow: "0px 4px 15px rgba(0, 0, 0, 0.2)",
		},
		},
	};


	return (
		<>
		<Box sx={styles.mainContainer}>
			{/* Sidebar */}
			<Paper elevation={2} sx={styles.sidebar}>
				<Typography variant="subtitle2" color="primary" sx={styles.sidebarTitle}>
					PAGE CONTENTS
				</Typography>
				<Box sx={{ mt: 1 }}>
					<Button
						component="a"
						href="#new-features"
						variant="text"
						color="inherit"
						sx={styles.sidebarButton}
					>
						<Typography variant="body2" sx={styles.sidebarButtonText}>
							<span style={{ marginRight: 8 }}>{'>'}</span> {slices ? "New Features" : "Notes"}
						</Typography>
					</Button>
				</Box>
			</Paper>

			{/* Header */}
			<Box>
				<Typography variant="h2" component="h2">
					{release.tag} {release.title ? ` - ${release.title}` : ""}
				</Typography>
				<Typography variant="body1" sx={styles.header}>
					{new Date(release.publishedAt).toLocaleDateString("en-GB", {
						day: "2-digit",
						month: "2-digit",
						year: "numeric",
					})}
				</Typography>
			</Box>
		</Box>

		{/* Section Title */}
		<Box sx={styles.sectionContainer}>
			<Box sx={styles.sectionContent}>
				<Typography id="new-features" variant="h4" component="h4" gutterBottom>
					{slices ? "New Features" : "Notes"}
				</Typography>
				<Divider sx={styles.divider} />
			</Box>
		</Box>

		{/* Slices or Notes */}
		{slices ? (
			slices.map((slice, index) => (
				<Box key={slice._key || index} sx={styles.sliceContainer}>
					<Grid container spacing={4} alignItems="center">
						{slice.media?.image?.asset?.url && (
							<Grid item xs={12} md={6}>
								<Paper elevation={2} sx={styles.imageWrapper}>
									<Image
										src={slice.media.image.asset.url}
										alt={slice.media.image.alt || "Feature Image"}
										width={600}
										height={400}
										layout="responsive"
										style={{ display: 'block' }}
									/>
								</Paper>
							</Grid>
						)}

						<Grid item xs={12} md={6}>
							{slice.title && slice.title[0]?.children?.[0]?.text && (
								<Typography variant="h5" component="h2" gutterBottom>
									{slice.title[0].children[0].text}
								</Typography>
							)}
							{slice.description && slice.description[0]?.children?.[0]?.text && (
								<Typography variant="body1">
									{slice.description[0].children[0].text}
								</Typography>
							)}
						</Grid>
					</Grid>
				</Box>
			))
		) : (
			<Box sx={styles.sliceContainer}>
				<Typography variant="body1" component="div">
					<ul>
					{notes.length > 0 && (
							<ul>
									{notes.map((note) => (
											<li key={note._key}>
													<PortableText value={note} />
											</li>
									))}
							</ul>
					)}
					</ul>
				</Typography>
			</Box>
		)}


		</>
	);
}

Release.Layout = Layout.Comp;
setComponentSanityDocumentProviderConfig(Release, (props) => props.release);

const ReleaseQueryFields = `
tag,
title,
slug,
notes[],
publishedAt,
body {
	sliceRootProps {
		...
	},
	slices[] {
		...,
		${ReleaseSlicesServer.query}
	}
},
"previous": *[_type=="release" && publishedAt < ^.publishedAt && !(_id in path("drafts.**"))] | order(publishedAt desc)[0] {
	_id,
	_type,
	title,
	tag,
	slug,
	publishedAt
},
"next": *[_type=="release" && publishedAt > ^.publishedAt && !(_id in path("drafts.**"))] | order(publishedAt asc)[0] {
	_id,
	_type,
	title,
	tag,
	slug,
	publishedAt
}
`;

function useReleasesPageBreadcrumb({
	releasesPage,
}: Pick<ComponentProps<typeof Release>, "releasesPage">) {
	const getDocumentHref = useGetDocumentHref();
	const href = releasesPage && getDocumentHref(releasesPage);
	return releasesPage && releasesPage.breadcrumb && href
		? {
				label: releasesPage.breadcrumb,
				href,
		  }
		: null;
}