[feat]: add profile image in the blog post

actions/actions.ts

@@ -168,3 +168,16 @@ export async function DeleteBlog(props: string | string[]) {
     console.log(err);
   }
 }
+
+export async function GetUserImage(props: string) {
+  try {
+    const usr = await prisma.users.findFirst({
+      where: {
+        id: props,
+      },
+    });
+    return usr?.image || "";
+  } catch (err) {
+    console.log(err);
+  }
+}

app/blogs/page.tsx

@@ -1,4 +1,3 @@
-// "use client";
 import { FetchAll } from "@/actions/actions";
 import BlogList from "@/components/BlogList";
 

app/layout.tsx

@@ -10,7 +10,7 @@ const roboto = Roboto({
 });
 
 export const metadata: Metadata = {
-  title: "blog-g-gers",
+  title: "blog-g-ers",
   description: "Be yourself",
 };
 

app/page.tsx

@@ -4,8 +4,12 @@ import Link from "next/link";
 export default function Home() {
   return (
     <main className="h-full flex flex-col items-center justify-center md:p-24 px-10">
-      <h1 className={` font-black   mb-2 custom-text`}>Blog-g-ers</h1>
-      <h2 className="mt-2 text-2xl md:text-4xl text-gray-200"> Share who you are</h2>
+      <h1
+        className={`font-black mb-2 text-blue-600 text-[2rem] md:text-[4rem] lg:text-[6rem] xl:text-[10rem]`}
+      >
+        blog-g-ers
+      </h1>
+      <h2 className="mt-2 text-2xl md:text-4xl text-gray-200">Share who you are</h2>
       <Link href="/blogs">
         <Button
           color="primary"

components/BlogCard.tsx

@@ -3,6 +3,8 @@ import { Card, CardBody, CardFooter, CardHeader } from "@nextui-org/card";
 import type { blogs } from "@prisma/client";
 import CommentButton from "./CommentButton";
 import LikeButton from "./LikeButton";
+import { useEffect, useState } from "react";
+import { GetUserImage } from "@/actions/actions";
 
 interface CardProps {
   blog: blogs;
@@ -11,9 +13,20 @@ interface CardProps {
 }
 
 const BlogCard = ({ blog, handleLike, handleComment }: CardProps) => {
+  const [image, setImage] = useState("");
+
+  const fetchImage = async () => {
+    const image = await GetUserImage(blog.userId);
+    setImage(image!);
+  };
+
+  useEffect(() => {
+    fetchImage();
+  }, [blog]);
+
   return (
     <>
-      <Card className="w-full p-2 m-4 bg-theme text-cyan-50 font-semibold  drop-shadow-2xl ">
+      <Card className="w-full p-2 m-4 bg-theme text-cyan-50 font-semibold  drop-shadow-2xl bg-transparent">
         <CardHeader className="text-2xl p-4">{blog.title}</CardHeader>
         <CardBody className="p-4">{blog.content}</CardBody>
         <CardFooter className="p-4 flex justify-between items-center">
@@ -27,7 +40,14 @@ const BlogCard = ({ blog, handleLike, handleComment }: CardProps) => {
               handleComment={handleComment}
             />
           </div>
-          <div className="p-4 bg-slate-900 rounded-lg">{blog.username}</div>
+          <div className="p-4  flex gap-x-2 items-center bg-slate-900 rounded-lg">
+            <img
+              className="h-6 w-6 rounded-full"
+              src={image}
+              alt="profile"
+            />
+            {blog.username}
+          </div>
         </CardFooter>
       </Card>
     </>

components/BlogList.tsx

@@ -91,6 +91,7 @@ const BlogList = ({ blogs }: BlogListProps) => {
               handleLike={handleLike}
               handleComment={handleComment}
             />
+            <div className="border-b" />
           </li>
         ))}
       </ul>

components/Navbar.tsx

@@ -41,7 +41,7 @@ const Appbar = () => {
     >
       <NavbarBrand>
         <Link href="/">
-          <p className="text-xl font-bold text-inherit">blog-g-gers</p>
+          <p className="text-xl font-bold text-inherit">blog-g-ers</p>
         </Link>
       </NavbarBrand>
       <NavbarContent
@@ -119,7 +119,7 @@ const Appbar = () => {
               className="font-semibold text-lg"
               href="/signin"
             >
-              Sign In
+              Sign in
             </Button>
           </NavbarItem>
         )}