a tool for shared writing and social publishing
added add and remove card buttons for testing purposes
the card carousel now maps over an array and can add or remove cards to itself with buttons on the card. This will set me up for scrolling the right card into view
+65
-51
+17
app/test/header.tsx
+17
app/test/header.tsx
···
1
+
import { Home } from "../../components/Icons";
2
+
3
+
export const PageHeader = () => {
4
+
return (
5
+
<div className="pageHeader shrink-0 flex justify-between grow-0 mx-4">
6
+
<div className="w-[3px] bg-test h-6 mx-auto" />
7
+
{/* <div className="flex gap-4 items-center">
8
+
<div className="text-grey-55">
9
+
<Home />
10
+
</div>
11
+
12
+
<ButtonPrimary>Share!</ButtonPrimary>
13
+
</div>
14
+
<div>theme</div> */}
15
+
</div>
16
+
);
17
+
};
+48
-51
app/test/page.tsx
+48
-51
app/test/page.tsx
···
1
1
"use client";
2
2
3
-
import { Home } from "../../components/Icons";
4
3
import { ButtonPrimary } from "../../components/Buttons";
5
4
import { useState } from "react";
6
5
import useMeasure from "react-use-measure";
6
+
import { PageHeader } from "./header";
7
7
8
8
export default function Index() {
9
9
let [cardRef, { width: cardWidth }] = useMeasure();
10
-
let [spacerRef, { width: spacerWidth }] = useMeasure();
11
-
12
-
let [cardTwo, setCardTwo] = useState(false);
13
-
let [cardMany, setCardMany] = useState(false);
10
+
let [cards, setCards] = useState([0]);
14
11
15
12
return (
16
13
<div className="pageWrapper h-screen flex flex-col gap-4 py-4">
17
-
<div className="pageHeader shrink-0 flex justify-between grow-0 mx-4">
18
-
<div className="w-[3px] bg-test h-6 mx-auto" />
19
-
{/* <div className="flex gap-4 items-center">
20
-
<div className="text-grey-55">
21
-
<Home />
22
-
</div>
23
-
24
-
<ButtonPrimary>Share!</ButtonPrimary>
25
-
</div>
26
-
<div>theme</div> */}
27
-
</div>
14
+
<PageHeader />
28
15
29
16
<div className="pageContentWrapper w-full overflow-x-scroll snap-mandatory snap-x grow items-stretch flex ">
30
-
<div className="pageContent flex mx-auto">
17
+
<div className="pageContent flex">
31
18
<div style={{ width: `calc((100vw - ${cardWidth}px)/2)` }} />
32
-
<div className="h-full flex items-stretch" ref={cardRef}>
33
-
<Card first>
34
-
<ButtonPrimary
35
-
onClick={() => {
36
-
setCardTwo(!cardTwo);
37
-
}}
38
-
>
39
-
toggle card 2
40
-
</ButtonPrimary>
41
-
<ButtonPrimary
42
-
onClick={() => {
43
-
setCardMany(!cardMany);
44
-
}}
45
-
>
46
-
toggle card many
47
-
</ButtonPrimary>
48
-
</Card>
49
-
</div>
50
-
{cardTwo && <Card>Card 2</Card>}
51
-
{cardMany && (
52
-
<>
53
-
<Card>Card 2</Card>
54
-
<Card>Card 3</Card>
55
-
<Card>Card 4</Card>
56
-
<Card>Card 5</Card>
57
-
<Card>Card 6</Card>
58
-
<Card>Card 7</Card>
59
-
</>
60
-
)}
19
+
20
+
{cards.map((card, index) => (
21
+
<div className="flex items-stretch" ref={cardRef}>
22
+
<Card first={index === 0} key={index} id={index.toString()}>
23
+
Card {card}
24
+
<ButtonPrimary
25
+
onClick={() => {
26
+
//add a new card after this one
27
+
setCards([...cards, card + 1]);
28
+
29
+
//scroll the new card into view
30
+
document
31
+
.getElementById((index + 1).toString())
32
+
?.scrollIntoView();
33
+
}}
34
+
>
35
+
add card
36
+
</ButtonPrimary>
37
+
{index !== 0 && (
38
+
<ButtonPrimary
39
+
onClick={() => {
40
+
cards.splice(index, 1);
41
+
setCards([...cards]);
42
+
}}
43
+
>
44
+
remove card
45
+
</ButtonPrimary>
46
+
)}
47
+
{/* <ButtonPrimary onClick={() => {}}>
48
+
focus this card
49
+
</ButtonPrimary> */}
50
+
</Card>
51
+
</div>
52
+
))}
53
+
61
54
<div
62
-
ref={spacerRef}
63
-
style={{ width: `calc((100vw / 2) - ${cardWidth}px)` }}
55
+
style={{ width: `calc((100vw / 2) - ${cardWidth}px + 12px )` }}
64
56
/>
65
57
</div>
66
58
</div>
···
68
60
);
69
61
}
70
62
71
-
const Card = (props: { children: React.ReactNode; first?: boolean }) => {
63
+
const Card = (props: {
64
+
children: React.ReactNode;
65
+
first?: boolean;
66
+
id: string;
67
+
}) => {
72
68
return (
73
69
<>
74
70
{/* if the card is the first one in the list, remove this div... can we do with :before? */}
75
-
{!props.first && <div className="w-8 snap-center" />}
71
+
{!props.first && <div className="w-6 snap-center" />}
76
72
<div
77
-
className={`p-3 w-[calc(50vw-24px)] max-w-[500px] bg-bg-card border border-grey-80 rounded-lg grow flex flex-col gap-2 ${props.first && "snap-center"}`}
73
+
id={props.id}
74
+
className={`p-3 w-[calc(50vw-24px)] max-w-prose bg-bg-card border border-grey-80 rounded-lg grow flex flex-col gap-2 ${props.first && "snap-center"}`}
78
75
>
79
76
{props.children}
80
77
</div>