Detail card implemented

dsrathore1 · Feb 3, 2024 · d6a5288 · d6a5288
1 parent e4c9371
commit d6a5288
Show file tree

Hide file tree

Showing 10 changed files with 137 additions and 49 deletions.
diff --git a/DB/queries.js b/DB/queries.js
@@ -9,6 +9,4 @@
 export const getBlog = "SELECT * FROM BLOG"
 export const getBlogByID = "SELECT * FROM BLOG WHERE ID=$1 OR SR_NO=$2";
 
-export const postBlogData = "INSERT INTO BLOG (AUTHOR, TITLE, BLOG_DESCRIPTION, BLOG_CONTENT,EMAIL_ID) VALUES($1,$2,$3,$4)"
-
 export const deleteAllData = "TRUNCATE FROM TABLE BLOG";
diff --git a/app/(pages)/blog/page.jsx b/app/(pages)/blog/page.jsx
@@ -1,17 +1,20 @@
+"use client"
 import BlogCard from "@/app/Components/Blog-Card";
+import DetailCard from "@/app/Components/DetailCard";
 import Header from "@/app/Components/Header";
+import { useEffect } from "react";
 
 export default function BlogPage() {
+    useEffect(() => {
+        document.title = "Blog App - Blog"
+    }, [])
     return (
-        <>
-        <Header title={"Blog"}/>
-            <div className="flex justify-between items-center flex-wrap my-24 mx-32">
-                <BlogCard />
-                <BlogCard />
-                <BlogCard />
-                <BlogCard />
+        <div className="relative z-10">
+            <Header title={"Blog"} />
+            <div className="flex justify-center items-center gap-8 flex-wrap my-24 mx-32">
+                <DetailCard />
                 <BlogCard />
             </div>
-        </>
+        </div>
     )
 }
diff --git a/app/Components/Blog-Card.jsx b/app/Components/Blog-Card.jsx
@@ -1,22 +1,53 @@
-import React from 'react'
+"use client"
+import React, { useEffect, useState } from 'react'
 import Image from "next/image";
 import CardImg from "@/app/Assets/Meditation.jpg"
+import moment from 'moment';
 
 const BlogCard = () => {
+    const [data, setData] = useState([]);
+
+    const getData = async () => {
+        try {
+            await fetch("http://localhost:3000/api/blog", {
+                method: "GET"
+            })
+                .then((res) => res.json())
+                .then((data) => {
+                    // console.log(data.result);
+                    setData(data.result);
+                });
+        } catch (error) {
+            if (error) throw error;
+        }
+    }
+
+    useEffect(() => {
+        getData();
+    }, []);
+
     return (
         <>
-            <div className='bg-[#101010] rounded-lg text-[#bdbbb3] w-[40vw] h-[80vh] flex flex-col justify-start my-5'>
-                <Image className='w-full h-[45vh] object-cover rounded-tl-lg rounded-tr-lg' src={CardImg} alt='' height={400} width={400} priority={false} />
-                <div className='my-4 mx-5'>
-                    <h1 className='text-3xl font-semibold text-white'>Post: Gallery Example</h1>
-                    <div className='flex text-sm justify-start gap-10 my-5'>
-                        <p>December 19, 2020</p> /
-                        <p>Category</p> /
-                        <p>{ }Comments</p>
-                    </div>
-                    <p className='leading-7 mt-8'>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the...</p>
-                </div>
-            </div>
+            {
+                data && data.map((data) => {
+                    // console.log(data.created_at);
+                    const createdDate = moment(data.created_at).format('MMMM Do YYYY');
+                    return (
+                        <div key={data.sr_no} className='bg-[#101010] rounded-lg text-[#bdbbb3] w-[40vw] h-[80vh] flex flex-col justify-start my-5 cursor-pointer' onClick={() => { console.log(data.id) }}>
+                            <Image className='w-full h-[45vh] object-cover rounded-tl-lg rounded-tr-lg' src={CardImg} alt='' height={400} width={400} priority={false} />
+                            <div className='my-4 mx-5'>
+                                <h1 className='text-3xl font-semibold text-white'>{data.title}</h1>
+                                <div className='flex text-sm justify-start gap-10 my-5'>
+                                    <p>{createdDate}</p> /
+                                    <p>Category</p> /
+                                    <p>{ }Comments</p>
+                                </div>
+                                <p className='leading-7 mt-8 line-clamp-3'>{data.blog_description}</p>
+                            </div>
+                        </div>
+                    );
+                })
+            }
         </>
     )
 }

