import React, { useState } from 'react' import { motion, AnimatePresence } from 'framer-motion' import { ChevronLeft, ChevronRight } from 'lucide-react' interface DayProps { classNames: string day: DayType subscriptions?: { name: string logo: string payment: number total: number since: string every: string color: string }[] modalXPosition?: 'left' | 'right' } const Day: React.FC<DayProps> = ({ classNames, subscriptions, day }) => { const [isHovered, setIsHovered] = useState(false) return ( <> <motion.div className={`relative flex items-end justify-center py-1 ${classNames}`} style={{ height: '71.72px', borderRadius: 16, }} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} id={`day-${day.day}`} > <motion.div className="flex flex-col items-center justify-center"> {subscriptions && ( <div className="flex"> {subscriptions.map((sub, index) => ( <motion.img key={index} src={sub.logo} alt={sub.name} className="-mr-1 mb-1 hidden h-6 w-6 sm:block" layoutId={`logo-${sub.name}-${day.day}`} /> ))} </div> )} <span className="text-sm text-white">{day.day}</span> </motion.div> <AnimatePresence> {subscriptions && isHovered && ( <motion.div className="absolute bottom-full w-[250px]" style={{ left: day.modalXPosition === 'left' ? 0 : 'auto', right: day.modalXPosition === 'right' ? 0 : 'auto', }} initial={{ scale: 0, y: 10, opacity: 0 }} animate={{ scale: 1, y: 0, opacity: 1 }} exit={{ scale: 0, y: 10, opacity: 0 }} > <div className="mb-1 flex w-full items-center justify-center p-1 font-medium text-white" style={{ borderRadius: 20, background: subscriptions && createGradient( subscriptions?.map((sub) => sub.color) || [], ), }} > <div className="w-full rounded-2xl bg-zinc-900 p-3"> {subscriptions.map((sub, index) => ( <React.Fragment key={index}> <div className="w-full border-b border-zinc-700/50 pb-2 pt-2 first:pt-0 last:border-b-0 last:pb-0"> <div className="flex w-full items-center justify-between"> <div className="flex items-center gap-1"> <img src={sub.logo} alt={sub.name} className="size-5" /> <span className="text-lg">{sub.name}</span> </div> <span className="text-lg font-semibold"> €{sub.payment} </span> </div> <div className="mb-2 mt-1.5 flex w-full items-center justify-between"> <span className="text-xs">{sub.every}</span> <span className="text-xs opacity-60"> Next payment </span> </div> <div className="flex w-full items-center justify-between"> <span className="text-xs"> Total since {sub.since} </span> <span className="text-md font-semibold"> €{sub.total} </span> </div> </div> </React.Fragment> ))} </div> </div> </motion.div> )} </AnimatePresence> {subscriptions && ( <div className="absolute right-2 top-2 size-2 rounded-full" style={{ background: createGradient( subscriptions?.map((sub) => sub.color) || [], ), }} ></div> )} </motion.div> </> ) } const CalendarGrid: React.FC<{ currentMonth: Date }> = ({ currentMonth }) => { // Logic to generate days for the current month const getDaysInMonth = (date: Date) => { const year = date.getFullYear() const month = date.getMonth() const daysInMonth = new Date(year, month + 1, 0).getDate() const firstDayOfMonth = new Date(year, month, 1).getDay() const days: DayType[] = [] // Add previous month's days const prevMonth = new Date(year, month, 0) const prevMonthDays = prevMonth.getDate() for (let i = 0; i < firstDayOfMonth; i++) { const day = prevMonthDays - firstDayOfMonth + i + 1 days.push({ day: day.toString(), classNames: 'bg-zinc-700/20 opacity-40', }) } // Add current month's days for (let i = 1; i <= daysInMonth; i++) { const dayString = i.toString().padStart(2, '0') const existingDay = DAYS.find((d) => d.day === dayString) days.push(existingDay || { day: dayString, classNames: 'bg-[#1e1e1e]' }) } // Add next month's days to fill the grid const remainingDays = 42 - days.length // 6 rows * 7 days for (let i = 1; i <= remainingDays; i++) { days.push({ day: i.toString(), classNames: 'bg-zinc-700/20 opacity-40' }) } return days } const monthDays = getDaysInMonth(currentMonth) return ( <div className="grid grid-cols-7 gap-2"> {monthDays.map((day, index) => ( <Day key={`${day.day}-${index}`} classNames={day.classNames} subscriptions={day.subscriptions} day={day} /> ))} </div> ) } const CircularView: React.FC = () => { const premiumDays = DAYS.filter((day) => day.subscriptions) const totalPayment = premiumDays.reduce( (acc, curr) => acc + curr.subscriptions!.map((s) => s.payment).reduce((a, c) => a + c, 0), 0, ) // Add a gap between segments (in degrees) const gapAngle = 15 const totalGapAngle = gapAngle * premiumDays.length const availableAngle = 360 - totalGapAngle // Calculate the cumulative angles for each segment const cumulativeAngles: number[] = [] let cumulative = 0 premiumDays.forEach((day) => { const proportion = (day.subscriptions?.map((s) => s.payment).reduce((a, c) => a + c, 0) || 0) / totalPayment const angle = proportion * availableAngle cumulativeAngles.push(cumulative) cumulative += angle + gapAngle }) const [hoveredDay, setHoveredDay] = useState<DayType | null>(null) return ( <div className="relative flex h-64 w-full items-center justify-center"> <svg width="500" height="500" viewBox="0 0 400 400"> <defs> {premiumDays.map((day, index) => { const colors = day.subscriptions?.map((sub) => sub.color) || [ '#000', ] const gradientId = `gradient-${index}` return ( <linearGradient key={gradientId} id={gradientId} gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="400" y2="0" > {colors.map((color, idx) => { const offset = colors.length === 1 ? '100%' : `${(idx / (colors.length - 1)) * 100}%` return <stop key={idx} offset={offset} stopColor={color} /> })} </linearGradient> ) })} </defs> <circle cx="200" cy="200" r="150" fill="none" stroke="none" strokeWidth="10" /> {premiumDays.map((day, index) => { const startAngle = cumulativeAngles[index] const proportion = (day.subscriptions ?.map((s) => s.payment) .reduce((a, c) => a + c, 0) || 0) / totalPayment const angle = proportion * availableAngle const startRad = (Math.PI / 180) * (startAngle - 90) const endRad = (Math.PI / 180) * (startAngle + angle - 90) // Définir les points de départ et d'arrivée pour l'arc const x1 = 200 + 150 * Math.cos(startRad) const y1 = 200 + 150 * Math.sin(startRad) const x2 = 200 + 150 * Math.cos(endRad) const y2 = 200 + 150 * Math.sin(endRad) const largeArcFlag = angle > 180 ? 1 : 0 // Chemin pour l'arc const pathData = ` M ${x1} ${y1} A 150 150 0 ${largeArcFlag} 1 ${x2} ${y2} ` // Identifiant du gradient correspondant const gradientId = `gradient-${index}` return ( <motion.g key={day.day}> {/* Arc avec gradient */} <motion.path d={pathData} fill="none" stroke={`url(#${gradientId})`} strokeWidth="30" strokeLinecap="round" initial={{ pathLength: 0 }} animate={{ pathLength: 1 }} exit={{ pathLength: 0 }} transition={{ duration: 0.3 }} /> </motion.g> ) })} </svg> <div className="absolute inset-0 h-full w-full"> {premiumDays.map((day, index) => { const startAngle = cumulativeAngles[index] const proportion = (day.subscriptions ?.map((s) => s.payment) .reduce((a, c) => a + c, 0) || 0) / totalPayment const angle = proportion * availableAngle const middleAngle = startAngle + angle / 2 const middleRad = (Math.PI / 180) * (middleAngle - 90) const logoX = 240 + 230 * Math.cos(middleRad) const logoY = 130 + 230 * Math.sin(middleRad) return ( <motion.div className="hidden flex-col items-center gap-1.5 sm:flex" style={{ x: logoX - 15, y: logoY - 15, position: 'absolute', cursor: 'pointer', }} onMouseEnter={() => setHoveredDay(day)} onMouseLeave={() => setHoveredDay(null)} > {day.subscriptions?.map((sub, index) => ( <motion.img key={index} src={sub.logo} alt={sub.name} layoutId={`logo-${sub.name}-${day.day}`} className="h-6 w-6" /> ))} </motion.div> ) })} </div> <AnimatePresence> {hoveredDay && ( <motion.div key={hoveredDay.day} className="absolute" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} style={{ top: '50%', left: '50%', transform: 'translate(-50%, -150%)', pointerEvents: 'none', }} > <div className="rounded-lg bg-zinc-900 p-2 text-white shadow-lg"> {hoveredDay.subscriptions?.map((sub, index) => ( <React.Fragment key={index}> <div className="w-full border-b border-zinc-700/50 pt-1 last:border-b-0"> <div className="flex items-center gap-2"> <img src={sub.logo} alt={sub.name} className="h-6 w-6" /> <span className="font-semibold">{sub.name}</span> </div> <div className="mt-1"> <span> €{sub.payment} / {sub.every} </span> </div> </div> </React.Fragment> ))} </div> </motion.div> )} </AnimatePresence> </div> ) } const App: React.FC = () => { const [simpleView, setSimpleView] = useState(false) const [currentMonth, setCurrentMonth] = useState(new Date()) const [direction, setDirection] = useState(0) const changeMonth = (newDirection: 'prev' | 'next') => { setDirection(newDirection === 'prev' ? -1 : 1) setCurrentMonth((prevMonth) => { const newMonth = new Date(prevMonth) if (newDirection === 'prev') { newMonth.setMonth(newMonth.getMonth() - 1) } else { newMonth.setMonth(newMonth.getMonth() + 1) } return newMonth }) } const monthName = currentMonth.toLocaleString('en-US', { month: 'long' }) const year = currentMonth.getFullYear() return ( <main className="flex min-h-screen w-full flex-col items-center justify-start bg-black px-4 py-10 md:justify-center"> <div className="relative mx-auto my-10 w-full max-w-[550px]"> <AnimatePresence mode="wait"> {simpleView ? ( <motion.div key="simple-view" initial={{ opacity: 0.5 }} animate={{ opacity: 1 }} exit={{ opacity: 0.5 }} transition={{ duration: 0.15 }} className="relative flex w-full items-center justify-center p-10" > <CircularView /> <motion.button className="absolute flex flex-col items-center justify-center text-white" onClick={() => setSimpleView(false)} layoutId="monthly-spend" > <span className="text-center opacity-50">Monthly spend</span> <span className="text-3xl font-semibold"> € {DAYS.filter((day) => day.subscriptions) .reduce( (acc, curr) => acc + curr .subscriptions!.map((s) => s.payment) .reduce((a, c) => a + c, 0), 0, ) .toPrecision(4)} </span> </motion.button> </motion.div> ) : ( <motion.div key="calendar-view" initial={{ opacity: 0.5 }} animate={{ opacity: 1 }} exit={{ opacity: 0.5 }} transition={{ duration: 0.15 }} className="flex w-full flex-col gap-4" > <div className="flex w-full items-center justify-between gap-4"> <div className="flex items-center gap-4"> <div className="flex items-center gap-2"> <button onClick={() => changeMonth('prev')} className="rounded-full bg-zinc-800 p-2 transition-colors hover:bg-zinc-700" > <ChevronLeft className="text-white" size={20} /> </button> <button onClick={() => changeMonth('next')} className="rounded-full bg-zinc-800 p-2 transition-colors hover:bg-zinc-700" > <ChevronRight className="text-white" size={20} /> </button> </div> <motion.div className="overflow-hidden"> <AnimatePresence mode="popLayout" initial={false}> <motion.h2 key={`${monthName}-${year}`} className="flex items-center justify-start gap-1 text-lg font-bold tracking-wider text-zinc-300 sm:text-3xl" initial={{ y: direction * 50, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: direction * -50, opacity: 0 }} transition={{ duration: 0.3, ease: 'easeInOut' }} > {monthName} <span className="opacity-50">{year}</span> </motion.h2> </AnimatePresence> </motion.div> </div> <motion.button className="flex flex-col items-end text-white" onClick={() => setSimpleView(true)} layoutId="monthly-spend" > <span className="sm:text-md text-right text-sm opacity-50"> Monthly spend </span> <span className="text-lg font-semibold sm:text-xl"> € {DAYS.filter((day) => day.subscriptions) .reduce( (acc, curr) => acc + curr .subscriptions!.map((s) => s.payment) .reduce((a, c) => a + c, 0), 0, ) .toPrecision(4)} </span> </motion.button> </div> <div className="grid grid-cols-7 gap-2"> {daysOfWeek.map((day) => ( <div key={day} className="px-0/5 rounded-xl bg-[#323232] py-1 text-center text-xs text-white" > {day} </div> ))} </div> <AnimatePresence mode="popLayout" initial={false}> <motion.div key={`${monthName}-${year}-grid`} initial={{ x: direction * 50, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: direction * -50, opacity: 0 }} transition={{ duration: 0.3, ease: 'easeInOut' }} > <CalendarGrid currentMonth={currentMonth} /> </motion.div> </AnimatePresence> </motion.div> )} </AnimatePresence> </div> </main> ) } export default App type DayType = { day: string classNames: string subscriptions?: { name: string logo: string payment: number total: number since: string every: string color: string }[] modalXPosition?: 'left' | 'right' } function createGradient(colors: string[]): string { if (colors.length === 0) { return 'none' } if (colors.length === 1) { return colors[0] } const gradientStops = colors .map((color, index) => { const percentage = (index / (colors.length - 1)) * 100 return `${color} ${percentage}%` }) .join(', ') return `linear-gradient(to right, ${gradientStops})` } const DAYS: DayType[] = [ { day: '-3', classNames: 'bg-zinc-700/20 opacity-40' }, { day: '-2', classNames: 'bg-zinc-700/20 opacity-40' }, { day: '-1', classNames: 'bg-zinc-700/20 opacity-40' }, { day: '01', classNames: 'bg-[#1e1e1e]' }, { day: '02', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'Linear', logo: '/linear.svg', payment: 6.99, total: 83.88, since: '2022-01-08', every: 'Every 02th', color: '#5e6ad2', }, ], }, { day: '03', classNames: 'bg-[#1e1e1e]' }, { day: '04', classNames: 'bg-[#1e1e1e]' }, { day: '05', classNames: 'bg-[#1e1e1e]' }, { day: '06', classNames: 'bg-[#1e1e1e]' }, { day: '07', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'Make', logo: '/make.svg', payment: 2.99, total: 35.88, since: '2023-01-01', every: 'Every 07th', color: '#6d0ccc', }, { name: 'AirBnb', logo: '/airbnb.svg', payment: 3.93, total: 47.16, since: '2021-01-01', every: 'Every 07th', color: '#FF5A5F', }, ], }, { day: '08', classNames: 'bg-[#1e1e1e]' }, { day: '09', classNames: 'bg-[#1e1e1e]', }, { day: '10', classNames: 'bg-[#1e1e1e]' }, { day: '11', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'Supabase', logo: '/supabase.svg', payment: 7.99, total: 95.88, since: '2023-01-01', every: 'Every 17th', color: '#3ecf8e', }, ], modalXPosition: 'right', }, { day: '12', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'JetBrains', logo: '/jetbrains.svg', payment: 5.99, total: 71.88, since: '2023-05-03', every: 'Every 12th', color: '#FFFFFF', }, { name: 'Discord', logo: '/discord.svg', payment: 3.99, total: 47.88, since: '2023-01-01', every: 'Every 12th', color: '#5865F2', }, { name: 'Miro', logo: '/miro.svg', payment: 4.99, total: 59.88, since: '2023-01-01', every: 'Every 12th', color: '#fed02f', }, ], modalXPosition: 'right', }, { day: '13', classNames: 'bg-[#1e1e1e]' }, { day: '14', classNames: 'bg-[#1e1e1e]' }, { day: '15', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'Spotify', logo: '/spotify.svg', payment: 2.99, total: 35.88, since: '2023-01-01', every: 'Every 15th', color: '#1DB954', }, { name: 'Webflow', logo: '/webflow.svg', payment: 12.99, total: 155.88, since: '2023-01-01', every: 'Every 15th', color: '#4353FF', }, ], }, { day: '16', classNames: 'bg-[#1e1e1e]' }, { day: '17', classNames: 'bg-[#1e1e1e]', }, { day: '18', classNames: 'bg-[#1e1e1e]' }, { day: '19', classNames: 'bg-[#1e1e1e]', }, { day: '20', classNames: 'bg-[#1e1e1e]' }, { day: '21', classNames: 'bg-[#1e1e1e]' }, { day: '22', classNames: 'bg-[#1e1e1e]' }, { day: '23', classNames: 'bg-[#1e1e1e]' }, { day: '24', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'LinkedIn', logo: '/linkedin.svg', payment: 8.99, total: 107.88, since: '2022-11-01', every: 'Every 24th', color: '#0077B5', }, ], modalXPosition: 'right', }, { day: '25', classNames: 'bg-[#1e1e1e]' }, { day: '26', classNames: 'bg-[#1e1e1e]' }, { day: '27', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'Netflix', logo: '/netflix.svg', payment: 4.33, total: 52, since: '2021-01-01', every: 'Every 07th', color: '#E50914', }, ], modalXPosition: 'left', }, { day: '28', classNames: 'bg-[#1e1e1e]' }, { day: '29', classNames: 'bg-[#1e1e1e]', }, { day: '30', classNames: 'bg-[#1e1e1e] cursor-pointer', subscriptions: [ { name: 'Amazon', logo: '/amazon.svg', payment: 3.45, total: 41.4, since: '2023-01-01', every: 'Every 30th', color: '#FF9900', }, { name: 'Godaddy', logo: '/godaddy.svg', payment: 3.99, total: 47.88, since: '2023-01-01', every: 'Every 30th', color: '#FF69B4', }, ], }, { day: '+1', classNames: 'bg-zinc-700/20 opacity-40' }, { day: '+2', classNames: 'bg-zinc-700/20 opacity-40' }, ] const daysOfWeek = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']

Subscriptions Calendar

Code

Improved

Stacks

Inspiration

X ( Twitter ) Post