a tool for shared writing and social publishing
styled text blocks
+187
-60
+71
app/test/blocks.tsx
+71
app/test/blocks.tsx
···
1
+
import { useState } from "react";
2
+
import { CardSmall, ImageSmall, LinkSmall } from "../../components/Icons";
3
+
4
+
export const TextBlock = (props: { defaultValue: string; lines: number }) => {
5
+
let [value, setValue] = useState(props.defaultValue);
6
+
let [focus, setFocus] = useState(false);
7
+
8
+
return (
9
+
<div className="textBlockWrapper relative group pt-3">
10
+
<textarea
11
+
className={`textBlock w-full p-0 border-none outline-none resize-none align-top`}
12
+
style={{
13
+
height: `${props.lines * 24}px`,
14
+
}}
15
+
defaultValue={props.defaultValue}
16
+
onChange={(e) => setValue(e.target.value)}
17
+
onFocus={() => setFocus(true)}
18
+
onBlur={() => setFocus(false)}
19
+
/>
20
+
<div className="blockTypeSelectorWrapper absolute bottom-0 right-0">
21
+
<BlockTypeSelector focus={focus} empty={value === ""} />
22
+
</div>
23
+
</div>
24
+
//add button to select block type when empty
25
+
);
26
+
};
27
+
28
+
const BlockTypeSelector = (props: { focus: boolean; empty: boolean }) => {
29
+
return (
30
+
<div
31
+
className={`blockTypeSelector
32
+
${props.focus && props.empty ? "block" : "hidden"}
33
+
${props.empty && "group-hover:block"}`}
34
+
>
35
+
<div className="flex gap-1 ">
36
+
<button className="opacity-30 hover:opacity-100 hover:text-accent">
37
+
<ImageSmall />
38
+
</button>
39
+
40
+
<button className="opacity-30 hover:opacity-100 hover:text-accent">
41
+
<CardSmall />
42
+
</button>
43
+
44
+
<button className="opacity-30 hover:opacity-100 hover:text-accent">
45
+
<LinkSmall />
46
+
</button>
47
+
</div>
48
+
</div>
49
+
);
50
+
};
51
+
export const ImageBlock = (props: { children: React.ReactNode }) => {
52
+
return (
53
+
<div className=" pt-6 relative">
54
+
<div className="absolute right-2 top-2 h-6 w-6 rounded-full bg-bg-card flex place-items-center justify-center">
55
+
x
56
+
</div>
57
+
{props.children}
58
+
</div>
59
+
// add close button
60
+
// add drag handle
61
+
// add rotate
62
+
);
63
+
};
64
+
65
+
export const CardBlock = (props: { children: React.ReactNode }) => {
66
+
return <div>{props.children}</div>;
67
+
};
68
+
69
+
export const ExternalLinkBlock = (props: { children: React.ReactNode }) => {
70
+
return <div>{props.children}</div>;
71
+
};
+58
-59
app/test/card.tsx
+58
-59
app/test/card.tsx
···
1
+
import React from "react";
1
2
import { ButtonPrimary } from "../../components/Buttons";
3
+
import { TextBlock, ImageBlock } from "./blocks";
2
4
3
5
export const Card = (props: {
4
6
children: React.ReactNode;
···
19
21
<div
20
22
id={props.id}
21
23
className={`
22
-
p-3 w-[calc(100vw-12px)] md:w-[calc(50vw-24px)] max-w-prose
24
+
cardWrapper w-[calc(100vw-12px)] md:w-[calc(50vw-24px)] max-w-prose
25
+
relative
26
+
grow flex flex-col
27
+
overflow-y-scroll no-scrollbar
28
+
snap-center
23
29
bg-bg-card rounded-lg border
24
-
grow flex flex-col gap-2
25
-
snap-center
26
-
overflow-y-scroll no-scrollbar
27
-
${props.focused ? "shadow-md border-border" : "border-border-light"}`}
30
+
${props.focused ? "shadow-md border-border" : "border-border-light"}
31
+
32
+
`}
28
33
>
29
-
{props.children}
30
-
<AddCardButton
34
+
<CardContent />
35
+
</div>
36
+
{/* <AddCardButton
31
37
setCards={props.setCards}
32
38
cards={props.cards}
33
39
card={props.card}
···
41
47
index={props.index}
42
48
/>
43
49
)}
44
-
<div className="flex justify-between">
50
+
<div className="flex justify-between">
45
51
<FocusCardButton
46
52
setFocusedCardIndex={props.setFocusedCardIndex}
47
53
index={props.index}
···
52
58
index={props.index}
53
59
cardWidth={props.cardWidth}
54
60
/>
55
-
</div>
56
-
57
-
<div>
58
-
{" "}
59
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ac quam
60
-
in tortor sollicitudin lobortis. Quisque vitae massa sit amet quam
61
-
tristique maximus. Aliquam cursus bibendum nunc eu tempor. Ut metus
62
-
orci, ornare quis rutrum in, pulvinar in nulla. Morbi sapien lectus,
63
-
consectetur quis ultricies at, porttitor sit amet mi. Donec ex lectus,
64
-
condimentum in ligula ut, luctus sodales magna. Vivamus porta pulvinar
65
-
sapien vel sagittis. Aliquam vel sem scelerisque, bibendum lectus et,
66
-
dignissim dolor. Fusce ullamcorper ante in purus pellentesque, quis
67
-
iaculis ex egestas. Vestibulum vel leo in orci commodo ultricies quis
68
-
a elit. Etiam vehicula magna in turpis iaculis efficitur. Aliquam
69
-
massa tortor, dapibus et tellus a, volutpat tempus leo. Cras ac nisl
70
-
semper, porttitor ante eget, feugiat quam. Nulla nibh nulla,
71
-
vestibulum in dolor eu, dapibus sodales nisl. Proin lacus orci, congue
72
-
id accumsan ut, lobortis in libero. Integer eget massa dictum, ornare
73
-
lacus et, aliquam enim. Ut ornare urna vel pharetra dictum. Nullam
74
-
fermentum, purus ac faucibus fringilla, elit enim posuere massa,
75
-
volutpat porta lacus arcu vel eros. Integer sagittis dolor nec velit
76
-
vulputate pulvinar. Quisque vel orci orci. Donec augue ipsum, lobortis
77
-
in sapien aliquam, interdum cursus ipsum. Donec consectetur tristique
78
-
elit. Sed volutpat congue luctus. Mauris vitae arcu eu ex congue
79
-
molestie. Aliquam erat volutpat. Fusce sed ipsum eros. Donec semper
80
-
neque ut dolor aliquam hendrerit. Praesent et tincidunt nisi. Integer
81
-
sollicitudin urna eros, non aliquam neque semper in. Nulla eu nunc at
82
-
urna auctor bibendum ut eu mauris. Nullam ultricies lorem ut nibh
83
-
tristique, vitae euismod tellus placerat. Aliquam euismod, augue ac
84
-
sollicitudin molestie, neque tellus bibendum arcu, quis sollicitudin
85
-
ipsum risus eget dolor. Phasellus consectetur pellentesque urna in
86
-
maximus. Curabitur dignissim tortor quis lorem elementum scelerisque.
87
-
Vestibulum ac rutrum nisl. Sed neque turpis, commodo a augue a,
88
-
hendrerit pretium dui. Cras ut augue vehicula, scelerisque sem ac,
89
-
dictum justo. Phasellus egestas lorem sed est elementum finibus. Proin
90
-
ultrices rutrum neque, at varius arcu pellentesque in. Quisque
91
-
suscipit elit eu ante viverra bibendum et quis mauris. Sed
92
-
pellentesque aliquet dolor at tempus. Donec eu nulla in ligula cursus
93
-
ultrices. Sed quis tristique purus. Duis semper, urna in facilisis
94
-
dapibus, leo ligula gravida tortor, vitae dignissim lorem orci vitae
95
-
ante. Integer auctor ipsum vitae risus scelerisque facilisis. Vivamus
96
-
molestie in purus eu hendrerit. Ut laoreet tortor ut vestibulum
97
-
gravida. Curabitur in orci a quam lacinia iaculis id ut ipsum. Ut nec
98
-
lorem sed mauris condimentum semper eget vitae lorem. Aenean pretium
99
-
ipsum sit amet massa auctor feugiat. Maecenas malesuada imperdiet leo,
100
-
non tempus nibh suscipit eget. Fusce eu diam ligula. Quisque at ornare
101
-
massa. Suspendisse potenti. Fusce convallis, dolor rutrum elementum
102
-
commodo, lacus dui vestibulum lectus, non maximus quam metus finibus
103
-
libero.
104
-
</div>
105
-
</div>
61
+
</div> */}
106
62
</>
107
63
);
108
64
};
···
193
149
</ButtonPrimary>
194
150
);
195
151
};
152
+
153
+
const CardContent = () => {
154
+
return (
155
+
<div className=" p-3 sm:p-4 flex flex-col gap-1 z-10">
156
+
<h3>Card Title</h3>
157
+
158
+
<div className="flex flex-col">
159
+
<TextBlock
160
+
lines={6}
161
+
defaultValue="It is a truth universally acknowledged, that a single man in possession of a good fortune must be in want of a wife. However little known the feelings or views of such a man may be on his first entering a neighbourhood, this truth is so well fixed in the minds of the surrounding families, that he is considered as the rightful property of some one or other of their daughters."
162
+
/>
163
+
<TextBlock
164
+
lines={2}
165
+
defaultValue="“My dear Mr. Bennet,” said his lady to him one day, “have you heard that Netherfield Park is let at last?”"
166
+
/>
167
+
<TextBlock
168
+
lines={1}
169
+
defaultValue="Mr. Bennet replied that he had not."
170
+
/>
171
+
<TextBlock
172
+
lines={2}
173
+
defaultValue="“But it is,” returned she; “for Mrs. Long has just been here, and she told me all about it.”"
174
+
/>
175
+
<TextBlock lines={1} defaultValue="Mr. Bennet made no answer." />
176
+
<TextBlock
177
+
lines={2}
178
+
defaultValue="“Do not you want to know who has taken it?” cried his wife, impatiently."
179
+
/>
180
+
<TextBlock
181
+
lines={1}
182
+
defaultValue="“You want to tell me, and I have no objection to hearing it.”"
183
+
/>
184
+
<TextBlock lines={1} defaultValue="" />
185
+
<ImageBlock>
186
+
<img src="./test-image.jpg" alt="An image" />
187
+
</ImageBlock>
188
+
<ImageBlock>
189
+
<img src="./test-image-2.jpg" alt="An image" />
190
+
</ImageBlock>
191
+
</div>
192
+
</div>
193
+
);
194
+
};
+1
-1
app/test/page.tsx
+1
-1
app/test/page.tsx
···
13
13
14
14
export default function Index() {
15
15
let [cardRef, { width: cardWidth }] = useMeasure();
16
-
let [cards, setCards] = useState([0]);
16
+
let [cards, setCards] = useState([0, 1]);
17
17
let [focusedCardIndex, setFocusedCardIndex] = useState(0);
18
18
let [pageBGImage, setPageBGImage] = useState({
19
19
url: "./test-image.jpg",
+57
components/Icons.tsx
+57
components/Icons.tsx
···
21
21
</svg>
22
22
);
23
23
};
24
+
export const LinkSmall = (props: Props) => {
25
+
return (
26
+
<svg
27
+
width="24"
28
+
height="24"
29
+
viewBox="0 0 24 24"
30
+
fill="none"
31
+
xmlns="http://www.w3.org/2000/svg"
32
+
{...props}
33
+
>
34
+
<path
35
+
fillRule="evenodd"
36
+
clipRule="evenodd"
37
+
d="M10.9944 14.5065C10.29 14.9424 9.36549 14.7247 8.92956 14.0203C8.5353 13.3831 8.27082 12.6779 8.14527 11.9476C8.14428 11.9408 8.14316 11.934 8.14189 11.9272C8.14157 11.9255 8.14126 11.9238 8.14094 11.9221C8.10323 11.6968 8.07874 11.4692 8.06772 11.2405C8.01976 9.73471 8.70451 8.25655 9.60818 6.88898C9.61845 6.87344 9.62774 6.85754 9.63606 6.84134L11.5309 3.97381C13.2961 1.30247 16.8926 0.567878 19.5639 2.33306C22.2353 4.09824 22.9698 7.69475 21.2047 10.3661L18.6958 14.1628C17.971 15.2598 16.9362 16.0301 15.7857 16.4348C16.5521 15.028 17.0741 13.418 16.7583 11.7242C16.755 11.7065 16.7508 11.6892 16.7457 11.6723L18.7017 8.7122C19.5535 7.42318 19.199 5.68774 17.91 4.83598C16.621 3.98422 14.8856 4.33869 14.0338 5.6277L11.525 9.42446C10.9051 10.3625 10.9224 11.5395 11.4806 12.4416C11.9166 13.1461 11.6989 14.0705 10.9944 14.5065ZM15.8503 12.6271C15.808 11.637 15.513 10.6659 14.9871 9.81599C14.5511 9.11153 13.6267 8.89384 12.9222 9.32977C12.2178 9.76569 12.0001 10.6902 12.436 11.3946C12.9942 12.2967 13.0115 13.4738 12.3917 14.4118L9.88282 18.2085C9.03106 19.4975 7.29562 19.852 6.00661 19.0003C4.7176 18.1485 4.36313 16.4131 5.21489 15.124L7.17152 12.163C7.16642 12.1459 7.16217 12.1284 7.15884 12.1106C6.8431 10.4174 7.36463 8.80798 8.13058 7.40157C6.98019 7.80633 5.94554 8.57659 5.2208 9.67339L2.71196 13.4701C0.946784 16.1415 1.68137 19.738 4.35272 21.5032C7.02406 23.2684 10.6206 22.5338 12.3857 19.8624L14.2794 16.9966C14.2882 16.9793 14.298 16.9623 14.3089 16.9458C15.206 15.5882 15.8874 14.1216 15.8503 12.6271ZM19.9944 9.42905C19.8422 9.65944 19.9056 9.96962 20.1359 10.1219C20.3663 10.2741 20.6765 10.2107 20.8287 9.98035C21.8023 8.50704 21.8655 6.69661 21.1786 5.1692C20.9467 4.65351 20.6291 4.16898 20.2313 3.7388C20.0438 3.53605 19.7275 3.52366 19.5247 3.71114C19.322 3.89861 19.3096 4.21495 19.4971 4.4177C19.8208 4.76785 20.0787 5.16145 20.2666 5.57934C20.8244 6.81975 20.764 8.2644 19.9944 9.42905ZM18.6411 2.57707C18.3782 2.49262 18.0966 2.63729 18.0121 2.9002C17.9277 3.16311 18.0723 3.4447 18.3353 3.52916C18.3574 3.53628 18.3757 3.54295 18.4798 3.60382C18.7181 3.74329 19.0244 3.66314 19.1638 3.4248C19.3033 3.18646 19.2231 2.88019 18.9848 2.74073C18.8742 2.67602 18.7753 2.62019 18.6411 2.57707ZM4.02662 14.4183C4.17886 14.1879 4.1155 13.8777 3.88512 13.7255C3.65473 13.5732 3.34455 13.6366 3.19231 13.867C2.07685 15.5551 2.13477 17.6756 3.14551 19.3109C3.29069 19.5458 3.5988 19.6185 3.8337 19.4734C4.0686 19.3282 4.14133 19.0201 3.99615 18.7852C3.17649 17.459 3.14015 15.7598 4.02662 14.4183ZM5.03558 19.9447C4.81966 19.7726 4.50508 19.8081 4.33293 20.024C4.16078 20.2399 4.19627 20.5545 4.41219 20.7266C4.50617 20.8016 4.63468 20.8863 4.75688 20.9553C4.99737 21.091 5.30235 21.0061 5.43808 20.7656C5.5738 20.5251 5.48888 20.2202 5.2484 20.0844C5.16214 20.0358 5.07971 19.9799 5.03558 19.9447Z"
38
+
fill="currentColor"
39
+
/>
40
+
</svg>
41
+
);
42
+
};
43
+
export const ImageSmall = (props: Props) => {
44
+
return (
45
+
<svg
46
+
width="24"
47
+
height="24"
48
+
viewBox="0 0 24 24"
49
+
fill="none"
50
+
xmlns="http://www.w3.org/2000/svg"
51
+
{...props}
52
+
>
53
+
<path
54
+
fillRule="evenodd"
55
+
clipRule="evenodd"
56
+
d="M19.2652 2.56494C20.8254 2.56494 22.0902 3.82974 22.0902 5.38994V18.6099C22.0902 20.1701 20.8254 21.4349 19.2652 21.4349H4.73516C3.17495 21.4349 1.91016 20.1701 1.91016 18.6099V5.38994C1.91016 3.82974 3.17495 2.56494 4.73516 2.56494H19.2652ZM20.8402 5.38994C20.8402 4.52009 20.135 3.81494 19.2652 3.81494L4.73516 3.81494C3.86531 3.81494 3.16016 4.52009 3.16016 5.38994L3.16016 18.6099C3.16016 19.4798 3.86531 20.1849 4.73516 20.1849H19.2652C20.135 20.1849 20.8402 19.4798 20.8402 18.6099V5.38994ZM18.585 4.68457C19.3444 4.68457 19.96 5.30018 19.96 6.05957V17.9406C19.96 18.7 19.3444 19.3156 18.585 19.3156H5.41549C4.65609 19.3156 4.04049 18.7 4.04049 17.9406L4.04049 6.05957C4.04049 5.30018 4.6561 4.68457 5.41549 4.68457L18.585 4.68457ZM18.71 6.05957C18.71 5.99053 18.654 5.93457 18.585 5.93457L5.41549 5.93457C5.34645 5.93457 5.29049 5.99054 5.29049 6.05957L5.29049 13.4913L7.14816 11.8333C7.4881 11.5298 7.99016 11.4946 8.36915 11.7475L11.4035 13.7726L15.948 9.05501C16.33 8.65847 16.9607 8.64532 17.3588 9.0256L18.71 10.316V6.05957ZM18.71 11.6988L16.6682 9.74878L13.8004 12.7258L13.9119 12.8594C14.0785 13.059 14.3703 13.0976 14.5831 12.9482L16.0566 11.9134C16.5024 11.6002 17.083 11.5535 17.5732 11.7912L18.71 12.3425V11.6988ZM18.71 13.4539L17.1369 12.691C16.9735 12.6117 16.7799 12.6273 16.6313 12.7317L15.1578 13.7665C14.5195 14.2148 13.644 14.099 13.1442 13.5002L13.1025 13.4503L12.2739 14.3105L14.7323 15.4676C14.9822 15.5852 15.0894 15.8831 14.9718 16.133C14.8542 16.3828 14.5563 16.49 14.3065 16.3724L11.5916 15.0946C11.5597 15.0796 11.5301 15.0616 11.503 15.0412L10.5445 14.4015L9.75598 15.1606C9.20763 15.6886 8.35079 15.7221 7.76287 15.2386L7.40631 14.9454C7.26576 14.8298 7.07351 14.7997 6.90436 14.8668L5.29049 15.507L5.29049 17.9406C5.29049 18.0096 5.34645 18.0656 5.41549 18.0656L18.585 18.0656C18.654 18.0656 18.71 18.0096 18.71 17.9406V13.4539ZM7.81405 12.5793L9.69292 13.8332L9.06241 14.4403C8.87963 14.6162 8.59401 14.6274 8.39804 14.4663L8.04147 14.173C7.61983 13.8263 7.04308 13.736 6.53564 13.9373L6.09815 14.1108L7.81405 12.5793ZM9.38337 8.58893C9.38337 8.2421 9.66453 7.96094 10.0114 7.96094C10.3582 7.96094 10.6393 8.2421 10.6393 8.58893C10.6393 8.93576 10.3582 9.21692 10.0114 9.21692C9.66453 9.21692 9.38337 8.93576 9.38337 8.58893ZM10.0114 6.96094C9.11225 6.96094 8.38337 7.68981 8.38337 8.58893C8.38337 9.48804 9.11225 10.2169 10.0114 10.2169C10.9105 10.2169 11.6393 9.48804 11.6393 8.58893C11.6393 7.68981 10.9105 6.96094 10.0114 6.96094Z"
57
+
fill="currentColor"
58
+
/>
59
+
</svg>
60
+
);
61
+
};
62
+
export const CardSmall = (props: Props) => {
63
+
return (
64
+
<svg
65
+
width="24"
66
+
height="24"
67
+
viewBox="0 0 24 24"
68
+
fill="none"
69
+
xmlns="http://www.w3.org/2000/svg"
70
+
{...props}
71
+
>
72
+
<path
73
+
fillRule="evenodd"
74
+
clipRule="evenodd"
75
+
d="M19.3432 4.72556L4.8959 7.01059C4.48678 7.0753 4.20757 7.45942 4.27228 7.86855L5.58733 16.1831C5.65204 16.5923 6.03616 16.8715 6.44529 16.8068L20.8926 14.5217C21.3018 14.457 21.581 14.0729 21.5163 13.6638L20.2012 5.34919C20.1365 4.94006 19.7524 4.66086 19.3432 4.72556ZM4.70063 5.77594C3.60962 5.94849 2.86507 6.97282 3.03762 8.06382L3.10679 8.50114C1.82204 9.09635 1.03258 10.4899 1.26474 11.9578L2.18737 17.7912C2.46778 19.5641 4.1323 20.774 5.90519 20.4936L17.9651 18.5862C19.4142 18.357 20.4871 17.2032 20.6776 15.8213L21.0879 15.7564C22.1789 15.5838 22.9235 14.5595 22.7509 13.4685L21.4359 5.15392C21.2633 4.06291 20.239 3.31836 19.148 3.49091L4.70063 5.77594ZM2.74633 11.7235C2.64614 11.0901 2.89926 10.4823 3.35982 10.101L4.35268 16.3784C4.52524 17.4694 5.54955 18.214 6.64056 18.0414L19.0612 16.0769C18.8298 16.605 18.3426 17.0079 17.7308 17.1046L5.67086 19.012C4.71622 19.163 3.81994 18.5115 3.66895 17.5569L2.74633 11.7235ZM7.16645 8.26063C6.75739 8.32578 6.4786 8.71021 6.54375 9.11926C6.6089 9.52832 6.99333 9.80711 7.40238 9.74196L14.0599 8.6816C14.469 8.61645 14.7478 8.23202 14.6826 7.82297C14.6175 7.41391 14.2331 7.13512 13.824 7.20027L7.16645 8.26063ZM7.20493 11.6341C7.1615 11.3614 7.34736 11.1051 7.62006 11.0617L17.9357 9.41867C18.2084 9.37524 18.4647 9.5611 18.5082 9.8338C18.5516 10.1065 18.3657 10.3628 18.093 10.4062L7.77735 12.0492C7.50465 12.0927 7.24836 11.9068 7.20493 11.6341ZM7.97455 13.6159C7.70185 13.6593 7.51599 13.9156 7.55942 14.1883C7.60286 14.461 7.85914 14.6469 8.13184 14.6034L18.4475 12.9604C18.7202 12.917 18.9061 12.6607 18.8626 12.388C18.8192 12.1153 18.5629 11.9294 18.2902 11.9729L7.97455 13.6159Z"
76
+
fill="currentColor"
77
+
/>
78
+
</svg>
79
+
);
80
+
};
24
81
25
82
export const SearchTiny = (props: Props) => {
26
83
return (
public/test-image-2.jpg
public/test-image-2.jpg
This is a binary file and will not be displayed.