Skip to content

Commit

Permalink
added scroll when going to next project/blog post page
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpyle02
bpyle02 committed Jun 2, 2024
1 parent cf6daf4 commit 533f38e
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 109 deletions.
2 changes: 1 addition & 1 deletion app/(user)/about/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ async function AboutPage() {
<div className = "w-full h-screen flex flex-col items-center justify-center md:mt-0 mt-28">
<div className = "pt-10">
<Link href="/">
<Image className="w-40 mx-auto shadow-xl rounded-full drop-shadow-sm" src={urlFor(data.image.url).url()} alt="profile photo" width={128} height={128} />
<Image className="w-40 mx-auto rounded-full" src={urlFor(data.image.url).url()} alt="profile photo" width={1000} height={1000} />
</Link>
</div>
<div className="text-center">
Expand Down
102 changes: 55 additions & 47 deletions components/BlogList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,16 @@ const ProjectList = ({ posts }: Props) => {

const nextPage = () => {
setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
document.getElementById('projectlist').scrollIntoView({
behavior: "smooth"
});
};

const prevPage = () => {
setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
document.getElementById('projectlist').scrollIntoView({
behavior: "smooth"
});
};

// Filter posts based on the selected category
Expand All @@ -51,57 +57,59 @@ const ProjectList = ({ posts }: Props) => {
<div className="mx-8">
<p className="text-5xl text-black font-bold">Recent Posts</p>
<hr className="h-[0.6rem] bg-[#2570d1] border-0 mb-20" />
{currentItems.map((post, index) => (
<div key={index} className="mb-8">
<div className="flex flex-col md:flex-row">
<div className="md:w-1/2 w-full md:pr-[1rem] md:flex md:items-center">
<ClientSideRoute key={post._id} route={`/post/${post.slug.current}`}>
<Image
className="rounded-xl hover:shadow-2xl duration-300 transition-shadow"
src={urlFor(post.mainImage).url()}
alt={post.author.name}
layout="responsive"
width={500}
height={150}
/>
</ClientSideRoute>
</div>
<div className="md:w-1/2 md:pl-[1rem]">
<div className="flex flex-row mt-8 md:mt-0">
<p className="text-lg">
{String(new Date(post._updatedAt).toLocaleDateString(
"en-US", {
day: "numeric",
month: "long",
year: "numeric",
}
)).toUpperCase()}
</p>
<span id="projectlist" className="scroll-mt-56">
{currentItems.map((post, index) => (
<div key={index} className="mb-8">
<div className="flex flex-col md:flex-row">
<div className="md:w-1/2 w-full md:pr-[1rem] md:flex md:items-center">
<ClientSideRoute key={post._id} route={`/post/${post.slug.current}`}>
<Image
className="rounded-xl hover:shadow-2xl duration-300 transition-shadow"
src={urlFor(post.mainImage).url()}
alt={post.author.name}
layout="responsive"
width={500}
height={150}
/>
</ClientSideRoute>
</div>
<ClientSideRoute key={post._id} route={`/post/${post.slug.current}`}>
<p className="text-4xl font-bold my-5 hover:text-[#2570d1] duration-300 transition-colors">{post.title}</p>
</ClientSideRoute>
<div className="flex flex-wrap items-center mb-5">
{post.categories.map((category) => (
<p
key={category._id}
onClick={() => handleCategoryClick(category.title)}
className={`bg-[#2570d1] hover:bg-[#4a5869] text-white px-3 py-1 rounded-lg text-sm font-semibold mt-1 mr-2 cursor-pointer ${
category.title === selectedCategory
? "bg-[#4a5869] hover:bg-[#2570d1]"
: ""
}`}
>
{category.title}
<div className="md:w-1/2 md:pl-[1rem]">
<div className="flex flex-row mt-8 md:mt-0">
<p className="text-lg">
{String(new Date(post._updatedAt).toLocaleDateString(
"en-US", {
day: "numeric",
month: "long",
year: "numeric",
}
)).toUpperCase()}
</p>
))}
</div>
<ClientSideRoute key={post._id} route={`/post/${post.slug.current}`}>
<p className="text-4xl font-bold my-5 hover:text-[#2570d1] duration-300 transition-colors">{post.title}</p>
</ClientSideRoute>
<div className="flex flex-wrap items-center mb-5">
{post.categories.map((category) => (
<p
key={category._id}
onClick={() => handleCategoryClick(category.title)}
className={`bg-[#2570d1] hover:bg-[#4a5869] text-white px-3 py-1 rounded-lg text-sm font-semibold mt-1 mr-2 cursor-pointer ${
category.title === selectedCategory
? "bg-[#4a5869] hover:bg-[#2570d1]"
: ""
}`}
>
{category.title}
</p>
))}
</div>
<p className="text-lg">{post.description}</p>
</div>
<p className="text-lg">{post.description}</p>
</div>
</div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
</div>
))}
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
</div>
))}
</span>
<div className="flex justify-center">
<button onClick={prevPage} className={`bg-[#2570d1] text-white font-semibold py-2 px-6 rounded-md mr-8 ${currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:text-black hover:bg-gray-200 duration-300 transition-colors"}`}>Previous Page</button>
<button onClick={nextPage} className={`bg-[#2570d1] text-white font-semibold py-2 px-6 rounded-md mr-8 ${currentPage === totalPages ? "opacity-50 cursor-not-allowed" : "hover:text-black hover:bg-gray-200 duration-300 transition-colors"}`}>Next Page</button>
Expand Down
9 changes: 0 additions & 9 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,6 @@ import { MenuOutline } from 'react-ionicons'

function Header()
{
// const [navbar, setNavbar] = useState(false)

let Links =[
{name:"Home",link:"/"},
{name:"Blog",link:"/blog"},
{name:"About",link:"/about"},
{name:"Contact",link:"/contact"},
];

let [open, setOpen] = useState(false);

return (
Expand Down
109 changes: 58 additions & 51 deletions components/ProjectList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,16 @@ const ProjectList = ({ projects }: Props) => {

const nextPage = () => {
setCurrentPage((prevPage) => Math.min(prevPage + 1, totalPages));
document.getElementById('projectlist').scrollIntoView({
behavior: "smooth"
});
};

const prevPage = () => {
setCurrentPage((prevPage) => Math.max(prevPage - 1, 1));
document.getElementById('projectlist').scrollIntoView({
behavior: "smooth"
});
};

// Filter projects based on the selected category
Expand All @@ -52,60 +58,61 @@ const ProjectList = ({ projects }: Props) => {
<div className="mx-8">
<p className="text-5xl text-black font-bold">Projects</p>
<hr className="h-[0.6rem] bg-[#2570d1] border-0 mb-20" />

{currentItems.map((project, index) => (
<div key={index} className="mb-8">
<div className="flex flex-col md:flex-row">
<div className="md:w-1/2 w-full md:pr-[1rem] md:flex md:items-center">
<ClientSideRoute key={project._id} route={`/project/${project.slug.current}`}>
<Image
className="rounded-xl hover:shadow-2xl duration-300 transition-shadow"
src={urlFor(project.mainImage).url()}
alt={project.author.name}
layout="responsive"
width={500}
height={150}
/>
</ClientSideRoute>
</div>
<div className="md:w-1/2 md:pl-[1rem]">
<div className="flex flex-row mt-8 md:mt-0">
<p className="text-lg">{String(project.projectType).toUpperCase()}</p>
<p className="text-lg font-bold">&nbsp;·&nbsp;</p>
<p className="text-lg">
{String(new Date(project._updatedAt).toLocaleDateString(
"en-US", {
day: "numeric",
month: "long",
year: "numeric",
}
)).toUpperCase()}
</p>
<span id="projectlist" className="scroll-mt-56">
{currentItems.map((project, index) => (
<div key={index} className="mb-8">
<div className="flex flex-col md:flex-row">
<div className="md:w-1/2 w-full md:pr-[1rem] md:flex md:items-center">
<ClientSideRoute key={project._id} route={`/project/${project.slug.current}`}>
<Image
className="rounded-xl hover:shadow-2xl duration-300 transition-shadow"
src={urlFor(project.mainImage).url()}
alt={project.author.name}
layout="responsive"
width={500}
height={150}
/>
</ClientSideRoute>
</div>
<ClientSideRoute key={project._id} route={`/project/${project.slug.current}`}>
<p className="text-4xl font-bold my-5 hover:text-[#2570d1] duration-300 transition-colors">{project.title}</p>
</ClientSideRoute>
<div className="flex flex-wrap items-center mb-5">
{project.categories.map((category) => (
<p
key={category._id}
onClick={() => handleCategoryClick(category.title)}
className={`bg-[#2570d1] hover:bg-[#4a5869] text-white px-3 py-1 rounded-lg text-sm font-semibold mt-1 mr-2 cursor-pointer ${
category.title === selectedCategory
? "bg-[#4a5869] hover:bg-[#2570d1]"
: ""
}`}
>
{category.title}
</p>
))}
<div className="md:w-1/2 md:pl-[1rem]">
<div className="flex flex-row mt-8 md:mt-0">
<p className="text-lg">{String(project.projectType).toUpperCase()}</p>
<p className="text-lg font-bold">&nbsp;·&nbsp;</p>
<p className="text-lg">
{String(new Date(project._updatedAt).toLocaleDateString(
"en-US", {
day: "numeric",
month: "long",
year: "numeric",
}
)).toUpperCase()}
</p>
</div>
<ClientSideRoute key={project._id} route={`/project/${project.slug.current}`}>
<p className="text-4xl font-bold my-5 hover:text-[#2570d1] duration-300 transition-colors">{project.title}</p>
</ClientSideRoute>
<div className="flex flex-wrap items-center mb-5">
{project.categories.map((category) => (
<p
key={category._id}
onClick={() => handleCategoryClick(category.title)}
className={`bg-[#2570d1] hover:bg-[#4a5869] text-white px-3 py-1 rounded-lg text-sm font-semibold mt-1 mr-2 cursor-pointer ${
category.title === selectedCategory
? "bg-[#4a5869] hover:bg-[#2570d1]"
: ""
}`}
>
{category.title}
</p>
))}
</div>
<p className="text-lg">{project.description}</p>
</div>
<p className="text-lg">{project.description}</p>
</div>
</div>
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
</div>
))}
<hr className="h-px my-8 bg-gray-200 border-0 dark:bg-gray-700"></hr>
</div>
))}
</span>
<div className="flex justify-center">
<button onClick={prevPage} className={`bg-[#2570d1] text-white font-semibold py-2 px-6 rounded-md mr-8 ${currentPage === 1 ? "opacity-50 cursor-not-allowed" : "hover:text-black hover:bg-gray-200 duration-300 transition-colors"}`}>Previous Page</button>
<button onClick={nextPage} className={`bg-[#2570d1] text-white font-semibold py-2 px-6 rounded-md mr-8 ${currentPage === totalPages ? "opacity-50 cursor-not-allowed" : "hover:text-black hover:bg-gray-200 duration-300 transition-colors"}`}>Next Page</button>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "blog",
"version": "1.11.9",
"version": "1.11.10",
"private": true,
"scripts": {
"dev": "next dev",
Expand Down

0 comments on commit 533f38e

Please sign in to comment.