a tool for shared writing and social publishing
componentized the card carousel a bit
+108
-64
+108
-64
app/test/page.tsx
+108
-64
app/test/page.tsx
···
33
33
key={index}
34
34
>
35
35
Card {card}
36
-
<ButtonPrimary
37
-
onClick={() => {
38
-
//add a new card after this one
39
-
setCards([...cards, card + 1]);
40
-
41
-
// focus the new card
42
-
setFocusedCardIndex(index + 1);
43
-
44
-
//scroll the new card into view
45
-
setTimeout(() => {
46
-
let newCardID = document.getElementById(
47
-
(index + 1).toString(),
48
-
);
49
-
newCardID?.scrollIntoView({
50
-
behavior: "smooth",
51
-
inline: "nearest",
52
-
});
53
-
}, 100);
54
-
}}
55
-
>
56
-
add card
57
-
</ButtonPrimary>
36
+
<AddCardButton
37
+
setCards={setCards}
38
+
cards={cards}
39
+
card={card}
40
+
setFocusedCardIndex={setFocusedCardIndex}
41
+
index={index}
42
+
/>
58
43
{index !== 0 && (
59
-
<ButtonPrimary
60
-
onClick={() => {
61
-
cards.splice(index, 1);
62
-
setCards([...cards]);
63
-
}}
64
-
>
65
-
remove card
66
-
</ButtonPrimary>
44
+
<RemoveCardButton
45
+
setCards={setCards}
46
+
cards={cards}
47
+
index={index}
48
+
/>
67
49
)}
68
-
<ButtonPrimary
69
-
onClick={() => {
70
-
//set the focused card to this one
71
-
setFocusedCardIndex(index);
72
-
73
-
// check if the card is off screen to the right or left
74
-
let cardPosition =
75
-
document
76
-
.getElementById(index.toString())
77
-
?.getBoundingClientRect().left || 0;
78
-
let isOffScreenLeft = cardPosition < 0;
79
-
let isOffScreenRight =
80
-
cardPosition + cardWidth > window.innerWidth;
81
-
82
-
//if card is off screen, scroll one card width to the left or right so that the card is in view
83
-
setTimeout(() => {
84
-
document.getElementById("card-carousel")?.scrollBy({
85
-
top: 0,
86
-
left: isOffScreenLeft
87
-
? -cardWidth
88
-
: isOffScreenRight
89
-
? cardWidth
90
-
: 0,
91
-
behavior: "smooth",
92
-
});
93
-
}, 100);
94
-
}}
95
-
>
96
-
focus this card
97
-
</ButtonPrimary>
50
+
<FocusCardButton
51
+
setFocusedCardIndex={setFocusedCardIndex}
52
+
index={index}
53
+
cardWidth={cardWidth}
54
+
/>
98
55
</Card>
99
56
</div>
100
57
))}
101
58
102
59
<div
103
60
style={{
104
-
width: `max(calc((100vw / 2) - ${cardWidth}px + 12px ), 32px)`,
61
+
width: `max(calc((100vw / 2) - ${cardWidth}px + 12px ), 300px)`,
105
62
}}
106
63
/>
107
64
</div>
···
119
76
return (
120
77
<>
121
78
{/* if the card is the first one in the list, remove this div... can we do with :before? */}
122
-
{!props.first && <div className="w-6 sm:snap-center" />}
79
+
{!props.first && <div className="w-6 md:snap-center" />}
123
80
<div
124
81
id={props.id}
125
82
className={`
126
-
p-3 w-[calc(100vw-12px)] sm:w-[calc(50vw-24px)] max-w-prose
83
+
p-3 w-[calc(100vw-12px)] md:w-[calc(50vw-24px)] max-w-prose
127
84
bg-bg-card border rounded-lg
128
85
grow flex flex-col gap-2
129
-
snap-center sm:snap-align-none
86
+
snap-center md:snap-align-none
130
87
${props.first && "snap-center"}
131
88
${props.focused ? "drop-shadow-lg border-grey-80" : "border-grey-90 "}`}
132
89
>
···
135
92
</>
136
93
);
137
94
};
95
+
96
+
const AddCardButton = (props: {
97
+
setCards: ([]) => void;
98
+
setFocusedCardIndex: (index: number) => void;
99
+
cards: number[];
100
+
card: number;
101
+
index: number;
102
+
}) => {
103
+
return (
104
+
<ButtonPrimary
105
+
onClick={() => {
106
+
//add a new card after this one
107
+
props.setCards([...props.cards, props.card + 1]);
108
+
109
+
// focus the new card
110
+
props.setFocusedCardIndex(props.index + 1);
111
+
112
+
//scroll the new card into view
113
+
setTimeout(() => {
114
+
let newCardID = document.getElementById((props.index + 1).toString());
115
+
newCardID?.scrollIntoView({
116
+
behavior: "smooth",
117
+
inline: "nearest",
118
+
});
119
+
}, 100);
120
+
}}
121
+
>
122
+
add card
123
+
</ButtonPrimary>
124
+
);
125
+
};
126
+
127
+
const RemoveCardButton = (props: {
128
+
setCards: ([]) => void;
129
+
cards: number[];
130
+
index: number;
131
+
}) => {
132
+
return (
133
+
<ButtonPrimary
134
+
onClick={() => {
135
+
props.cards.splice(props.index, 1);
136
+
props.setCards([...props.cards]);
137
+
}}
138
+
>
139
+
remove card
140
+
</ButtonPrimary>
141
+
);
142
+
};
143
+
144
+
const FocusCardButton = (props: {
145
+
setFocusedCardIndex: (index: number) => void;
146
+
index: number;
147
+
cardWidth: number;
148
+
}) => {
149
+
return (
150
+
<ButtonPrimary
151
+
onClick={() => {
152
+
//set the focused card to this one
153
+
props.setFocusedCardIndex(props.index);
154
+
155
+
// check if the card is off screen to the right or left
156
+
let cardPosition =
157
+
document
158
+
.getElementById(props.index.toString())
159
+
?.getBoundingClientRect().left || 0;
160
+
let isOffScreenLeft = cardPosition < 0;
161
+
let isOffScreenRight =
162
+
cardPosition + props.cardWidth > window.innerWidth;
163
+
164
+
//if card is off screen, scroll one card width to the left or right so that the card is in view
165
+
setTimeout(() => {
166
+
document.getElementById("card-carousel")?.scrollBy({
167
+
top: 0,
168
+
left: isOffScreenLeft
169
+
? -props.cardWidth
170
+
: isOffScreenRight
171
+
? props.cardWidth
172
+
: 0,
173
+
behavior: "smooth",
174
+
});
175
+
}, 100);
176
+
}}
177
+
>
178
+
focus this card
179
+
</ButtonPrimary>
180
+
);
181
+
};