CRUD of the blog is completed

Author: Amanuel-Abera

app/(profile)/create-post/[[...blogid]]/page.tsx

@@ -222,7 +222,7 @@ const CreateBlog = ({ params }: CreateBlogProps) => {
           )}
         </div>
         <p className='label mb-3'>Tags&nbsp;<span className='asterik'>*</span></p>
-        <div className="myBorder rounded-lg h-24 p-3 gap-2 items-center cursor-pointer mb-5 flex flex-wrap justify-start">
+        <div className="myBorder rounded-lg min-h-24 h-auto p-3 gap-2 items-center cursor-pointer mb-5 flex flex-wrap justify-start">
           {['Design', 'Research', 'Technology', 'Politics','Development'].map((tag) => (
             <span
               key={tag}
@@ -246,9 +246,9 @@ const CreateBlog = ({ params }: CreateBlogProps) => {
         )}
 
         <div className="flex justify-between mt-10">
-          <button type="submit" onClick={() => setAction('cancel')} className="transparentBtn">
+          {/* <button type="submit" onClick={() => setAction('cancel')} className="transparentBtn">
             Cancel
-          </button>
+          </button> */}
           <div className="flex gap-7">
             <button type="submit" onClick={() => setAction('draft')} className="secondaryBtn">
               Save as Draft

app/(profile)/dashboard/page.tsx

@@ -5,6 +5,7 @@ import { format } from 'date-fns';
 import DeleteBlogBtn from '@/components/DeleteBlogBtn';
 import EditBlogBtn from '@/components/EditBlogBtn';
 import Link from 'next/link';
+import Image from 'next/image';
 
 interface Blog {
   id: string;
@@ -58,12 +59,13 @@ const Dashboard = async() => {
                   <td className="tableBorder px-4 py-2">
                     <div className="flex gap-4 items-center text-sm">
                       <div className="w-8 h-8">
-                        <img
+                        <Image
                           src={blog.blogCover}
                           alt="Blog Image"
                           width={40}
                           height={40}
                           className="w-full h-full object-cover"
+                          priority
                         />
                       </div>
                       <Link href={`/blog/${blog.id}`} className="truncate max-w-xs hover:underline">{blog.blogName}</Link>

app/(profile)/layout.tsx

@@ -6,9 +6,11 @@ const layout = ({
     children: React.ReactNode;
   }>) => {
   return (
-    <main className='flex'>
+    <main className='flex overflow-x-hidden'>
         <SideMenu/>
-        <section className="sectionBg p-4 ml-14 sm:ml-0 w-screen min-h-screen">{children}</section>
+        <section className="sectionBg p-4 ml-14 sm:ml-0 w-[95%] min-h-screen sm:w-screen">
+          {children}
+        </section>
     </main>
   )
 }

app/globals.css

@@ -207,7 +207,7 @@ h1, h2, h3, h4, h5, h6 {
     @apply myBorder bg-transparent p-2 rounded-md value outline-none focus:inputFocus
   }
   .tags{
-    @apply flex gap-1 sm:flex-wrap
+    @apply flex gap-1 flex-wrap
   }
 
   .tag{

components/HeroPage.tsx

@@ -2,9 +2,9 @@
 const HeroPage = () => {
   return (
     <div className="flex flex-col justify-center items-center w-11/12 max-w-5xl mx-auto h-[50vh]">
-        <h1 className="heading text-2xl sm:text-3xl">Empower Voices, Share Stories</h1>
+        <h1 className="heading text-center text-2xl sm:text-3xl">Empower Voices, Share Stories</h1>
         <p className="para text-center max-w-2xl text-sm my-4 sm:text-base">Create, share, and explore a community-driven blog platform where everyone has a voice. Join today and start publishing your ideas in a collaborative space.</p>
-        <form className="myBorder mt-3 rounded-lg p-1">
+        <form className="myBorder mt-3 rounded-lg p-1 flex flex-wrap justify-center gap-2">
             <input type="text" className="input border-0" placeholder="search..."/>
             <input type="submit" value={"Search"} className="primaryBtn primaryBtnText" />
         </form>

components/RecentBlogs.tsx

@@ -5,13 +5,13 @@ import { Blog } from "@/utils/types";
 
 const RecentBlogs = ({recent}:{recent:Blog[]}) => {
   return <>
-    <div className="w-full max-w-7xl mx-auto px-8 sm:px-8">
+    <div className="w-full max-w-7xl mx-auto px-4 sm:px-8 mb-20">
         <h1 className="text-xl mb-4">Recent blog posts</h1>
-        <div className="w-full grid gap-5 md:grid-cols-6 md:h-screen mx-auto">
+        <div className="w-full grid gap-5 md:grid-cols-6 h-auto mx-auto">
             <div  className="w-full col-span-3 mb-11 md:mb-0">
                 <BlogCard blog={recent[0]}/>
             </div>
-            <div className="col-span-3 w-full">
+            <div className="col-span-3 w-full flex flex-col gap-2">
                 <VerticalCard blog={recent[1]}/>
                 <VerticalCard blog={recent[2]}/>
                 <VerticalCard blog={recent[3]}/>

components/SingleCard.tsx

@@ -3,6 +3,7 @@ import Tags from "@/components/Tags";
 import { format, isValid } from "date-fns";
 import { MdOutlineArrowOutward } from "react-icons/md";
 import { Blog } from "@/utils/types";
+import Image from 'next/image';
 
 const SingleCard = ({ blog }: { blog: Blog }) => {
   const createdAt = new Date(blog?.createdAt);
@@ -26,12 +27,13 @@ const SingleCard = ({ blog }: { blog: Blog }) => {
   return (
         <Link href={`/blog/${blog?.id}`} className="w-full grid grid-cols-6 gap-2 h-auto max-w-full">
         <div className="w-full overflow-hidden col-span-6">
-            <img
+            <Image
             src={imageSrc}
             className="w-full h-full object-cover max-h-96"
             width={800}
             height={300}
             alt={`${blog?.blogName}`}
+            priority
             />
         </div>
         <div className="col-span-6">

components/verticalCard.tsx

@@ -3,6 +3,7 @@ import Tags from "@/components/Tags"
 import { format, isValid } from "date-fns";
 import { MdOutlineArrowOutward } from "react-icons/md";
 import { Blog } from "@/utils/types";
+import Image from 'next/image';
 
 const VerticalCard = ({blog}:{blog:Blog}) => {
     const createdAt = new Date(blog?.createdAt);
@@ -22,14 +23,15 @@ const VerticalCard = ({blog}:{blog:Blog}) => {
     const imageSrc = isValidUrl(blog?.blogCover) ? blog?.blogCover : "";
   return (
     <div className="w-full">
-    <Link href={`/blog/${blog?.id}`} className="w-full grid grid-cols-6 gap-2 h-40">
-        <div className="w-full overflow-y-hidden mb-4 col-span-2">
-            <img 
+    <Link href={`/blog/${blog?.id}`} className="w-full grid grid-cols-6 gap-2 h-auto min-h-40">
+        <div className="w-full h-full overflow-y-hidden mb-4 col-span-2">
+            <Image 
                 src={imageSrc} 
                 className="w-full h-full object-cover" 
                 width={800} 
                 height={300} 
                 alt={`${blog?.blogName}`}
+                priority
             />
         </div>
         <div className="col-span-4">