+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 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 278 + </div> 279 279 + 280 280 + </div> 281 281 + 282 282 + <div className="flex flex-col-reverse md:flex-row gap-8 items-center"> 283 283 + 284 284 + <div className="md:ml-auto w-full md:w-1/2 px-3 pb-3"> 285 285 + <DiscordMessage 286 286 + mode={"DARK"} 287 287 + user={{ 288 288 + username: "Wamellow", 289 289 + avatar: "/waya-legacy1.png", 290 290 + bot: true 291 291 + }} 292 292 + > 293 293 + <Highlight mode={"DARK"} text="[Change default voice & fileformat](/profile/text-to-speech)" /> 294 294 + 295 295 + <DiscordMessageFile 296 296 + mode={"DARK"} 297 297 + 298 298 + duration={18} 299 299 + /> 300 300 + 301 301 + </DiscordMessage> 302 302 + </div> 303 303 + 304 304 + <div className="md:w-1/2"> 305 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 306 + <div className="text-lg pt-6"> 307 307 + With Text to Speech, you{"'"}re in control of transforming text into captivating speech across various languages and over 40 distinct voices. 308 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 309 + Embrace the power of VoiceWave and let your messages resonate with impact! 310 310 + </div> 311 311 + 312 312 + <div className="flex gap-2 mt-4"> 313 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 314 + <HiPlus /> 315 315 + <span className="block sm:hidden">Wamellow</span> 316 316 + <span className="hidden sm:block">Invite Wamellow</span> 317 317 + </Link> 318 318 + </div> 319 319 + 277 320 </div> 278 321 279 322 </div>

+42

components/discord/MessageFile.tsx

··· 1 1 + import { Fira_Code } from "next/font/google"; 2 2 + import React, { FunctionComponent } from "react"; 3 3 + import { BsFillPlayFill } from "react-icons/bs"; 4 4 + import { HiVolumeUp } from "react-icons/hi"; 5 5 + 6 6 + const firacode = Fira_Code({ subsets: ["latin"] }); 7 7 + 8 8 + interface Props { 9 9 + mode: "DARK" | "LIGHT"; 10 10 + 11 11 + duration: number; 12 12 + } 13 13 + 14 14 + const DiscordMessageFile: FunctionComponent<Props> = ({ duration, mode }) => { 15 15 + return ( 16 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 17 + 18 18 + <div className="flex gap-2 w-full max-w-full items-center"> 19 19 + <svg width={24 * 1.2} height={40 * 1.2}> 20 20 + <image xlinkHref="/voicefile.svg" width={24 * 1.2} height={40 * 1.2} /> 21 21 + </svg> 22 22 + 23 23 + <div className="flex flex-col"> 24 24 + <span className="text-blue-500 font-medium cursor-pointer hover:underline">hello_world.mp3</span> 25 25 + <span className="text-xs text-neutral-500">420.69 KB</span> 26 26 + </div> 27 27 + </div> 28 28 + 29 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 30 + <BsFillPlayFill className="h-7 w-7 cursor-pointer hover:text-neutral-300" /> 31 31 + <span className="text-neutral-300">00:{duration / 3}/00:{duration}</span> 32 32 + <div className="bg-neutral-500 h-2 w-full rounded-full overflow-hidden cursor-pointer"> 33 33 + <div className="bg-blue-700/75 h-full w-1/3 rounded-full" /> 34 34 + </div> 35 35 + <HiVolumeUp className="h-7 w-7 cursor-pointer hover:text-neutral-300" /> 36 36 + </div> 37 37 + 38 38 + </div> 39 39 + ); 40 40 + }; 41 41 + 42 42 + export default DiscordMessageFile;

+1

public/voicefile.svg

··· 1 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>