The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
add voice channel tts on home
+106
-12
+30
-12
app/(home)/page.tsx
+30
-12
app/(home)/page.tsx
···
1
+
import { Code } from "@nextui-org/react";
1
2
import { Montserrat, Patrick_Hand } from "next/font/google";
2
3
import Image from "next/image";
3
4
import Link from "next/link";
4
5
import { BsDiscord } from "react-icons/bs";
5
-
import { HiArrowRight, HiBadgeCheck, HiCash, HiChevronRight, HiFingerPrint, HiFire, HiInformationCircle, HiUserAdd } from "react-icons/hi";
6
+
import { HiArrowRight, HiBadgeCheck, HiCash, HiChevronRight, HiFingerPrint, HiFire, HiHashtag, HiInformationCircle, HiUserAdd } from "react-icons/hi";
6
7
7
8
import Badge from "@/components/badge";
8
9
import Box from "@/components/box";
9
10
import { StatsBar } from "@/components/counter";
11
+
import DiscordChannelCategory from "@/components/discord/channel-category";
12
+
import DiscordChannelVoice from "@/components/discord/channel-voice";
10
13
import Highlight from "@/components/discord/markdown";
11
14
import DiscordMessage from "@/components/discord/message";
12
15
import DiscordMessageEmbed from "@/components/discord/message-embed";
13
-
import DiscordMessageFile from "@/components/discord/message-file";
16
+
import DiscordUser from "@/components/discord/user";
14
17
import ImageGrid from "@/components/image-grid";
15
18
import { ServerButton } from "@/components/server-button";
16
19
import AiPic from "@/public/ai.webp";
···
64
67
avatar: "/waya-v3-small.webp",
65
68
bot: true
66
69
}
67
-
};
70
+
} as const;
68
71
};
69
72
70
73
const Invite = () => (
···
185
188
<div>
186
189
<h2 className={styles.h2}>Next-Level text to speech, tts 🔊</h2>
187
190
<div className="my-8 max-w-md font-medium">
188
-
Embrace the power of VoiceWave and let your messages speak everywhere you want! <span className="text-sm relative top-1 italic opacity-75">(Chat GPT called it VoiceWave)</span>
191
+
Embrace the power of VoiceWave and let your messages speak everywhere you want! <span className="text-sm relative top-0.5 italic opacity-75">(Chat GPT called it VoiceWave)</span>
189
192
</div>
190
193
191
194
<Box className="flex flex-col md:flex-row-reverse gap-10 items-center">
···
197
200
/>
198
201
<h3 className={styles.h3}>40 Voices in 5 Languages</h3>
199
202
<div className="pt-6">
200
-
With Wamellow{"'"}s Text to Speech, you{"'"}re in control of transforming text into captivating speech across various languages and over 40 distinct voices.
201
-
Whether you need standalone audio files or want to bring your text to life in a voice chat. Our TTS supports up to 4,000 characters!
203
+
With Wamellow{"'"}s Text to Speech, you{"'"}re in control of transforming text into captivating speech.
204
+
You can either generate files using <Code>/tts file</Code>, talk in voice chats with <Code>/tts voice</Code> or setup a deticated channel!
202
205
</div>
203
206
<div className="flex gap-2 mt-6">
204
207
<Invite />
208
+
<ServerButton
209
+
as={Link}
210
+
className="bg-wamellow-light"
211
+
startContent={<HiHashtag />}
212
+
href="https://cdn.waya.one/ZBHWbG.mp4"
213
+
target="_blank"
214
+
>
215
+
Dedicated channel
216
+
</ServerButton>
205
217
</div>
206
218
</div>
207
219
208
-
<div className="w-full md:w-1/2 px-8 py-4 rounded-lg" style={{ backgroundColor: "rgb(43, 45, 49)" }}>
209
-
<DiscordMessage {...messageProps("tts file")}>
210
-
<DiscordMessageFile
211
-
mode={"DARK"}
212
-
duration={18}
213
-
/>
220
+
<div className="w-full md:w-1/2 px-8 py-4 rounded-lg flex gap-4 items-center" style={{ backgroundColor: "rgb(43, 45, 49)" }}>
221
+
<DiscordChannelCategory name="#/voice/dev/null">
222
+
<DiscordChannelVoice name="• Public">
223
+
<DiscordUser username="mwlica" avatar="/luna-small.webp" />
224
+
<DiscordUser username="Wamellow" avatar="/waya-v3-small.webp" isTalking />
225
+
</DiscordChannelVoice>
226
+
</DiscordChannelCategory>
227
+
228
+
<div className="dark:bg-wamellow-light bg-wamellow-100-light w-0.5 h-28 rounded-full ml-2" />
229
+
230
+
<DiscordMessage {...messageProps("tts voice")}>
231
+
<Highlight mode={"DARK"} text="Now talking..." />
214
232
</DiscordMessage>
215
233
</div>
216
234
</Box>
+21
components/discord/channel-category.tsx
+21
components/discord/channel-category.tsx
···
1
+
import React from "react";
2
+
import { HiChevronDown } from "react-icons/hi";
3
+
4
+
interface Props {
5
+
name: string;
6
+
children: React.ReactNode;
7
+
}
8
+
9
+
export default function DiscordChannelCategory({ name, children }: Props) {
10
+
return (
11
+
<div className="flex flex-col gap-2">
12
+
<span className="uppercase font-medium text-xs flex items-center gap-0.5 text-neutral-400/80 relative right-4">
13
+
<HiChevronDown />
14
+
{name}
15
+
</span>
16
+
<div className="flex flex-col gap-4">
17
+
{children}
18
+
</div>
19
+
</div>
20
+
);
21
+
}
+23
components/discord/channel-voice.tsx
+23
components/discord/channel-voice.tsx
···
1
+
import React from "react";
2
+
import { HiVolumeUp } from "react-icons/hi";
3
+
4
+
interface Props {
5
+
name: string;
6
+
children?: React.ReactNode;
7
+
}
8
+
9
+
export default function DiscordChannelVoice({ name, children }: Props) {
10
+
return (
11
+
<div className="text-medium text-neutral-400">
12
+
<span className="flex items-center gap-1">
13
+
<HiVolumeUp />
14
+
{name}
15
+
</span>
16
+
{children &&
17
+
<div className="ml-6 mt-2 flex flex-col gap-3">
18
+
{children}
19
+
</div>
20
+
}
21
+
</div>
22
+
);
23
+
}
+32
components/discord/user.tsx
+32
components/discord/user.tsx
···
1
+
import { Avatar } from "@nextui-org/react";
2
+
import React from "react";
3
+
import { HiCheck } from "react-icons/hi";
4
+
5
+
import cn from "@/utils/cn";
6
+
7
+
interface Props {
8
+
username: string;
9
+
avatar: string;
10
+
isBot?: boolean;
11
+
isTalking?: boolean
12
+
}
13
+
14
+
export default function DiscordUser({ username, avatar, isBot, isTalking }: Props) {
15
+
return (
16
+
<div className="flex items-center space-x-2">
17
+
<Avatar
18
+
className={cn("h-6 w-6", isTalking && "outline-1.5 outline-green-500")}
19
+
radius="full"
20
+
src={avatar}
21
+
/>
22
+
<div className="font-medium whitespace-nowrap overflow-hidden text-ellipsis" >
23
+
{username}
24
+
</div>
25
+
{isBot && <div className="text-xxs text-white bg-blurple rounded h-4 px-1 flex items-center">
26
+
<HiCheck />
27
+
<span className="ml-1">BOT</span>
28
+
</div>
29
+
}
30
+
</div>
31
+
);
32
+
}