Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

redirect to similar cards #47

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

redirect to similar cards #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e4ade4
redirect to similar cards
ashiii1 Oct 19, 2024
7a94209
resolving conflicts
ashiii1 Oct 19, 2024
029dc52
Merge branch 'main' into similarCards
ashiii1 Oct 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/components/ExpandedCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import Footer from "./Footer";

const ExpandedCard = ({ post, similarPosts, onBack }) => {
return (
<>
<div className="relative min-h-screen bg-white text-black p-4">
{/* Back button in the top-left corner */}
<button
className="absolute top-64 left-56 text-white bg-gray-800 p-3 rounded-full"
onClick={onBack}
>
← Back
</button>

<div className="flex flex-col items-center mt-8"> {/* Added margin-top to adjust spacing below the back button */}
<img
src={post.img}
alt={post.title}
className="w-full max-w-3xl h-auto object-cover rounded-lg mb-6"
/>
<h2 className="text-3xl font-bold mb-2">{post.title}</h2>
<p className="text-lg text-black mb-12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
commodo cursus magna, vel scelerisque nisl consectetur et.
</p>

<h3 className="text-2xl font-bold mb-4">Similar Posts</h3>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{similarPosts.map((similarPost) => (
<div
key={similarPost.id}
className="bg-gray-800 rounded-lg shadow-md overflow-hidden"
>
<img
src={similarPost.img}
alt={similarPost.title}
className="w-full h-64 object-fill object-center"
/>
<div className="p-4">
<h4 className="text-lg text-white font-bold">{similarPost.title}</h4>
</div>
</div>
))}
</div>

</div>

</div>

<Footer/>

</>
);
};

export default ExpandedCard;
6 changes: 2 additions & 4 deletions src/components/PostCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
// import React from "react";

const PostCard = ({ post }) => {
return (
<div className="bg-secondary rounded-lg shadow-md overflow-hidden">
<div className="bg-secondary rounded-lg shadow-md overflow-hidden transition-transform duration-300 ease-in-out transform hover:scale-105 cursor-pointer">
<img
src={post.img}
alt={post.title}
className="w-full h-64 object-fill object-center"
className="w-full h-64 object-cover" // Use object-cover for proper scaling
/>
<div className="p-4">
<h3 className="text-lg text-white font-bold">{post.title}</h3>
Expand Down
81 changes: 28 additions & 53 deletions src/components/RecentPosts.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,33 @@
import React, { useEffect, useState } from "react";
import PostCard from "./PostCard";
import LoadMoreButton from "./LoadMoreButton";

const RecentPosts = () => {
const [posts, setPosts] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// Fetch posts from the /get-blogs route
useEffect(() => {
const fetchPosts = async () => {
try {
const response = await fetch("/get-blogs");

// Check if the response is JSON because sometime response geting is not in json
const contentType = response.headers.get("content-type");
if (!contentType || !contentType.includes("application/json")) {
throw new Error("Expected JSON, received: " + contentType);
}

const data = await response.json();
setPosts(data);
setLoading(false);
} catch (error) {
setError(error.message);
setLoading(false);
}
};

fetchPosts();
}, []);

if (loading) {
return <p className="text-white">Loading...</p>;
}

if (error) {
return <p className="text-red-500">Error: {error}</p>;
}

Comment on lines -5 to -41
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dont remove this. We need to fetch posts instead of displaying mock data

const RecentPosts = ({ blogPosts, onCardClick }) => {
return (
<section className="container mx-auto px-4 py-12">
<h2 className="text-2xl text-white font-semibold mb-8">
Recent blog posts
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{posts.length > 0 ? (
posts.map((post) => <PostCard key={post.id} post={post} />)
) : (
<p className="text-white">No posts available</p>
)}
<div className="py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="lg:text-center">

</div>

<div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
{blogPosts.map((post) => (
<div
key={post.id}
className="relative rounded-lg shadow-lg overflow-hidden cursor-pointer"
onClick={() => onCardClick(post)} // Handle card click
>
<img
src={post.img}
alt={post.title}
className="w-full h-64 object-cover object-center"
/>
<div className="p-6">
<h3 className="text-lg font-bold">{post.title}</h3>
<p className="mt-2 text-gray-600">{post.author}</p>
<p className="mt-1 text-sm text-gray-500">{post.date}</p>
</div>
</div>
))}
</div>
</div>
<LoadMoreButton />
</section>
</div>
);
};

Expand Down
55 changes: 41 additions & 14 deletions src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
import { useState } from "react";
import Footer from "../components/Footer";
import HeroSection from "../components/HeroSection";
import RecentPosts from "../components/RecentPosts";
import ExpandedCard from "../components/ExpandedCard";

const Home = () => {
const heroPosts = [
{
title:
"Breaking Into Product Design: Advice from Untitled Founder, Frankie",
description:
"Learn key strategies to break into the product design field with insights from Frankie.",
title: "Breaking Into Product Design: Advice from Untitled Founder, Frankie",
description: "Learn key strategies to break into the product design field with insights from Frankie.",
img: "https://images.unsplash.com/photo-1651066471224-b970dd45acc3?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "Mastering UX Design: Tips from Industry Experts",
description:
"Discover how leading UX designers build intuitive experiences.",
description: "Discover how leading UX designers build intuitive experiences.",
img: "https://plus.unsplash.com/premium_photo-1681755915233-9acafb348a7f?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
{
title: "The Importance of Wireframing in UX Design",
description:
"How wireframing can streamline your design process and improve outcomes.",
description: "How wireframing can streamline your design process and improve outcomes.",
img: "https://images.unsplash.com/photo-1657639466571-15adb5ab7bea?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
];
Expand Down Expand Up @@ -68,18 +66,47 @@ const Home = () => {
date: "Mar 10, 2020",
img: "https://plus.unsplash.com/premium_photo-1727537538673-07a31d71efe3?q=80&w=1932&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
},
// More posts...
];

// State to track the selected post
const [selectedPost, setSelectedPost] = useState(null);

// Handle card click
const handleCardClick = (post) => {
setSelectedPost(post);
};

// Handle back button click
const handleBackClick = () => {
setSelectedPost(null);
};

// Get similar posts (for simplicity, we'll just filter out the selected one)
const getSimilarPosts = (selectedPost) => {
return blogPosts.filter((post) => post.id !== selectedPost.id).slice(0, 3);
};

return (
<div className="bg-background min-h-screen">
{/* Hero Section with multiple posts */}
<HeroSection posts={heroPosts} />
{/* If a post is selected, show the ExpandedCard */}
{selectedPost ? (
<ExpandedCard
post={selectedPost}
similarPosts={getSimilarPosts(selectedPost)}
onBack={handleBackClick}
/>
) : (
<>
{/* Hero Section */}
<HeroSection posts={heroPosts} />

{/* Recent Blog Posts */}
<RecentPosts posts={blogPosts} />
{/* Recent Posts Section */}
<RecentPosts blogPosts={blogPosts} onCardClick={handleCardClick} />

<Footer />
{/* Footer */}
<Footer />
</>
)}
</div>
);
};
Expand Down