diff --git a/app/Components/DetailCard.jsx b/app/Components/DetailCard.jsx
@@ -0,0 +1,40 @@
+"use client"
+import React, { useState } from 'react'
+import { MdCancel } from "react-icons/md";
+import Image from "next/image";
+import BG from "@/app/Assets/landscape.jpg"
+
+const DetailCard = () => {
+    const [cancel, setCancel] = useState(true);
+
+    return (
+        <div className={cancel ? `sticky h-full w-3/4 bg-[#000000d7] rounded-2xl z-0 top-24` : 'hidden'}>
+            <MdCancel className='text-[#ffffffcf] text-4xl absolute right-4 top-2 cursor-pointer' onClick={() => { setCancel(!cancel); }} />
+            <Image className='w-full rounded-t-2xl h-[60vh] object-cover' src={BG} alt='#' height={100} width={800} />
+            <div className='scrollbar text-white px-3 py-5 overflow-y-scroll h-[100vh] snap-y'>
+                <h1 className='text-5xl font-bold'>DevOps Life cycle</h1>
+                <div className='flex text-sm justify-start gap-10 my-5'>
+                    <p>December 24, 2023</p> /
+                    <p>DevOps</p> /
+                    <p>{ }2 Comments</p>
+                </div>
+                <div className='mt-10 divide-[#bbbbbb33] divide-y-[.5px]'>
+                    <div className='flex w-full items-center gap-10'>
+                        <span className='text-white font-semibold text-xl uppercase'>Description</span>
+                        <p className='text-lg text-gray-200 my-10'> The DevOps lifecycle is an iterative and collaborative process that integrates automation and feedback to deliver high-quality software, tailored to meet business and user requirements.</p>
+                    </div>
+                    <div className='flex w-full justify-center items-center gap-10'>
+                        <span className='text-white font-semibold text-xl uppercase'>Content</span>
+                        <p className='text-lg text-gray-200 my-10'> DevOps Lifecycle is the set of phases that includes DevOps for taking part in Development and Operation group duties for quicker software program delivery. DevOps follows positive techniques that consist of code, building, testing, releasing, deploying, operating, displaying, and planning. DevOps lifecycle follows a range of phases such as non-stop development, non-stop integration, non-stop testing, non-stop monitoring, and non-stop feedback. Each segment of the DevOps lifecycle is related to some equipment and applied sciences to obtain the process. Some of the frequently used tools are open source and are carried out primarily based on commercial enterprise requirements. DevOps lifecycle is effortless to manipulate and it helps satisfactory delivery.</p>
+                    </div>
+                    <div className='flex w-full justify-center items-center gap-10'>
+                        <span className='text-white font-semibold text-xl uppercase'>Content</span>
+                        <p className='text-lg text-gray-200 my-10'> DevOps Lifecycle is the set of phases that includes DevOps for taking part in Development and Operation group duties for quicker software program delivery. DevOps follows positive techniques that consist of code, building, testing, releasing, deploying, operating, displaying, and planning. DevOps lifecycle follows a range of phases such as non-stop development, non-stop integration, non-stop testing, non-stop monitoring, and non-stop feedback. Each segment of the DevOps lifecycle is related to some equipment and applied sciences to obtain the process. Some of the frequently used tools are open source and are carried out primarily based on commercial enterprise requirements. DevOps lifecycle is effortless to manipulate and it helps satisfactory delivery.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default DetailCard
diff --git a/app/Components/Header.jsx b/app/Components/Header.jsx
@@ -1,12 +1,16 @@
+"use client"
 import Image from "next/image";
 import HeaderImg from "@/app/Assets/headerImg.jpg"
-
+import { useEffect } from "react";
 
 export default function Header({ title }) {
+    useEffect(() => {
+        document.title = "Blog App - Home"
+    });
     return (
         <div className="h-[55vh] mb-24 relative flex justify-center items-center">
             <Image src={HeaderImg} alt="#" className="object-cover bg-blend-multiply h-full w-full" priority={false} />
-            <h2 className="absolute text-6xl uppercase font-bold text-gray-200">{title}</h2>
+            <h2 className="absolute text-6xl uppercase cursor-default font-bold text-gray-200">{title}</h2>
         </div>
-    )
+    );
 }
diff --git a/app/api/blog/route.js b/app/api/blog/route.js
@@ -1,5 +1,5 @@
 import { client } from "@/DB/connectDB";
-import { getBlog, postBlogData } from "@/DB/queries";
+import { deleteAllData, getBlog } from "@/DB/queries";
 import { NextResponse as res } from "next/server";
 
 export async function GET(req) {
@@ -16,26 +16,11 @@ export async function GET(req) {
     }
 }
 
-export async function POST(req) {
+export async function DELETE(req) {
     try {
-        const { AUTHOR, TITLE, BLOG_DESCRIPTION, BLOG_CONTENT, EMAIL_ID } = await req.json();
-        console.log({ AUTHOR, TITLE, BLOG_DESCRIPTION, BLOG_CONTENT, EMAIL_ID });
-        // return res.json({
-        //     AUTHOR,
-        //     TITLE,
-        //     BLOG_DESCRIPTION,
-        //     BLOG_CONTENT,
-        //     EMAIL_ID
-        // });
-
-        const result = await client.query(postBlogData, [AUTHOR, TITLE, BLOG_DESCRIPTION, BLOG_CONTENT, EMAIL_ID]);
-        console.log(result.rows);
-        return res.json({ message: "Imported data successfully", result: result.rows, data: { AUTHOR, TITLE, BLOG_DESCRIPTION, BLOG_CONTENT, EMAIL_ID } });
-
+        await client.query(deleteAllData);
+        return res.json("Data deleted successfully");
     } catch (error) {
-        return res.json({
-            message: "Internal server error mentioned below 👇🏻",
-            error: error
-        }, { status: 500 });
+        if (err) throw err;
     }
 }
diff --git a/app/globals.css b/app/globals.css
@@ -2,11 +2,15 @@
 @tailwind components;
 @tailwind utilities;
 
-body{
+body {
   background: #282828;
 }
 
-::selection{
+::selection {
   color: white;
   background: #00d612;
+}
+
+.scrollbar::-webkit-scrollbar {
+  display: none;
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint && echo 'DONE🎊'"
   },
   "dependencies": {
+    "moment": "^2.30.1",
     "next": "14.1.0",
     "pg": "^8.11.3",
     "pm2": "^5.3.1",
@@ -17,6 +18,7 @@
     "react-icons": "^5.0.1"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.4",
     "autoprefixer": "^10.0.1",
     "eslint": "^8",
     "eslint-config-next": "14.1.0",

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,5 +14,7 @@ module.exports = {
       },
     },
   },
-  plugins: [],
+  plugins: [
+    // require('@tailwindcss/line-clamp')
+  ],
 };