Skip to content

Commit

Permalink
blog page added
Browse files Browse the repository at this point in the history
  • Loading branch information
Sayadkhan committed May 29, 2023
1 parent ea43b59 commit 049df58
Show file tree
Hide file tree
Showing 9 changed files with 121 additions and 1 deletion.
37 changes: 37 additions & 0 deletions components/BlogItem.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import Image from "next/image";
import Link from "next/link";
import React from "react";
import { AiOutlineStar } from "react-icons/ai";
import moment from "moment";

const BlogItem = ({ blog }) => {
return (
<div className="overflow-hidden hover:text-white hover:bg-red-600 border-t border-red-600 duration-300">
<div className="flex gap-5 w-full duration-300">
<div className="w-[30rem] flex items-center rounded-md p-5 lg:h-[24rem]">
<Image
src={blog.imageUrl}
alt={blog.title}
width={640}
height={360}
priority
className="w-full h-full object-fill"
/>
</div>

<div className="flex flex-col w-4/5 mx-10 justify-between py-10 text-red-600 lg:h-[24rem] hover:text-white gap-2">
<div className="flex gap-5">
<span className="font-semibold">{blog.tags}</span>
<span className="font-normal text-base">
Post on: {moment(blog.createdAt).format("DD MMM YY. hh:mm A")}
</span>
</div>
<h3 className="text-6xl font-ligh overflow-hidden">{blog.title}</h3>
<p>{blog.author}</p>
</div>
</div>
</div>
);
};

export default BlogItem;
2 changes: 1 addition & 1 deletion next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["lh3.googleusercontent.com"],
domains: ["lh3.googleusercontent.com", "images.pexels.com"],
remotePatterns: [
{
protocol: "https",
Expand Down
9 changes: 9 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"eslint": "8.37.0",
"eslint-config-next": "13.2.4",
"micro": "^10.0.1",
"moment": "^2.29.4",
"next": "^13.3.1",
"next-auth": "^4.22.1",
"prisma": "^4.12.0",
Expand Down
12 changes: 12 additions & 0 deletions pages/api/blogs/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { getAllBlogs } from "@/prisma/blogs";

export default async function handler(req, res) {
try {
if (req.method === "GET") {
const blogs = await getAllBlogs();
return res.status(200).json(blogs);
}
} catch (error) {
return res.status(500).json({ message: error.message });
}
}
38 changes: 38 additions & 0 deletions pages/blogs/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import BlogItem from "@/components/BlogItem";
import { getAllBlogs } from "@/prisma/blogs";

const BlogsPage = ({ blogs }) => {
return (
<div className="flex flex-col gap-10 min-h-screen">
<div className="title flex flex-col items-center justify-center blog-title w-auto h-96 bg-no-repeat bg-cover bg-center">
<h2 className="uppercase font-extralight text-white text-8xl">
Our Blog
</h2>
</div>

<div className="grid gap-10">
{blogs.map((blog) => (
<BlogItem key={blog.id} blog={blog} />
))}
</div>
</div>
);
};

export default BlogsPage;

export const getServerSideProps = async () => {
const blogs = await getAllBlogs();

const updatedBlogs = blogs.map((blog) => ({
...blog,
updatedAt: blog.updatedAt.toString(),
createdAt: blog.createdAt.toString(),
}));

return {
props: {
blogs: updatedBlogs,
},
};
};
7 changes: 7 additions & 0 deletions prisma/blogs.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import prisma from "./prisma";

// Get all blogs
export const getAllBlogs = async () => {
const blogs = await prisma.blog.findMany({});
return blogs;
};
12 changes: 12 additions & 0 deletions prisma/schema.prisma
Original file line number Diff line number Diff line change
Expand Up @@ -41,4 +41,16 @@ model Order{
userId String @db.ObjectId
user User @relation(fields: [userId], references: [id])
}

model Blog{
id String @id @default(auto()) @map("_id") @db.ObjectId
title String
author String
tags String
imageUrl String
description String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
4 changes: 4 additions & 0 deletions styles/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -456,3 +456,7 @@
border-radius: 50%;
}
}

.blog-title {
background-image: url("https://images.pexels.com/photos/5792901/pexels-photo-5792901.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
}

0 comments on commit 049df58

Please sign in to comment.