The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
home add tts
+86
+43
app/(home)/page.tsx
+43
app/(home)/page.tsx
···
8
8
import Highlight from "@/components/discord/Markdown";
9
9
import DiscordMessage from "@/components/discord/Message";
10
10
import DiscordMessageEmbed from "@/components/discord/MessageEmbed";
11
+
import DiscordMessageFile from "@/components/discord/MessageFile";
11
12
import { ListTab } from "@/components/List";
12
13
import { ApiV1StatisticsGetResponse, ApiV1TopguildsGetResponse } from "@/typings";
13
14
import { truncate } from "@/utils/truncate";
···
274
275
275
276
276
277
</DiscordMessage>
278
+
</div>
279
+
280
+
</div>
281
+
282
+
<div className="flex flex-col-reverse md:flex-row gap-8 items-center">
283
+
284
+
<div className="md:ml-auto w-full md:w-1/2 px-3 pb-3">
285
+
<DiscordMessage
286
+
mode={"DARK"}
287
+
user={{
288
+
username: "Wamellow",
289
+
avatar: "/waya-legacy1.png",
290
+
bot: true
291
+
}}
292
+
>
293
+
<Highlight mode={"DARK"} text="[Change default voice & fileformat](/profile/text-to-speech)" />
294
+
295
+
<DiscordMessageFile
296
+
mode={"DARK"}
297
+
298
+
duration={18}
299
+
/>
300
+
301
+
</DiscordMessage>
302
+
</div>
303
+
304
+
<div className="md:w-1/2">
305
+
<h2 className={`${montserrat.className} lg:text-4xl text-3xl dark:text-neutral-100 text-neutral-900 font-semibold underline decoration-violet-400`}>Best Text to Speech, TTS</h2>
306
+
<div className="text-lg pt-6">
307
+
With Text to Speech, you{"'"}re in control of transforming text into captivating speech across various languages and over 40 distinct voices.
308
+
Whether you need standalone audio files or want to bring your text to life in a voice chat, Wamellow{"'"}s TTS offers versatility.
309
+
Embrace the power of VoiceWave and let your messages resonate with impact!
310
+
</div>
311
+
312
+
<div className="flex gap-2 mt-4">
313
+
<Link href="/login?invite=true" className="flex text-neutral-200 bg-violet-600 hover:bg-violet-600/80 py-2 px-4 rounded-md duration-200 justify-center gap-2 items-center">
314
+
<HiPlus />
315
+
<span className="block sm:hidden">Wamellow</span>
316
+
<span className="hidden sm:block">Invite Wamellow</span>
317
+
</Link>
318
+
</div>
319
+
277
320
</div>
278
321
279
322
</div>
+42
components/discord/MessageFile.tsx
+42
components/discord/MessageFile.tsx
···
1
+
import { Fira_Code } from "next/font/google";
2
+
import React, { FunctionComponent } from "react";
3
+
import { BsFillPlayFill } from "react-icons/bs";
4
+
import { HiVolumeUp } from "react-icons/hi";
5
+
6
+
const firacode = Fira_Code({ subsets: ["latin"] });
7
+
8
+
interface Props {
9
+
mode: "DARK" | "LIGHT";
10
+
11
+
duration: number;
12
+
}
13
+
14
+
const DiscordMessageFile: FunctionComponent<Props> = ({ duration, mode }) => {
15
+
return (
16
+
<div className={`w-full ${mode === "DARK" ? "text-neutral-200" : "text-neutral-800"} font-light p-3 rounded mt-2`} style={{ backgroundColor: mode === "DARK" ? "rgb(43, 45, 49)" : "rgb(242, 243, 245)" }}>
17
+
18
+
<div className="flex gap-2 w-full max-w-full items-center">
19
+
<svg width={24 * 1.2} height={40 * 1.2}>
20
+
<image xlinkHref="/voicefile.svg" width={24 * 1.2} height={40 * 1.2} />
21
+
</svg>
22
+
23
+
<div className="flex flex-col">
24
+
<span className="text-blue-500 font-medium cursor-pointer hover:underline">hello_world.mp3</span>
25
+
<span className="text-xs text-neutral-500">420.69 KB</span>
26
+
</div>
27
+
</div>
28
+
29
+
<div className={`${firacode.className} font-medium text-sm bg-neutral-900 text-neutral-400 w-full flex gap-2 py-1 px-2 items-center rounded-md mt-2`}>
30
+
<BsFillPlayFill className="h-7 w-7 cursor-pointer hover:text-neutral-300" />
31
+
<span className="text-neutral-300">00:{duration / 3}/00:{duration}</span>
32
+
<div className="bg-neutral-500 h-2 w-full rounded-full overflow-hidden cursor-pointer">
33
+
<div className="bg-blue-700/75 h-full w-1/3 rounded-full" />
34
+
</div>
35
+
<HiVolumeUp className="h-7 w-7 cursor-pointer hover:text-neutral-300" />
36
+
</div>
37
+
38
+
</div>
39
+
);
40
+
};
41
+
42
+
export default DiscordMessageFile;
+1
public/voicefile.svg
+1
public/voicefile.svg
···
1
+
<svg fill="none" height="96" viewBox="0 0 72 96" width="72" xmlns="http://www.w3.org/2000/svg"><script xmlns=""/><path d="m72 29.3v60.3c0 2.24 0 3.36-.44 4.22-.38.74-1 1.36-1.74 1.74-.86.44-1.98.44-4.22.44h-59.2c-2.24 0-3.36 0-4.22-.44-.74-.38-1.36-1-1.74-1.74-.44-.86-.44-1.98-.44-4.22v-83.2c0-2.24 0-3.36.44-4.22.38-.74 1-1.36 1.74-1.74.86-.44 1.98-.44 4.22-.44h36.3c1.96 0 2.94 0 3.86.22.5.12.98.28 1.44.5v16.88c0 2.24 0 3.36.44 4.22.38.74 1 1.36 1.74 1.74.86.44 1.98.44 4.22.44h16.88c.22.46.38.94.5 1.44.22.92.22 1.9.22 3.86z" fill="#d3d6fd"/><path d="m68.26 20.26c1.38 1.38 2.06 2.06 2.56 2.88.18.28.32.56.46.86h-16.88c-2.24 0-3.36 0-4.22-.44-.74-.38-1.36-1-1.74-1.74-.44-.86-.44-1.98-.44-4.22v-16.880029c.3.14.58.28.86.459999.82.5 1.5 1.18 2.88 2.56z" fill="#939bf9"/><path clip-rule="evenodd" d="m34.76 42.16c-.74-.3-1.6-.14-2.18.44l-8.58 9.4h-6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h6l8.58 9.42c.58.58 1.44.74 2.18.44.76-.32 1.24-1.06 1.24-1.86v-32c0-.8-.48-1.54-1.24-1.84zm5.24 3.84v4c5.52 0 10 4.48 10 10s-4.48 10-10 10v4c7.72 0 14-6.28 14-14s-6.28-14-14-14zm0 8c3.3 0 6 2.7 6 6s-2.7 6-6 6v-4c1.1 0 2-.9 2-2s-.9-2-2-2z" fill="#5865f2" fill-rule="evenodd"/><link xmlns=""/></svg>
