Skip to content

Commit 1bf0d21

Browse files
eugene0111eugene0111
committed
spotlight effect, tilt removed, pdf mobile fixed
1 parent c3f5a7b commit 1bf0d21

File tree

9 files changed

+132
-79
lines changed

9 files changed

+132
-79
lines changed

‎app/collections/page.jsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import CollectionCard from "@/components/CollectionCard";
22
import fetchData from "@/lib/sanity/fetchData";
33
import dayjs from "dayjs";
44
import _ from "lodash";
5-
import TiltWrapper from "@/components/TiltWrapper";
65

76
export default async function Collections() {
87
const collections = await fetchData("collection");
@@ -29,9 +28,7 @@ export default async function Collections() {
2928
<div className="m-7 text-center text-3xl">{year}</div>
3029
<div className="flex flex-wrap items-center justify-around gap-20">
3130
{sortedCollections.map((collection) => (
32-
<TiltWrapper key={collection._id}>
33-
<CollectionCard collection={collection} />
34-
</TiltWrapper>
31+
<CollectionCard key={collection._id} collection={collection} />
3532
))}
3633
</div>
3734
</div>

‎components/DevCard.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import RenderImage from "./RenderImage";
2+
import SpotlightCard from "./SpotlightCard";
23

34
const DevCard = ({ developer }) => {
45
return (
5-
<div className="flex flex-col overflow-hidden rounded-xl border border-dark bg-darkest">
6+
<SpotlightCard className="flex flex-col border-dark">
67
<div className="p-6">
78
<div className="relative size-36 overflow-hidden rounded-full shadow-lg">
89
<RenderImage
@@ -17,7 +18,7 @@ const DevCard = ({ developer }) => {
1718
<h3 className="mb-3">{developer.firstName}</h3>
1819
<p className="mb-5">{developer.title}</p>
1920
</div>
20-
</div>
21+
</SpotlightCard>
2122
);
2223
};
2324

‎components/Pdf.jsx‎

Lines changed: 54 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,28 @@
11
"use client";
22
import Link from "next/link";
3-
import { useState } from "react";
3+
import { useState, useEffect, useRef } from "react";
44
import { pdfjs, Document, Page } from "react-pdf";
55

66
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
77

88
const Pdf = ({ doc }) => {
99
const [numPages, setNumPages] = useState(null);
1010
const [pageNumber, setPageNumber] = useState(1);
11+
const [containerWidth, setContainerWidth] = useState(null);
12+
const wrapperRef = useRef(null);
13+
14+
useEffect(() => {
15+
function handleResize() {
16+
if (wrapperRef.current) {
17+
setContainerWidth(wrapperRef.current.clientWidth);
18+
}
19+
}
20+
21+
handleResize();
22+
23+
window.addEventListener("resize", handleResize);
24+
return () => window.removeEventListener("resize", handleResize);
25+
}, []);
1126

1227
function onDocumentLoadSuccess({ numPages }) {
1328
setNumPages(numPages);
@@ -26,37 +41,51 @@ const Pdf = ({ doc }) => {
2641
}
2742

2843
return (
29-
<div className="flex flex-col items-center">
30-
<Document file={doc.url} onLoadSuccess={onDocumentLoadSuccess}>
31-
<Page pageNumber={pageNumber} />
32-
</Document>
33-
<div>
34-
<p className="mb-5 text-center">
44+
<div className="flex w-full flex-col items-center px-2 sm:px-4" ref={wrapperRef}>
45+
<div className="w-full flex justify-center" style={{ overflow: 'hidden' }}>
46+
<div className="w-full max-w-full flex justify-center">
47+
<Document file={doc.url} onLoadSuccess={onDocumentLoadSuccess} className="flex justify-center">
48+
<Page
49+
pageNumber={pageNumber}
50+
width={containerWidth ? Math.min(containerWidth - 16, 800) : null}
51+
renderTextLayer={false}
52+
renderAnnotationLayer={false}
53+
className="max-w-full"
54+
style={{ maxWidth: '100%', height: 'auto' }}
55+
/>
56+
</Document>
57+
</div>
58+
</div>
59+
60+
<div className="flex flex-col items-center mt-4 w-full max-w-full">
61+
<p className="mb-4 sm:mb-5 text-center text-sm sm:text-base px-2">
3562
Page {pageNumber || (numPages ? 1 : "--")} of {numPages || "--"}
3663
</p>
37-
<button
38-
type="button"
39-
className="btn mb-3 mr-1 w-36 border-none bg-blue-400 text-white disabled:bg-blue-200"
40-
disabled={pageNumber <= 1}
41-
onClick={previousPage}
42-
>
43-
Previous
44-
</button>
45-
<button
46-
type="button"
47-
className="btn mb-3 ml-1 w-36 border-none bg-blue-400 text-white disabled:bg-blue-200"
48-
disabled={pageNumber >= numPages}
49-
onClick={nextPage}
50-
>
51-
Next
52-
</button>
64+
<div className="flex justify-center gap-2 sm:gap-3 mb-3 w-full px-2">
65+
<button
66+
type="button"
67+
className="btn w-24 sm:w-32 md:w-36 text-xs sm:text-sm border-none bg-blue-400 text-white disabled:bg-blue-200 py-2 sm:py-3"
68+
disabled={pageNumber <= 1}
69+
onClick={previousPage}
70+
>
71+
Previous
72+
</button>
73+
<button
74+
type="button"
75+
className="btn w-24 sm:w-32 md:w-36 text-xs sm:text-sm border-none bg-blue-400 text-white disabled:bg-blue-200 py-2 sm:py-3"
76+
disabled={pageNumber >= numPages}
77+
onClick={nextPage}
78+
>
79+
Next
80+
</button>
81+
</div>
5382
</div>
54-
<div>
83+
<div className="w-full px-2 flex justify-center">
5584
<Link
5685
href={doc.url}
5786
download={doc.url}
5887
target="_blank"
59-
className="btn w-52 border-none bg-darkest text-center text-white"
88+
className="btn w-40 sm:w-48 md:w-52 border-none bg-darkest text-center text-white block text-sm sm:text-base py-2 sm:py-3"
6089
>
6190
Download
6291
</Link>

‎components/SpotlightCard.jsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
"use client";
2+
import { useRef, useState } from "react";
3+
4+
export default function SpotlightCard({ children, className = "", spotlightColor = "rgba(156, 205, 126, 0.25)" }) {
5+
const divRef = useRef(null);
6+
const [position, setPosition] = useState({ x: 0, y: 0 });
7+
const [opacity, setOpacity] = useState(0);
8+
9+
const handleMouseMove = (e) => {
10+
if (!divRef.current) return;
11+
const rect = divRef.current.getBoundingClientRect();
12+
setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
13+
};
14+
15+
const handleFocus = () => {
16+
setOpacity(1);
17+
};
18+
19+
const handleBlur = () => {
20+
setOpacity(0);
21+
};
22+
23+
const handleMouseEnter = () => {
24+
setOpacity(1);
25+
};
26+
27+
const handleMouseLeave = () => {
28+
setOpacity(0);
29+
};
30+
31+
return (
32+
<div
33+
ref={divRef}
34+
onMouseMove={handleMouseMove}
35+
onFocus={handleFocus}
36+
onBlur={handleBlur}
37+
onMouseEnter={handleMouseEnter}
38+
onMouseLeave={handleMouseLeave}
39+
className={`relative overflow-hidden rounded-xl border border-white/10 bg-darkest ${className}`}
40+
>
41+
<div
42+
className="pointer-events-none absolute -inset-px z-10 opacity-0 transition duration-300"
43+
style={{
44+
opacity,
45+
background: `radial-gradient(600px circle at ${position.x}px ${position.y}px, ${spotlightColor}, transparent 40%)`,
46+
}}
47+
/>
48+
<div className="relative z-0 h-full">{children}</div>
49+
</div>
50+
);
51+
}

‎components/StorygramCards.jsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Link from "next/link";
22
import RenderImage from "./RenderImage";
33
import dayjs from "dayjs";
44
import { twJoin } from "tailwind-merge";
5+
import SpotlightCard from "./SpotlightCard";
56

67
export default function StorygramCards({ storygrams, clamp }) {
78
return (
@@ -13,7 +14,7 @@ export default function StorygramCards({ storygrams, clamp }) {
1314

1415
return (
1516
<div key={storygram._id} className="mb-8 w-3/4 md:mb-5 md:w-5/12 ">
16-
<div className="flex h-full flex-col overflow-hidden rounded-md bg-darkest">
17+
<SpotlightCard className="flex h-full flex-col rounded-md border-transparent">
1718
<Link
1819
href={storygram.link || "#"}
1920
className="relative block aspect-video w-full"
@@ -67,7 +68,7 @@ export default function StorygramCards({ storygrams, clamp }) {
6768
</div>
6869
)}
6970
</div>
70-
</div>
71+
</SpotlightCard>
7172
</div>
7273
);
7374
})}

‎components/TiltWrapper.jsx‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎package-lock.json‎

Lines changed: 3 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
"react-dom": "18.3.1",
2626
"react-icons": "^4.12.0",
2727
"react-pdf": "^6.2.2",
28-
"react-tilt": "^1.0.2",
2928
"sharp": "^0.32.6",
3029
"swiper": "^10.3.1",
3130
"tailwind-merge": "^1.14.0",

‎styles/globals.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,20 @@ h4 {
145145
.react-pdf__Page__annotations.annotationLayer {
146146
display: none;
147147
}
148+
149+
/* PDF scaling for mobile */
150+
.react-pdf__Document {
151+
display: flex;
152+
justify-content: center;
153+
width: 100%;
154+
}
155+
156+
.react-pdf__Page {
157+
max-width: 100% !important;
158+
height: auto !important;
159+
}
160+
161+
.react-pdf__Page__canvas {
162+
max-width: 100% !important;
163+
height: auto !important;
164+
}

0 commit comments

Comments
 (0)