Create page post list

app/api/post/[pid]/route.ts

@@ -18,8 +18,7 @@ export async function GET(req: Request, res: NextApiResponse) {
     }
     return NextResponse.json(post);
   } catch (error) {
-    return NextResponse.json({ error }); //res.status(400).json(error);
-    return NextResponse.json({ message: '404s' });
+    return NextResponse.json({ error });
   }
 }
 export async function PATCH(req: Request, res: NextApiResponse) {
@@ -35,11 +34,11 @@ export async function PATCH(req: Request, res: NextApiResponse) {
       data,
     });
     if (!updatePost) {
-      return NextResponse.json({ message: 'Post not found' }); // res.status(404).json({ message: 'Post not found' });
+      return NextResponse.json({ message: 'Post not found' });
     }
     return res.status(200).json(updatePost);
   } catch (error) {
-    return NextResponse.json({ message: 'Update Error', error }); // res.status(500).json({ message: 'Update Error', error });
+    return NextResponse.json({ message: 'Update Error', error });
   }
 }
 export async function DELETE(req: Request, res: NextApiResponse) {

app/blog/page.tsx

@@ -1,10 +1,27 @@
-import { Box, GeneralLayout, Heading } from '@/components';
+import { prisma } from '@/utils/prisma';
+import {
+  Box,
+  GeneralLayout,
+  Heading,
+  SimpleGrid,
+  Spinner,
+  Wrap,
+} from '@/components';
+import { PostCard } from '@/components/Post';
 
-export default function BlogsPage() {
+export default async function BlogsPage() {
+  const data = await prisma?.post.findMany({
+    orderBy: { createdAt: 'desc' },
+    take: 25,
+  });
+  if (!data) return <Spinner size="sm" />;
   return (
     <GeneralLayout>
       <Heading>The latest articles</Heading>
-      <Box>if user login then show button create post</Box>
+      <Box paddingY={5} />
+      <SimpleGrid columns={[2, null, 3]} spacing="10px">
+        {data?.map((post, index) => <PostCard key={index} post={post} />)}
+      </SimpleGrid>
     </GeneralLayout>
   );
 }

components/Navbar/index.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@chakra-ui/react';
+import { Flex } from '@/components';
 import { ProfileMenu } from './ProfileMenu';
 import { Logo } from './Logo';
 

components/Post/PostCard.tsx

@@ -0,0 +1,79 @@
+import { format } from 'date-fns';
+
+import type { FC, Post } from '@/types';
+import {
+  Flex,
+  Box,
+  Card,
+  Spacer,
+  Avatar,
+  Button,
+  Heading,
+  NextLink,
+  CardBody,
+  CardFooter,
+  AvatarGroup,
+} from '@/components';
+
+type PropTypes = {
+  post: Post;
+};
+export const PostCard: FC<PropTypes> = ({ post }) => {
+  return (
+    <Box>
+      <Card height={400}>
+        <CardBody padding={3}>
+          <Flex>
+            <Box fontSize="sm" color="gray.400">
+              {format(post.createdAt, 'PPP')}
+            </Box>
+            <Spacer />
+            <Box>
+              <AvatarGroup size="xs" max={2}>
+                <Avatar
+                  name="Ryan Florence"
+                  src="https://bit.ly/ryan-florence"
+                />
+                <Avatar
+                  name="Segun Adebayo"
+                  src="https://bit.ly/sage-adebayo"
+                />
+                <Avatar name="Kent Dodds" src="https://bit.ly/kent-c-dodds" />
+                <Avatar
+                  name="Prosper Otemuyiwa"
+                  src="https://bit.ly/prosper-baba"
+                />
+                <Avatar
+                  name="Christian Nwamba"
+                  src="https://bit.ly/code-beast"
+                />
+              </AvatarGroup>
+            </Box>
+          </Flex>
+          <Box paddingY={3}>
+            <Heading size="md">{post.title}</Heading>
+          </Box>
+          <Box
+            __css={{
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              display: '-webkit-box',
+              WebkitLineClamp: 5,
+              WebkitBoxOrient: 'vertical',
+            }}
+            as="div"
+            maxHeight={300}
+            dangerouslySetInnerHTML={{ __html: post?.content ?? '' }}
+          />
+        </CardBody>
+        <CardFooter padding={2}>
+          <NextLink href={`/blog/${post.id}`} w="100%">
+            <Button width="100%" size="sm">
+              Read More
+            </Button>
+          </NextLink>
+        </CardFooter>
+      </Card>
+    </Box>
+  );
+};

components/Post/index.ts

@@ -1 +1,2 @@
 export { PostList } from './PostList';
+export { PostCard } from './PostCard';

package.json

@@ -26,6 +26,7 @@
     "@upstash/ratelimit": "0.4.3",
     "@vercel/kv": "0.2.2",
     "argon2": "0.31.0",
+    "date-fns": "2.30.0",
     "deepmerge": "4.3.1",
     "framer-motion": "10.16.1",
     "jotai": "2.4.0",