generated from sanity-io/template-nextjs-personal-website
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor components and add pagination feature
- Loading branch information
1 parent
23f8e3c
commit 4801c53
Showing
10 changed files
with
438 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| import { HoverEffect } from "@/components/ui/card-hover-effect"; | ||
|
|
||
| export async function CardHoverEffect({ data2 }: any) { | ||
| return ( | ||
| <div className="mx-auto max-w-5xl px-2 md:px-4 lg:px-6"> | ||
| <HoverEffect items={projects} data2={data2} /> | ||
| </div> | ||
| ); | ||
| } | ||
| export const projects = [ | ||
| { | ||
| title: "Stripe", | ||
| description: | ||
| "A technology company that builds economic infrastructure for the internet.", | ||
| link: "https://stripe.com", | ||
| }, | ||
| { | ||
| title: "Netflix", | ||
| description: | ||
| "A streaming service that offers a wide variety of award-winning TV shows, movies, anime, documentaries, and more on thousands of internet-connected devices.", | ||
| link: "https://netflix.com", | ||
| }, | ||
| { | ||
| title: "Google", | ||
| description: | ||
| "A multinational technology company that specializes in Internet-related services and products.", | ||
| link: "https://google.com", | ||
| }, | ||
| { | ||
| title: "Meta", | ||
| description: | ||
| "A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.", | ||
| link: "https://meta.com", | ||
| }, | ||
| { | ||
| title: "Amazon", | ||
| description: | ||
| "A multinational technology company focusing on e-commerce, cloud computing, digital streaming, and artificial intelligence.", | ||
| link: "https://amazon.com", | ||
| }, | ||
| { | ||
| title: "Microsoft", | ||
| description: | ||
| "A multinational technology company that develops, manufactures, licenses, supports, and sells computer software, consumer electronics, personal computers, and related services.", | ||
| link: "https://microsoft.com", | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import React from "react"; | ||
|
|
||
| import { CardHoverEffect } from "./allCard"; | ||
|
|
||
| const AllProjects = ({ data2 }: any) => { | ||
| // console.log(data2); | ||
| return ( | ||
| <div> | ||
| <CardHoverEffect data2={data2} /> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AllProjects; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,210 @@ | ||
| 'use client' | ||
| import type { PortableTextBlock } from '@portabletext/types' | ||
| import { CommentIcon } from '@sanity/icons' | ||
| import { CommentCount } from 'disqus-react' | ||
| import { AnimatePresence, motion } from 'framer-motion' | ||
| import Link from 'next/link' | ||
| import { useEffect,useState } from 'react' | ||
|
|
||
| import ImageBox from '@/components/shared/ImageBox' | ||
| import { | ||
| Pagination, | ||
| PaginationContent, | ||
| PaginationItem, | ||
| PaginationLink, | ||
| PaginationNext, | ||
| PaginationPrevious, | ||
| } from '@/components/ui/pagination' | ||
| import { Skeleton } from '@/components/ui/skeleton' | ||
| import { cn } from '@/lib/utils' | ||
|
|
||
| import { CustomPortableText } from '../shared/CustomPortableText' | ||
|
|
||
| export const HoverEffect = ({ | ||
| items, | ||
| className, | ||
| data2, | ||
| }: { | ||
| items: { | ||
| title: string | ||
| description: string | ||
| link: string | ||
| }[] | ||
| className?: string | ||
| data2: any | ||
| }) => { | ||
| const itemsPerPage = 6 | ||
| const [currentPage, setCurrentPage] = useState(1) | ||
| const [hoveredIndex, setHoveredIndex] = useState<number | null>(null) | ||
| const [isClient, setIsClient] = useState(false) | ||
| const pageURL = typeof window !== 'undefined' ? window.location.href : '' | ||
|
|
||
| useEffect(() => { | ||
| setIsClient(true) | ||
| }, []) | ||
|
|
||
| const startIndex = (currentPage - 1) * itemsPerPage | ||
| const endIndex = startIndex + itemsPerPage | ||
| const visibleItems = data2?.slice(startIndex, endIndex) | ||
|
|
||
| const handlePreviousPage = () => { | ||
| if (currentPage > 1) { | ||
| setCurrentPage((prevPage) => prevPage - 1) | ||
| } | ||
| } | ||
|
|
||
| const handleNextPage = () => { | ||
| const maxPage = Math.ceil(data2.length / itemsPerPage) | ||
| if (currentPage < maxPage) { | ||
| setCurrentPage((prevPage) => prevPage + 1) | ||
| } | ||
| } | ||
|
|
||
| const maxPage = Math.ceil(data2?.length / itemsPerPage) | ||
|
|
||
| return ( | ||
| <div | ||
| suppressHydrationWarning | ||
| className="mt-5 rounded-xl border border-slate-300 p-3 " | ||
| > | ||
| <div | ||
| className={cn( | ||
| 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3', | ||
| className, | ||
| )} | ||
| > | ||
| {visibleItems?.map((item: any, idx: any) => ( | ||
| <Link | ||
| href={`/blog/post/${item?.slug}`} | ||
| key={item?._id} | ||
| className="group relative block h-full w-full p-2" | ||
| onMouseEnter={() => setHoveredIndex(idx)} | ||
| onMouseLeave={() => setHoveredIndex(null)} | ||
| > | ||
| <AnimatePresence> | ||
| {hoveredIndex === idx && ( | ||
| <motion.span | ||
| className="absolute inset-0 block h-full w-full rounded-3xl bg-neutral-200 dark:bg-slate-800/[0.8]" | ||
| layoutId="hoverBackground" | ||
| initial={{ opacity: 0 }} | ||
| animate={{ | ||
| opacity: 1, | ||
| transition: { duration: 0.15 }, | ||
| }} | ||
| exit={{ | ||
| opacity: 0, | ||
| transition: { duration: 0.15, delay: 0.2 }, | ||
| }} | ||
| /> | ||
| )} | ||
| </AnimatePresence> | ||
| <Card> | ||
| <div className="w-full rounded-lg"> | ||
| <ImageBox | ||
| image={item?.coverImage} | ||
| alt={`Cover image from ${item?.title}`} | ||
| classesWrapper="relative aspect-[16/9]" | ||
| /> | ||
| </div> | ||
| <CardTitle>{item?.title}</CardTitle> | ||
| <div className="-mt-5 flex items-center justify-end gap-2 font-mono text-xs text-slate-500"> | ||
| <CommentIcon /> | ||
| <CommentCount | ||
| shortname="hstu" | ||
| config={{ | ||
| url: pageURL, | ||
| identifier: item?.slug, | ||
| title: item?.title, | ||
| }} | ||
| /> | ||
| </div> | ||
|
|
||
| <CardDescription> | ||
| {isClient ? ( | ||
| <CustomPortableText | ||
| value={item?.overview as PortableTextBlock[]} | ||
| /> | ||
| ) : ( | ||
| <div className="space-y-2"> | ||
| <Skeleton className="h-4 w-full" /> | ||
| <Skeleton className="h-4 w-3/4" /> | ||
| </div> | ||
| )} | ||
| </CardDescription> | ||
| </Card> | ||
| </Link> | ||
| ))} | ||
| </div> | ||
| <div className="mt-2 flex w-[100%] cursor-pointer justify-end"> | ||
| <Pagination> | ||
| <PaginationContent className="font-thin"> | ||
| <PaginationItem> | ||
| <PaginationPrevious | ||
| onClick={handlePreviousPage} | ||
| className={currentPage === 1 ? 'hidden' : ''} | ||
| /> | ||
| </PaginationItem> | ||
| <PaginationItem> | ||
| <PaginationNext | ||
| onClick={handleNextPage} | ||
| className={currentPage === maxPage ? 'hidden' : ''} | ||
| /> | ||
| </PaginationItem> | ||
| </PaginationContent> | ||
| </Pagination> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| export const Card = ({ | ||
| className, | ||
| children, | ||
| }: { | ||
| className?: string | ||
| children: React.ReactNode | ||
| }) => { | ||
| return ( | ||
| <div | ||
| style={{ zIndex: 5 }} | ||
| className={cn( | ||
| 'relative h-full w-full overflow-hidden rounded-2xl border border-slate-200 bg-white p-4 group-hover:border-slate-700 dark:border-white/[0.2]', | ||
| className, | ||
| )} | ||
| > | ||
| <div className="relative "> | ||
| <div className="p-4">{children}</div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| export const CardTitle = ({ | ||
| className, | ||
| children, | ||
| }: { | ||
| className?: string | ||
| children: React.ReactNode | ||
| }) => { | ||
| return ( | ||
| <h4 className={cn('mt-4 font-bold tracking-wide text-zinc-700', className)}> | ||
| {children} | ||
| </h4> | ||
| ) | ||
| } | ||
| export const CardDescription = ({ | ||
| className, | ||
| children, | ||
| }: { | ||
| className?: string | ||
| children: React.ReactNode | ||
| }) => { | ||
| return ( | ||
| <p | ||
| className={cn( | ||
| 'text-sm leading-relaxed tracking-wide text-zinc-600', | ||
| className, | ||
| )} | ||
| > | ||
| {children} | ||
| </p> | ||
| ) | ||
| } |
Oops, something went wrong.