56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import { Button, Card, CardActions, CardContent, CardMedia, Chip, Stack, Typography } from "@mui/material";
|
|
import { client } from "@/sanity/lib/client";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default async function PostList() {
|
|
const posts = await client.fetch<any[]>(`*[_type == "post"] {
|
|
title, description, slug, author, publishedAt,
|
|
mainImage {
|
|
asset -> {
|
|
_id,
|
|
url
|
|
},
|
|
alt
|
|
},
|
|
"categories": categories[]->title,
|
|
"author_name": author->name,
|
|
"author_image": author->image
|
|
}`);
|
|
|
|
return (
|
|
posts.map((post) => (
|
|
<Card key={post.slug.current} sx={{ width: "100%" }}>
|
|
{
|
|
post.mainImage &&
|
|
<CardMedia sx={{ height: 160, position: "relative" }} title={post.mainImage.alt}>
|
|
<Image
|
|
fill
|
|
src={post.mainImage.asset.url}
|
|
alt={post.mainImage.alt}
|
|
style={{ objectFit: "cover" }}
|
|
/>
|
|
</CardMedia>
|
|
}
|
|
|
|
<CardContent sx={{ paddingX: 5, paddingY: 3 }}>
|
|
<Typography variant="h3">
|
|
{post.title}
|
|
</Typography>
|
|
|
|
<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>
|
|
<Typography variant="body2" color="text.secondary">
|
|
{post.description ? post.description : "No description yet."}
|
|
</Typography>
|
|
</CardContent>
|
|
<CardActions sx={{ paddingX: 4, paddingBottom: 2 }}>
|
|
<Link href={`/p/${post.slug.current}`} passHref>
|
|
<Button>Read more</Button>
|
|
</Link>
|
|
</CardActions>
|
|
</Card>
|
|
))
|
|
);
|
|
} |