wip: home posts list

2024-06-01 21:58:46 +10:00
parent 1340f2029a
commit 29892a915d
2 changed files with 49 additions and 33 deletions
--- a/components/homePostList.tsx
+++ b/components/homePostList.tsx
@@ -0,0 +1,47 @@
+import Link from "next/link";
+import Image from "next/image";
+import {getAssetsDomain} from "@/backend/env";
+import {questrial, syne} from "@/app/fonts";
+import { RowDataPacket } from "mysql2";
+import { getPromisePool } from "@/backend/db";
+
+interface post extends RowDataPacket {
+    id: number,
+    slug: string,
+    title: string,
+    preview: string,
+    cover_url: string,
+    cover_alt: string,
+    preview_cover_height: number,
+    preview_cover_width: number,
+}
+
+export type HomePostListProps = {
+    className?: string;
+}
+
+export async function HomePostList(props :HomePostListProps) {
+    const [posts] = await getPromisePool().query<post[]>(
+        'SELECT * FROM post LIMIT 10;'
+    );
+    return (
+        <div className={props.className}>
+            {posts.map(post => (
+                <div key={post.id} className={`border border-slate-100 flex flex-col`}>
+                    <Link
+                        href={`/post/${post.slug}`}
+                        className={`flex flex-row max-w-4xl items-center`} >
+                        <Image src={post.cover_url}
+                               alt={post.cover_alt}
+                               height={post.preview_cover_height}
+                               width={post.preview_cover_width} />
+                        <div className={`flex flex-col mx-10`}>
+                            <p className={`${syne.className} text-2xl`}>{post.title}</p>
+                            <p className={`${questrial.className} line-clamp-3 mt-4`}>{post.preview}</p>
+                        </div>
+                    </Link>
+                </div>
+            ))}
+        </div>
+    )
+}