diff --git a/apps/www/components/LaunchWeek/15/LW15MainStage.tsx b/apps/www/components/LaunchWeek/15/LW15MainStage.tsx index beff3968505..afd0d24aab8 100644 --- a/apps/www/components/LaunchWeek/15/LW15MainStage.tsx +++ b/apps/www/components/LaunchWeek/15/LW15MainStage.tsx @@ -1,13 +1,15 @@ import 'swiper/css' -import React from 'react' +import React, { useEffect, useRef, useState } from 'react' import Image from 'next/image' import Link from 'next/link' -import { cn } from 'ui' +import { Button, cn } from 'ui' import { useTheme } from 'next-themes' import { Swiper, SwiperSlide } from 'swiper/react' import SectionContainer from 'components/Layouts/SectionContainer' import { mainDays, WeekDayProps } from './data' +import { useWindowSize } from 'react-use' +import { useBreakpoint } from 'common' const LW15MainStage = ({ className }: { className?: string }) => { const { resolvedTheme } = useTheme() @@ -35,23 +37,69 @@ const LW15MainStage = ({ className }: { className?: string }) => { ) } -const DayCard = ({ day }: { day: WeekDayProps }) => ( - - -
-
{day.dd}
-
- {day.date} -

{day.title}

+const DayCard = ({ day }: { day: WeekDayProps }) => + day.shipped ? ( + + ) : ( +
+
+
+
+ {day.date} +

[ Access locked ]

+
- -) + ) + +const DayCardShipped = ({ day }: { day: WeekDayProps }) => { + const hiddenRef = useRef(null) + const isTablet = useBreakpoint(1024) + const [hiddenHeight, setHiddenHeight] = useState(0) + const { width } = useWindowSize() + const padding = 16 + + useEffect(() => { + if (hiddenRef?.current) { + const { height } = hiddenRef.current.getBoundingClientRect() + setHiddenHeight(height + padding) + } + + console.log(hiddenHeight) + }, [hiddenRef, width]) + + return ( + + +
+
+
+ {day.date} +

{day.title}

+
+ +
+
+
+ + ) +} const CardBG = ({ day }: { day: WeekDayProps }) => (
@@ -65,7 +113,7 @@ const CardBG = ({ day }: { day: WeekDayProps }) => ( 'absolute inset-0 w-full h-full -z-10', 'transition-all duration-300 !ease-[.24,0,.22,.99]', 'dark:opacity-40 scale-100', - 'group-hover/main:dark:opacity-100 group-hover/main:scale-[104%]' + 'group-hover/main:dark:opacity-100' )} > WeekDayProps[] = (isDark = true) => [ d: 3, dd: 'Wed', shipped: true, - isToday: false, + isToday: true, hasCountdown: false, blog: '/blog/', date: 'Wednesday, 16th', @@ -166,7 +166,7 @@ const days: (isDark?: boolean) => WeekDayProps[] = (isDark = true) => [ id: 'day-4', d: 4, dd: 'Thu', - shipped: true, + shipped: false, isToday: false, hasCountdown: false, blog: '/blog/', @@ -201,7 +201,7 @@ const days: (isDark?: boolean) => WeekDayProps[] = (isDark = true) => [ id: 'day-5', d: 5, dd: 'Fri', - shipped: true, + shipped: false, isToday: false, hasCountdown: false, blog: '/blog/',