creates video voice memos from audio clips; with bluesky integration.
trill.wisp.place
feat: add footer with links
+105
-53
+105
-53
src/App.tsx
+105
-53
src/App.tsx
···
4
4
CheckIcon,
5
5
ChevronsUpDownIcon,
6
6
ClipboardIcon,
7
+
HeartIcon,
7
8
MicIcon,
8
9
Trash2Icon,
9
10
} from "lucide-solid";
10
11
import { Button } from "./components/ui/button";
11
12
import { Card } from "./components/ui/card";
12
-
import { Stack, Box, StackProps, HStack } from "styled-system/jsx";
13
+
import { Stack, Box, StackProps, HStack, VStack } from "styled-system/jsx";
13
14
import { FileUpload } from "./components/ui/file-upload";
14
15
import { IconButton } from "./components/ui/icon-button";
15
16
import { Text } from "./components/ui/text";
···
28
29
import Task from "./components/FileTask";
29
30
import Settings from "./components/Settings";
30
31
import MicRecorder from "./components/MicRecorder";
32
+
import { Link } from "./components/ui/link";
33
+
import { css } from "styled-system/css";
31
34
32
35
const App = () => {
33
36
const collection = () =>
···
96
99
);
97
100
98
101
return (
99
-
<Box
100
-
py="8"
101
-
minH="100vh"
102
-
minW="100vw"
103
-
display="flex"
104
-
justifyContent="center"
105
-
alignItems="center"
106
-
>
107
-
<Card.Root maxW="3xl" w="94%" h="max">
108
-
<Card.Header>
109
-
<Card.Title w="full">
110
-
<Stack direction="row" align="center">
111
-
<Text>trill</Text>
112
-
<div style="flex-grow: 1;"></div>
113
-
<AccountSelect />
114
-
<Settings />
102
+
<>
103
+
<VStack
104
+
py="8"
105
+
minH="100vh"
106
+
minW="100vw"
107
+
justifyContent="center"
108
+
alignItems="center"
109
+
>
110
+
<Card.Root maxW="3xl" w="94%" h="max">
111
+
<Card.Header>
112
+
<Card.Title w="full">
113
+
<Stack direction="row" align="center">
114
+
<Text>trill</Text>
115
+
<div style="flex-grow: 1;"></div>
116
+
<AccountSelect />
117
+
<Settings />
118
+
</Stack>
119
+
</Card.Title>
120
+
<Card.Description>
121
+
<ol>
122
+
<li>1. upload a voice memo or record one.</li>
123
+
<li>2. it will automatically be converted to a video</li>
124
+
<li>
125
+
3. (optional) add an account to enable bluesky integration.
126
+
</li>
127
+
</ol>
128
+
</Card.Description>
129
+
</Card.Header>
130
+
<Card.Body>
131
+
<Stack gap="4" direction={{ base: "row", smDown: "column" }}>
132
+
<Upload
133
+
flex="4"
134
+
acceptedFiles={[]}
135
+
onFileAccept={(e) =>
136
+
e.files.forEach((file) => addTask(selectedAccount(), file))
137
+
}
138
+
/>
139
+
<Tasks
140
+
flex="3"
141
+
minH="20rem"
142
+
maxH="20rem"
143
+
minW="0"
144
+
overflowY="scroll"
145
+
currentTasks={tasks.values().toArray()}
146
+
selectedAccount={accounts().find(
147
+
(account) => account.did === selectedAccount(),
148
+
)}
149
+
/>
115
150
</Stack>
116
-
</Card.Title>
117
-
<Card.Description>
118
-
<ol>
119
-
<li>1. upload a voice memo or record one.</li>
120
-
<li>2. it will automatically be converted to a video</li>
121
-
<li>
122
-
3. (optional) add an account to enable bluesky integration.
123
-
</li>
124
-
</ol>
125
-
</Card.Description>
126
-
</Card.Header>
127
-
<Card.Body>
128
-
<Stack gap="4" direction={{ base: "row", smDown: "column" }}>
129
-
<Upload
130
-
flex="4"
131
-
acceptedFiles={[]}
132
-
onFileAccept={(e) =>
133
-
e.files.forEach((file) => addTask(selectedAccount(), file))
134
-
}
135
-
/>
136
-
<Tasks
137
-
flex="3"
138
-
minH="20rem"
139
-
maxH="20rem"
140
-
minW="0"
141
-
overflowY="scroll"
142
-
currentTasks={tasks.values().toArray()}
143
-
selectedAccount={accounts().find(
144
-
(account) => account.did === selectedAccount(),
145
-
)}
146
-
/>
147
-
</Stack>
148
-
</Card.Body>
149
-
{/*<Card.Footer gap="3"></Card.Footer>*/}
150
-
</Card.Root>
151
+
</Card.Body>
152
+
</Card.Root>
153
+
<Card.Root maxW="3xl" w="94%">
154
+
<Card.Header py="2" px="4">
155
+
<Card.Description>
156
+
<HStack justifyContent="space-between" alignItems="center">
157
+
<Text>
158
+
/made by{" "}
159
+
<Link
160
+
target="_blank"
161
+
rel="noopener noreferrer"
162
+
href="https://gaze.systems"
163
+
>
164
+
90008
165
+
</Link>
166
+
/
167
+
</Text>
168
+
<Link
169
+
target="_blank"
170
+
rel="noopener noreferrer"
171
+
href="https://github.com/sponsors/90-008"
172
+
transition="all"
173
+
transitionDuration="250ms"
174
+
color={{ _hover: "red" }}
175
+
>
176
+
<svg
177
+
xmlns="http://www.w3.org/2000/svg"
178
+
width="16"
179
+
height="16"
180
+
viewBox="0 0 16 16"
181
+
>
182
+
<path
183
+
fill="currentColor"
184
+
d="M11.8 1c-1.682 0-3.129 1.368-3.799 2.797C7.33 2.368 5.883 1 4.201 1a4.2 4.2 0 0 0-4.2 4.2c0 4.716 4.758 5.953 8 10.616c3.065-4.634 8-6.05 8-10.616c0-2.319-1.882-4.2-4.2-4.2z"
185
+
/>
186
+
</svg>
187
+
</Link>
188
+
<Text>
189
+
source on{" "}
190
+
<Link
191
+
target="_blank"
192
+
rel="noopener noreferrer"
193
+
href="https://tangled.org/did:plc:dfl62fgb7wtjj3fcbb72naae/trill"
194
+
>
195
+
tangled
196
+
</Link>
197
+
</Text>
198
+
</HStack>
199
+
</Card.Description>
200
+
</Card.Header>
201
+
</Card.Root>
202
+
</VStack>
151
203
<Toaster />
152
-
</Box>
204
+
</>
153
205
);
154
206
};
155
207
export default App;