Capital/app/posts/[id]/page.tsx

56 lines
1.7 KiB
TypeScript
Raw Normal View History

2024-02-24 13:56:35 +00:00
import { Box, Card, CardContent, CardMedia, Chip, Divider, Stack, Typography } from "@mui/material";
import { client } from "@/sanity/lib/client";
2024-02-24 09:33:35 +00:00
import PostContent from "@/components/posts/PostContent";
2024-02-24 13:56:35 +00:00
import Image from "next/image";
2024-02-24 09:33:35 +00:00
2024-02-24 13:56:35 +00:00
export default async function PostDetailPage({ params }: { params: { id: string } }) {
const post = await client.fetch<any>(`*[_type == "post" && slug.current == $slug][0] {
title, description, slug, body, author, publishedAt,
mainImage {
asset -> {
_id,
url
},
alt
},
"categories": categories[]->title,
"author_name": author->name,
"author_image": author->image
}`, { slug: params.id });
2024-02-24 09:33:35 +00:00
return (
<Card>
{
2024-02-24 13:56:35 +00:00
post.mainImage &&
<CardMedia sx={{ height: 360, position: "relative" }} title={post.mainImage.alt}>
2024-02-24 09:33:35 +00:00
<Image
fill
2024-02-24 13:56:35 +00:00
src={post.mainImage.asset.url}
alt={post.mainImage.alt}
2024-02-24 09:33:35 +00:00
style={{ objectFit: "cover" }}
/>
</CardMedia>
}
<CardContent sx={{ paddingX: 5, paddingY: 3 }}>
<Box>
2024-02-24 13:56:35 +00:00
<Typography variant="h2">
2024-02-24 09:33:35 +00:00
{post.title}
</Typography>
2024-02-24 13:56:35 +00:00
<Stack direction="row" sx={{ mx: -0.5, mt: 1, mb: 1.2 }}>
{post.categories.map((category: string, idx: number) => <Chip size="small" label={category} key={idx} />)}
</Stack>
2024-02-24 09:33:35 +00:00
<Typography color="text.secondary" variant="body2">
{post.description ?? "No description yet."}
</Typography>
</Box>
2024-02-24 13:56:35 +00:00
<Divider sx={{ my: 2.5, mx: -5 }} />
2024-02-24 10:29:29 +00:00
<Box component="article" className="prose max-w-none" sx={{ minWidth: 0 }}>
2024-02-24 13:56:35 +00:00
<PostContent content={post.body} />
2024-02-24 09:33:35 +00:00
</Box>
</CardContent>
</Card>
);
2024-02-24 13:56:35 +00:00
}