a tool for shared writing and social publishing
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

made the card snapping is carousel work for mobile!

celine 00045d01 a6d4f7c7

+10 -19
+10 -19
app/test/page.tsx
··· 9 9 let [cardRef, { width: cardWidth }] = useMeasure(); 10 10 let [cards, setCards] = useState([0]); 11 11 let [focusedCardIndex, setFocusedCardIndex] = useState(0); 12 - let [focusedCard, { left: focusedCardPosition }] = useMeasure(); 13 12 14 13 return ( 15 14 <div className="pageWrapper h-screen flex flex-col gap-4 py-4"> ··· 20 19 id="card-carousel" 21 20 > 22 21 <div className="pageContent flex "> 23 - <div 24 - // className="bg-test" 25 - style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} 26 - /> 22 + <div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} /> 27 23 28 24 {cards.map((card, index) => ( 29 25 <div 30 26 className="flex items-stretch" 31 - ref={ 32 - index === 0 33 - ? cardRef 34 - : index === focusedCardIndex 35 - ? focusedCard 36 - : undefined 37 - } 27 + ref={index === 0 ? cardRef : null} 38 28 > 39 29 <Card 40 30 first={index === 0} ··· 110 100 ))} 111 101 112 102 <div 113 - // className="bg-test" 114 - style={{ width: `calc((100vw / 2) - ${cardWidth}px + 12px )` }} 103 + style={{ 104 + width: `max(calc((100vw / 2) - ${cardWidth}px + 12px ), 32px)`, 105 + }} 115 106 /> 116 107 </div> 117 108 </div> ··· 128 119 return ( 129 120 <> 130 121 {/* if the card is the first one in the list, remove this div... can we do with :before? */} 131 - {!props.first && <div className="w-6 snap-center " />} 122 + {!props.first && <div className="w-6 sm:snap-center" />} 132 123 <div 133 124 id={props.id} 134 125 className={` 135 - scroll-m-4 136 - p-3 w-[calc(50vw-24px)] max-w-[200px] 137 - bg-bg-card border border-grey-80 rounded-lg 126 + p-3 w-[calc(100vw-12px)] sm:w-[calc(50vw-24px)] max-w-prose 127 + bg-bg-card border rounded-lg 138 128 grow flex flex-col gap-2 129 + snap-center sm:snap-align-none 139 130 ${props.first && "snap-center"} 140 - ${props.focused && "border-4"}`} 131 + ${props.focused ? "drop-shadow-lg border-grey-80" : "border-grey-90 "}`} 141 132 > 142 133 {props.children} 143 134 </div>