The weeb for the next gen discord boat - Wamellow
wamellow.com
shi.gg
bot
discord
1import TopggIcon from "@/components/icons/topgg";
2import { getUser } from "@/lib/discord/user";
3import BlahajPic from "@/public/blahaj.webp";
4import { cn } from "@/utils/cn";
5import Image from "next/image";
6import Link from "next/link";
7import type { HTMLProps } from "react";
8import { BiCopyright, BiLogoGithub, BiLogoGmail, BiLogoReddit, BiLogoYoutube } from "react-icons/bi";
9import { BsDiscord } from "react-icons/bs";
10import { FaBluesky } from "react-icons/fa6";
11import { HiBookOpen, HiCloud, HiCube, HiGlobe, HiHand, HiLibrary, HiUserAdd } from "react-icons/hi";
12import { SiDiscord, SiKofi } from "react-icons/si";
13
14import { Badge } from "./ui/badge";
15
16export async function Footer(props: HTMLProps<HTMLDivElement>) {
17
18 // do not change
19 const dev = await getUser("821472922140803112");
20
21 return (
22 <div
23 className={cn("text-primary/75 w-full mt-10 text-left", props.className)}
24 {...props}
25 >
26
27 <div className="flex items-center gap-1 font-semibold">
28 <BsDiscord className="relative top-px text-[#f8746e]" />
29 <span className="text-xl bg-linear-to-r from-red-400 to-yellow-400 bg-clip-text text-transparent">Wamellow</span>
30 <span className="text-xl bg-linear-to-r from-yellow-400 to-blue-400 bg-clip-text text-transparent">for</span>
31 <span className="text-xl bg-linear-to-r from-blue-400 to-violet-400 bg-clip-text text-transparent">Discord</span>
32 </div>
33
34 <div className="flex flex-col md:flex-row gap-6 md:gap-2 justify-between">
35 <div>
36 <div className="mb-3">
37 <span className="flex gap-1 items-center">
38 <BiCopyright />
39 <span>
40 <Link href="/" className="hover:underline">Wamellow {new Date(1_635_609_600_000).getFullYear()} - {new Date().getFullYear()}</Link>,
41 not affiliated with Discord Inc.
42 </span>
43 </span>
44 <span className="flex gap-1 items-center">
45 <HiCube />
46 <span className="flex items-center">
47 Made by
48 <Link href="/team">
49 <Badge
50 className="relative top-[3px] ml-0.5"
51 radius="rounded"
52 >
53 <Image
54 src={dev?.avatarUrl || "/discord.webp"}
55 alt="avatar"
56 width={18}
57 height={18}
58 className="rounded-full relative right-1.5 px-px"
59 />
60 {dev?.username}
61 </Badge>
62 </Link>
63 </span>
64 </span>
65 </div>
66
67 <Socials />
68 </div>
69
70 <Links />
71 </div>
72
73 <Link
74 className="w-full flex justify-center mt-20 mb-4 hover:rotate-2 duration-500"
75 href="https://blahaj.4k.pics"
76 target="_blank"
77 >
78 <Image
79 alt="Blahaj"
80 src={BlahajPic}
81 height={Math.round(775 / 2)}
82 width={1_500 / 2}
83 />
84 </Link>
85 </div>
86 );
87}
88
89function Socials() {
90 return (
91 <div className="ml-auto svg-max flex flex-wrap items-center gap-2 mt-2 md:mt-0">
92 <Link href="https://discord.com/discovery/applications/1125449347451068437" className="text-white/75 hover:text-white duration-200 size-5" aria-label="Wamellow in the Discord Bot Directory">
93 <SiDiscord />
94 </Link>
95 <Link href="https://youtube.com/@wamellow" className="text-white/75 hover:text-white duration-200 size-6" aria-label="Wamellow on YouTube">
96 <BiLogoYoutube />
97 </Link>
98 <Link href="https://bsky.app/profile/shi.gg" className="text-white/75 hover:text-white duration-200 size-6" aria-label="Wamellow on Twitter (X.com)">
99 <FaBluesky className="p-0.5" />
100 </Link>
101 <Link href="https://github.com/Luna-devv" className="text-white/75 hover:text-white duration-200 size-6" aria-label="Wamellow's developers on GitHub">
102 <BiLogoGithub />
103 </Link>
104 <Link href="https://reddit.com/r/wamellow" className="text-white/75 hover:text-white duration-200 size-6" aria-label="Wamellow on Reddit">
105 <BiLogoReddit />
106 </Link>
107 <Link href="mailto:support@wamellow.com" className="text-white/75 hover:text-white duration-200 size-6" aria-label="Contact Wamellow via email">
108 <BiLogoGmail />
109 </Link>
110 <Link href="https://ko-fi.com/mwlica" className="text-white/75 hover:text-white duration-200 h-[22px] w-[22px]" aria-label="Support Wamellow's developers monetarily on Kofi">
111 <SiKofi />
112 </Link>
113 <Link href="/vote" className="text-[#ff3366] duration-200 size-6" aria-label="Vote for Wamellow on top.gg">
114 <TopggIcon />
115 </Link>
116 </div>
117 );
118}
119
120function Links() {
121 return (
122 <div className="flex gap-12 dark:text-neutral-400 text-neutral-600 select-none">
123 <div>
124 <div className="font-medium dark:text-neutral-200 text-neutral-800 mb-1">Legal blah blah</div>
125 <Link
126 className="text-primary/75 hover:text-primary/65 duration-200 flex items-center gap-2"
127 href="/terms"
128 >
129 <HiLibrary />
130 Terms of Service
131 </Link>
132 <Link
133 className="text-primary/75 hover:text-primary/65 duration-200 flex items-center gap-2"
134 href="/privacy"
135 >
136 <HiHand />
137 Privacy Policy
138 </Link>
139 <Link
140 className="text-primary/75 hover:text-primary/65 duration-200 flex items-center gap-2"
141 href="/impressum"
142 >
143 <HiGlobe />
144 Impressum
145 </Link>
146 </div>
147 <div>
148 <div className="font-medium dark:text-neutral-200 text-neutral-800 mb-1">Links</div>
149 <Link
150 className="text-primary/75 hover:text-primary/65 duration-200 flex items-center gap-2"
151 href="/support"
152 >
153 <BsDiscord />
154 Support
155 </Link>
156 <Link
157 className="text-primary/75 hover:text-primary/65 duration-200 flex items-center gap-2"
158 href="/docs/index"
159 >
160 <HiBookOpen />
161 Documentation
162 </Link>
163 <Link
164 className="text-primary/75 hover:text-primary/65 duration-200 flex items-center gap-2"
165 href="/status"
166 >
167 <HiCloud />
168 Status
169 </Link>
170 <Link
171 className="text-primary/75 hover:text-primary/65 duration-200 flex items-center gap-2"
172 href="/login?invite=true"
173 prefetch={false}
174 >
175 <HiUserAdd />
176 Invite
177 </Link>
178 </div>
179 </div>
180 );
181}