purple-2024-year-in-review.tsx (1709B)
1 import Head from "next/head"; 2 import { useIntl } from "react-intl"; 3 import { Npub2024InReviewStats } from "@/pages/purple/2024-in-review/[npub]"; 4 import { Year2024Intro } from "../sections/2024-year-in-review/Year2024Intro"; 5 import { motion, useScroll, useTransform } from "framer-motion"; 6 import StarField from "@/components/sections/2024-year-in-review/StarField" 7 import { MostZappedNote } from "../sections/2024-year-in-review/MostZappedNote"; 8 import { EndThankYou } from "../sections/2024-year-in-review/EndThankYou"; 9 import { useRef } from "react"; 10 import { NumberOfPosts } from "../sections/2024-year-in-review/NumberOfPosts"; 11 12 13 export function Purple2024YearInReview({ stats }: { stats: Npub2024InReviewStats }) { 14 const ref = useRef<HTMLDivElement>(null) 15 const { scrollYProgress } = useScroll({ 16 target: ref, 17 offset: ["start start", "end start"] 18 }); 19 const bgOpacity = useTransform(scrollYProgress, [0.7, 0.98], [1.0, 0.0]); 20 21 return (<> 22 <Head> 23 <title>2024 in review</title> 24 </Head> 25 <main style={{ scrollBehavior: "smooth" }} className="bg-black"> 26 <div ref={ref} className="relative w-full" style={{ height: 1300 }}> 27 <motion.div className="absolute top-0 z-0 w-full h-full pointer-events-none" style={{ opacity: bgOpacity }}> 28 <StarField scrollYProgress={scrollYProgress} className="z-0 fixed top-0 left-0 object-cover object-center w-full h-full"/> 29 </motion.div> 30 <Year2024Intro /> 31 </div> 32 {stats.number_of_posts && <NumberOfPosts numberOfPosts={stats.number_of_posts} style={{ paddingTop: "500px" }} />} 33 <MostZappedNote stats={stats} style={{ paddingTop: "500px" }} /> 34 <EndThankYou /> 35 </main> 36 </>) 37 }