From af692e8fc3cb8e68742df4a440652a2105a5a849 Mon Sep 17 00:00:00 2001
From: SiddharthaMishra-dev <mailbox.siddharthamishra@gmail.com>
Date: Fri, 16 Feb 2024 23:18:34 +0530
Subject: [PATCH] [feat]: add profile image in the blog post

---
 actions/actions.ts      | 13 +++++++++++++
 app/blogs/page.tsx      |  1 -
 app/layout.tsx          |  2 +-
 app/page.tsx            |  8 ++++++--
 components/BlogCard.tsx | 24 ++++++++++++++++++++++--
 components/BlogList.tsx |  1 +
 components/Navbar.tsx   |  4 ++--
 7 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/actions/actions.ts b/actions/actions.ts
index 65260d4..b8dfd8f 100644
--- a/actions/actions.ts
+++ b/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);
+  }
+}
diff --git a/app/blogs/page.tsx b/app/blogs/page.tsx
index 096c928..67d4be5 100644
--- a/app/blogs/page.tsx
+++ b/app/blogs/page.tsx
@@ -1,4 +1,3 @@
-// "use client";
 import { FetchAll } from "@/actions/actions";
 import BlogList from "@/components/BlogList";
 
diff --git a/app/layout.tsx b/app/layout.tsx
index 928b586..fa3224e 100644
--- a/app/layout.tsx
+++ b/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",
 };
 
diff --git a/app/page.tsx b/app/page.tsx
index fd6e5af..89942ab 100644
--- a/app/page.tsx
+++ b/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"
diff --git a/components/BlogCard.tsx b/components/BlogCard.tsx
index 191bf44..d69d2c9 100644
--- a/components/BlogCard.tsx
+++ b/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>
     </>
diff --git a/components/BlogList.tsx b/components/BlogList.tsx
index 7b6b4a9..d0a5a82 100644
--- a/components/BlogList.tsx
+++ b/components/BlogList.tsx
@@ -91,6 +91,7 @@ const BlogList = ({ blogs }: BlogListProps) => {
               handleLike={handleLike}
               handleComment={handleComment}
             />
+            <div className="border-b" />
           </li>
         ))}
       </ul>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index efcd557..ec48fdb 100644
--- a/components/Navbar.tsx
+++ b/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>
         )}