Skip to content

Commit

Permalink
Merge pull request #70 from Zeref101/master
Browse files Browse the repository at this point in the history 
Refactored Blog Container to Grid for Flexibility and Blog Title Readability with Line Clamp
  • Loading branch information
@Dhananjay-Chauhan
Dhananjay-Chauhan authored Dec 27, 2023
2 parents 2d1b86d + cfe1f7c commit 045dc49
Showing 1 changed file with 107 additions and 107 deletions.
214 changes: 107 additions & 107 deletions src/pages/blogs/Blogs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,36 @@ export default function Blogs() {
.then(function (response) {
console.log(response.data);
const userBlog = [];
response.data.topic_list.topics.forEach((topic) => {
const user = response.data.users.find(
(user) => user.id === topic.posters[0].user_id
);
if (user) {
// console.log("Username:", user.username);
// console.log("Name:", user.name);
// console.log("Views:", topic.views);
// console.log("Like Count:", topic.like_count);
// console.log("Created At:", topic.created_at);
// console.log("Slug:", topic.slug);
// console.log("User ID:", topic.posters[0].user_id);
// console.log("\n");
let userData = {};
const date = topic.created_at.substring(0, 10);
const time = topic.created_at.substring(11, 19);
response.data.topic_list.topics.forEach((topic) => {
const user = response.data.users.find(
(user) => user.id === topic.posters[0].user_id
);
if (user) {
// console.log("Username:", user.username);
// console.log("Name:", user.name);
// console.log("Views:", topic.views);
// console.log("Like Count:", topic.like_count);
// console.log("Created At:", topic.created_at);
// console.log("Slug:", topic.slug);
// console.log("User ID:", topic.posters[0].user_id);
// console.log("\n");
let userData = {};
const date = topic.created_at.substring(0, 10);
const time = topic.created_at.substring(11, 19);

userData["name"] = user.name;
userData["view_count"] = topic.views;
userData["likes"] = topic.like_count;
userData["postDate"] = date;
userData["postTime"] = time;
userData["link"] = "https://forum.lugvitc.org/t/" + topic.slug;
userData["title"] = topic.title;
// setBlogs(userData);
userBlog.push(userData);
}
});
setAllBlogs(userBlog);
// console.log(AllBlogs);
userData["name"] = user.name;
userData["view_count"] = topic.views;
userData["likes"] = topic.like_count;
userData["postDate"] = date;
userData["postTime"] = time;
userData["link"] = "https://forum.lugvitc.org/t/" + topic.slug;
userData["title"] = topic.title;
// setBlogs(userData);
userBlog.push(userData);
}
});
setAllBlogs(userBlog);
// console.log(AllBlogs);
})
.catch(function (error) {
console.log(error);
Expand Down Expand Up @@ -95,98 +95,98 @@ export default function Blogs() {

return (
<>
<TerminalWindow
prompts={[
{ path: "~", command: "cd blogs" },
{ path: "~/blogs", command: "cat blogs.txt" },
]}
title="Blogs"
>
{/* <BlogSearch all_blogs={AllBlogs} setter={setBlogs}></BlogSearch> */}
{/* <div className="posts" style={myStyle}>


<TerminalWindow
prompts={[
{ path: "~", command: "cd blogs" },
{ path: "~/blogs", command: "cat blogs.txt" },
]}
title="Blogs"
>
{/* <BlogSearch all_blogs={AllBlogs} setter={setBlogs}></BlogSearch> */}
{/* <div className="posts" style={myStyle}>
<TerminalCard blogs={Blogs}></TerminalCard>
</div> */}


<div class="flex flex-row flex-wrap justify-center items-center w-full">
{AllBlogs.map(
(
{ name, likes, view_count, postDate, postTime, link, title },
index
) => (
<a
href={link}
class="relative inline-block duration-300 ease-in-out transition-transform transform hover:-translate-y-2 my-5 md:mx-5"
>
<div class="bg-gray-800 text-white w-full max-w-8xl min-w-7xl flex flex-col rounded-xl shadow-lg p-4">
<div class="flex items-center flex-col justify-center space-x-4">
<img
src={titleIcon}
alt="loading"
className="h-[25px] w-[25px] mx-5"
/>
<div class="mt-3 text-md font-bold text-center">{title}</div>
</div>
<div class=" flex flex-row flex-wrap justify-between items-center cursor-pointer mt-4">
<div class="flex items-end justify-start space-x-4">
<div class="grid grid-cols-3 gap-4 max-2xl:grid-cols-2 max-lg:grid-cols-1 ">
{AllBlogs.map(
(
{ name, likes, view_count, postDate, postTime, link, title },
index
) => (
<a
href={link}
class=" duration-300 ease-in-out transition-transform transform hover:-translate-y-2 my-5 md:mx-5"
>
<div class="bg-gray-800 text-white w-full max-w-8xl min-w-7xl flex flex-col rounded-xl shadow-lg p-4">
<div class="flex items-center flex-col justify-center space-x-4">
<img
src={date}
src={titleIcon}
alt="loading"
className="h-[25px] w-[25px]"
className="h-[25px] w-[25px] mx-5"
/>
<div class="mx-3 text-md font-thin text-center">
{postDate}
</div>
<div class="mt-3 text-md font-bold text-center line-clamp-1">{title}</div>
</div>
<div class="flex items-end justify-start space-x-4">
<img
src={time}
alt="loading"
className="h-[25px] w-[25px]"
/>
<div class="mx-3 text-md font-thin text-center">
{postTime}
<div class=" flex flex-row flex-wrap justify-between items-center cursor-pointer mt-4">
<div class="flex items-end justify-start space-x-4">
<img
src={date}
alt="loading"
className="h-[25px] w-[25px]"
/>
<div class="mx-3 text-md font-thin text-center">
{postDate}
</div>
</div>
</div>
<div class="flex items-end justify-start space-x-4">
<img
src={like}
alt="loading"
className="h-[25px] w-[25px]"
/>
<div class="mx-3 text-md font-thin text-center">
{likes+83}
<div class="flex items-end justify-start space-x-4">
<img
src={time}
alt="loading"
className="h-[25px] w-[25px]"
/>
<div class="mx-3 text-md font-thin text-center">
{postTime}
</div>
</div>
</div>
<div class="flex items-end justify-end space-x-4">
<img
src={views}
alt="loading"
className="h-[25px] w-[25px]"
/>
<div class="mx-3 text-md font-thin text-center">
{view_count+130}
<div class="flex items-end justify-start space-x-4">
<img
src={like}
alt="loading"
className="h-[25px] w-[25px]"
/>
<div class="mx-3 text-md font-thin text-center">
{likes + 83}
</div>
</div>
<div class="flex items-end justify-end space-x-4">
<img
src={views}
alt="loading"
className="h-[25px] w-[25px]"
/>
<div class="mx-3 text-md font-thin text-center">
{view_count + 130}
</div>
</div>
</div>
</div>
<div class="mt-4 text-white font-medium text-sm">
<div class="flex items-end justify-end space-x-4">
<img
src={author}
alt="loading"
className="h-[35px] w-[35px]"
/>
<div class="mx-3 text-md font-medium text-center">{name}</div>
<div class="mt-4 text-white font-medium text-sm">
<div class="flex items-end justify-end space-x-4">
<img
src={author}
alt="loading"
className="h-[35px] w-[35px]"
/>
<div class="mx-3 text-md font-medium text-center">{name}</div>
</div>
</div>
</div>
</div>
</a>
)
)}
</div>
</TerminalWindow>
</a>
)
)}
</div>
</TerminalWindow>
</>
);
}

0 comments on commit 045dc49

Please sign in to comment.