The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
create comment component
+91
-64
+15
-20
app/(home)/bot/pronouns/layout.tsx
+15
-20
app/(home)/bot/pronouns/layout.tsx
···
3
3
import Image from "next/image";
4
4
import Link from "next/link";
5
5
import { BsDiscord } from "react-icons/bs";
6
-
import { HiChevronRight, HiHome, HiUserAdd } from "react-icons/hi";
6
+
import { HiHome, HiUserAdd } from "react-icons/hi";
7
7
8
+
import Comment from "@/components/comment";
8
9
import ImageGrid from "@/components/image-grid";
9
-
import ImageReduceMotion from "@/components/image-reduce-motion";
10
10
import { ServerButton } from "@/components/server-button";
11
+
import { defaultFetchOptions } from "@/lib/api";
11
12
import ArrowPic from "@/public/arroww.webp";
12
13
import { ApiV1TopguildsGetResponse } from "@/typings";
14
+
import cn from "@/utils/cn";
13
15
import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
14
16
15
17
const montserrat = Montserrat({ subsets: ["latin"] });
···
17
19
18
20
export const revalidate = 3600;
19
21
20
-
const fetchOptions = { headers: { Authorization: process.env.API_SECRET as string }, next: { revalidate: 60 * 60 } };
21
-
22
22
export const generateMetadata = (): Metadata => {
23
23
24
-
const title = "Pronouns: A safe discord bot";
24
+
const title = "Pronouns: Describe yourself in Discord";
25
25
const description = "Let your community describe themself with a wide variety of supported Pronouns, Sexualities and Genders.";
26
26
const url = getCanonicalUrl("bot", "pronouns");
27
27
···
53
53
}: {
54
54
children: React.ReactNode
55
55
}) {
56
-
const topGuilds = await fetch(`${process.env.NEXT_PUBLIC_API}/top-guilds`, fetchOptions).then((res) => res.json()) as ApiV1TopguildsGetResponse[];
56
+
const topGuilds = await fetch(`${process.env.NEXT_PUBLIC_API}/top-guilds`, defaultFetchOptions)
57
+
.then((res) => res.json())
58
+
.catch(() => null) as ApiV1TopguildsGetResponse[] | null;
57
59
58
60
return (
59
61
<div className="flex items-center flex-col w-full">
···
131
133
</div>
132
134
133
135
134
-
<span className={`lg:ml-auto flex gap-2 text-neutral-500 font-mediumr ${handwritten.className} mt-3 opacity-80 pl-20 lg:pr-20 rotate-2`}>
136
+
<span className={cn(handwritten.className, "lg:ml-auto flex gap-2 text-neutral-500 font-mediumr mt-3 opacity-80 pl-20 lg:pr-20 rotate-2")}>
135
137
<Image src={ArrowPic} width={24} height={24} alt="arrow up" className="h-5 w-5 relative top-px" draggable={false} />
136
138
Get started here in seconds
137
139
</span>
···
145
147
{children}
146
148
</div>
147
149
148
-
<div className="w-full mt-6">
149
-
<div className="flex gap-4 items-center mb-2">
150
-
<span className="flex items-center gap-2">
151
-
<ImageReduceMotion url="/discord" size={64} alt="users's profile picture" className="w-12 h-12 rounded-full" />
152
-
<div>
153
-
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800">@deleted user</span> <br />
154
-
<span className="dark:text-neutral-300 text-neutral-700">Pronouns user</span>
155
-
</div>
156
-
</span>
157
-
<HiChevronRight className="w-8 h-8" />
158
-
</div>
159
-
<span className={`${handwritten.className} text-2xl break-words`}>„{"I have a lot of friends who have different preferred pronouns and identities and I think it's super sweet y'all have the feature that they can change their pronouns anytime so I put your bot in my servers and a friend may put it in theirs too 🥰"}“</span>
160
-
</div>
150
+
<Comment
151
+
username="@deleted user"
152
+
bio="Pronouns user"
153
+
avatar="/discord.webp"
154
+
content="I have a lot of friends who have different preferred pronouns and identities and I think it's super sweet y'all have the feature that they can change their pronouns anytime so I put your bot in my servers and a friend may put it in theirs too 🥰"
155
+
/>
161
156
162
157
</div>
163
158
);
+5
-1
app/(home)/bot/pronouns/page.tsx
+5
-1
app/(home)/bot/pronouns/page.tsx
···
14
14
export default async function Home() {
15
15
16
16
const styles = {
17
-
h2: cn(montserrat.className, "lg:text-5xl text-4xl bg-gradient-to-b bg-clip-text text-transparent from-neutral-200 from-40% to-neutral-400 font-bold underline decoration-violet-400"),
17
+
h2: cn(montserrat.className, "lg:text-5xl text-4xl bg-gradient-to-b bg-clip-text text-transparent from-neutral-200 from-40% to-violet-300 font-bold underline decoration-violet-400"),
18
18
h3: cn(montserrat.className, "lg:text-2xl text-xl bg-gradient-to-b bg-clip-text text-transparent from-neutral-200 from-40% to-neutral-300 font-semibold")
19
19
};
20
20
···
46
46
<Box className="flex flex-col md:flex-row gap-10 items-center">
47
47
<div className="md:w-1/2">
48
48
<Chip
49
+
className="mb-2"
49
50
color="secondary"
50
51
variant="flat"
51
52
startContent={<HiCash className="mx-1" />}
52
53
>
53
54
<span className="font-semibold">Everything for free</span>
54
55
</Chip>
56
+
55
57
<h3 className={styles.h3}>Sexualities, Genders & Pronouns</h3>
58
+
56
59
<div className="pt-6">
57
60
Let your community describe themself with a wide variety of supported Pronouns, Sexualities and Genders.
58
61
This has become very important in recent years as more and more people finally feel safe to come out publicly as who they really are, and we think this is a great way to express this publicly online.
59
62
</div>
63
+
60
64
<div className="flex gap-2 mt-6">
61
65
<ServerButton
62
66
as={Link}
+5
-13
app/(home)/page.tsx
+5
-13
app/(home)/page.tsx
···
716
716
717
717
</article>
718
718
719
-
<div className="w-full my-6">
720
-
<div className="flex gap-4 items-center mb-2">
721
-
<span className="flex items-center gap-2">
722
-
<Image src={SpacePic} width={64} height={64} alt="users's profile picture" className="w-12 h-12 rounded-full" />
723
-
<div>
724
-
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800">Luna’s Grandpa {"<3"}</span> <br />
725
-
<span className="dark:text-neutral-300 text-neutral-700">likes feta and wine</span>
726
-
</div>
727
-
</span>
728
-
<HiChevronRight className="w-8 h-8" />
729
-
</div>
730
-
<span className={`${handwritten.className} text-2xl break-words`}>„{"FUCK EVERYTHING! EXCEPT LUNA, LUNA MUST BE PROTECTED AT ALL COSTS"}“</span>
731
-
</div>
732
719
733
720
<Box none className="p-5 pb-3 dark:bg-wamellow bg-wamellow-100 rounded-lg mt-4 w-full">
734
721
<div className="flex">
···
796
783
info: "https://discordlist.gg/user/821472922140803112"
797
784
}
798
785
]}
786
+
<Comment
787
+
username="Luna’s Grandpa <3"
788
+
bio="likes feta and wine"
789
+
avatar={SpacePic}
790
+
content="FUCK EVERYTHING! EXCEPT LUNA, LUNA MUST BE PROTECTED AT ALL COSTS"
799
791
/>
800
792
801
793
</div >
+19
-30
app/(home)/pro/page.tsx
+19
-30
app/(home)/pro/page.tsx
···
1
1
import { Button, Chip } from "@nextui-org/react";
2
2
import { Metadata } from "next";
3
-
import { Montserrat, Patrick_Hand } from "next/font/google";
3
+
import { Montserrat } from "next/font/google";
4
4
import Link from "next/link";
5
5
import { BsDiscord, BsQuestionLg } from "react-icons/bs";
6
-
import { HiChevronRight, HiLightningBolt, HiOutlineCheck, HiX } from "react-icons/hi";
6
+
import { HiLightningBolt, HiOutlineCheck, HiX } from "react-icons/hi";
7
7
import { IoMdInfinite } from "react-icons/io";
8
8
9
+
import Comment from "@/components/comment";
9
10
import ImageGrid from "@/components/image-grid";
10
-
import ImageReduceMotion from "@/components/image-reduce-motion";
11
11
import { ApiV1TopguildsGetResponse } from "@/typings";
12
12
import { getBaseUrl, getCanonicalUrl } from "@/utils/urls";
13
13
14
14
const maybe = null;
15
15
const montserrat = Montserrat({ subsets: ["latin"] });
16
-
const handwritten = Patrick_Hand({ subsets: ["latin"], weight: "400" });
17
16
18
17
export const revalidate = 3600;
19
18
···
94
93
</h1>
95
94
<HiLightningBolt className="text-pink-400 rotate-6" />
96
95
<Chip
96
+
className="ml-auto"
97
97
color="secondary"
98
98
variant="flat"
99
+
size="lg"
99
100
>
100
101
<span className="font-semibold">Not available</span>
101
102
</Chip>
···
162
163
</div>
163
164
164
165
<div className="w-full flex">
165
-
<Link href="/support" target="_blank" className="ml-auto mt-1 dark:text-violet-400/60 text-violet-600/60 hover:text-violet-400/80 dark:hover:text-violet-600/80 hover:underline duration-200 text-sm">Restore previous purchases</Link>
166
+
<Link
167
+
className="ml-auto mt-1 dark:text-violet-400/60 text-violet-600/60 hover:text-violet-400/80 dark:hover:text-violet-600/80 hover:underline duration-200 text-sm"
168
+
href="/support"
169
+
target="_blank"
170
+
>
171
+
Restore previous purchases
172
+
</Link>
166
173
</div>
167
174
168
-
<div className="w-full mt-6 md:flex gap-4 items-center">
169
-
<div className="flex gap-4 items-center">
170
-
<span className="flex items-center gap-2">
171
-
<ImageReduceMotion url="/luna" size={64} alt="mwlica's profile picture" className="w-12 h-12 rounded-full" />
172
-
<div>
173
-
<div className="flex items-center gap-2">
174
-
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800">@mwlica</span>
175
-
</div>
176
-
<span className="dark:text-neutral-300 text-neutral-700">Cute femboy</span>
177
-
</div>
178
-
</span>
179
-
<HiChevronRight className="w-8 h-8" />
180
-
</div>
181
-
<span className={`${handwritten.className} text-2xl break-words block md:hidden mt-2`}>„buy it, buy it, buy it, buy it, buy it“</span>
182
-
<span className={`${handwritten.className} text-2xl break-words hidden md:block`}>„buy it, buy it, buy it, buy it, buy it, buy it, buy it“</span>
183
-
</div>
175
+
<Comment
176
+
username="@mwlica"
177
+
avatar="/luna-small.webp"
178
+
bio="Cute femboy"
179
+
content="buy it, buy it, buy it, buy it, buy it, buy it"
180
+
/>
184
181
185
182
<div className="p-2 fixed z-10 bottom-0 left-0 w-full md:hidden">
186
183
<div className="dark:bg-wamellow-light bg-wamellow-100-light rounded-lg shadow-md w-full flex flex-col gap-2 items-center justify-center p-3">
···
205
202
206
203
</div>
207
204
);
208
-
}
209
-
210
-
/*
211
-
<div className="p-2 fixed z-10 bottom-0 left-0 w-full">
212
-
<div className="bg-wamellow-light rounded-lg shadow-md w-full flex gap-2 items-center justify-center p-3">
213
-
{buttons}
214
-
</div>
215
-
</div>
216
-
*/
205
+
}
+47
components/comment.tsx
+47
components/comment.tsx
···
1
+
import { Patrick_Hand } from "next/font/google";
2
+
import Image, { StaticImageData } from "next/image";
3
+
import { HiChevronRight } from "react-icons/hi";
4
+
5
+
const handwritten = Patrick_Hand({ subsets: ["latin"], weight: "400" });
6
+
7
+
interface Props {
8
+
username: string;
9
+
bio?: React.ReactNode;
10
+
avatar: string | StaticImageData;
11
+
content: string | React.ReactNode;
12
+
}
13
+
14
+
export default async function Comment({
15
+
username,
16
+
bio,
17
+
avatar,
18
+
content
19
+
}: Props) {
20
+
return (
21
+
<div className="w-full my-6">
22
+
<div className="flex gap-4 items-center mb-2">
23
+
<span className="flex items-center gap-2">
24
+
<Image
25
+
alt="users's profile picture"
26
+
className="w-12 h-12 rounded-full"
27
+
height={64}
28
+
src={avatar}
29
+
width={64}
30
+
/>
31
+
<div>
32
+
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800">
33
+
{username}
34
+
</span> <br />
35
+
<span className="dark:text-neutral-300 text-neutral-700">
36
+
{bio}
37
+
</span>
38
+
</div>
39
+
</span>
40
+
<HiChevronRight className="w-8 h-8" />
41
+
</div>
42
+
<span className={`${handwritten.className} text-2xl break-words`}>
43
+
„{content}“
44
+
</span>
45
+
</div>
46
+
);
47
+
}