The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
use new chip and notice components
+29
-70
+8
-6
app/(home)/bot/pronouns/page.tsx
+8
-6
app/(home)/bot/pronouns/page.tsx
···
3
3
import Link from "next/link";
4
4
import { HiCash, HiPlus } from "react-icons/hi";
5
5
6
-
import Badge from "@/components/badge";
7
6
import Box from "@/components/box";
8
7
import DiscordMessage from "@/components/discord/message";
9
8
import { ServerButton } from "@/components/server-button";
10
9
import cn from "@/utils/cn";
10
+
import { Chip } from "@nextui-org/react";
11
11
12
12
const montserrat = Montserrat({ subsets: ["latin"] });
13
13
···
45
45
46
46
<Box className="flex flex-col md:flex-row gap-10 items-center">
47
47
<div className="md:w-1/2">
48
-
<Badge
49
-
before={<HiCash />}
50
-
text="100% free forever"
51
-
classname="mr-auto ml-0 mb-4"
52
-
/>
48
+
<Chip
49
+
color="secondary"
50
+
variant="flat"
51
+
startContent={<HiCash className="mx-1" />}
52
+
>
53
+
<span className="font-semibold">Everything for free</span>
54
+
</Chip>
53
55
<h3 className={styles.h3}>Sexualities, Genders & Pronouns</h3>
54
56
<div className="pt-6">
55
57
Let your community describe themself with a wide variety of supported Pronouns, Sexualities and Genders.
+14
-5
app/(home)/pro/page.tsx
+14
-5
app/(home)/pro/page.tsx
···
1
-
import { Button } from "@nextui-org/react";
1
+
import { Button, Chip } from "@nextui-org/react";
2
2
import { Metadata } from "next";
3
3
import { Montserrat, Patrick_Hand } from "next/font/google";
4
4
import Link from "next/link";
···
6
6
import { HiChevronRight, HiLightningBolt, HiOutlineCheck, HiX } from "react-icons/hi";
7
7
import { IoMdInfinite } from "react-icons/io";
8
8
9
-
import Badge from "@/components/badge";
10
9
import ImageGrid from "@/components/image-grid";
11
10
import ImageReduceMotion from "@/components/image-reduce-motion";
12
11
import { ApiV1TopguildsGetResponse } from "@/typings";
···
94
93
<span className="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent break-keep hidden md:block">Professional</span>
95
94
</h1>
96
95
<HiLightningBolt className="text-pink-400 rotate-6" />
97
-
<Badge text="Not available" />
96
+
<Chip
97
+
color="secondary"
98
+
variant="flat"
99
+
>
100
+
<span className="font-semibold">Not available</span>
101
+
</Chip>
98
102
</div>
99
103
100
104
{topGuilds &&
···
167
171
<ImageReduceMotion url="/luna" size={64} alt="mwlica's profile picture" className="w-12 h-12 rounded-full" />
168
172
<div>
169
173
<div className="flex items-center gap-2">
170
-
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800">@mwlica</span> <Badge text="Developer" />
174
+
<span className="text-xl font-medium dark:text-neutral-200 text-neutral-800">@mwlica</span>
171
175
</div>
172
176
<span className="dark:text-neutral-300 text-neutral-700">Cute femboy</span>
173
177
</div>
···
183
187
184
188
<div className="flex gap-2 items-center">
185
189
<span className="dark:text-neutral-200 text-neutral-800 font-medium text-sm">Upgrade your guilds further!</span>
186
-
<Badge text="Not available" />
190
+
<Chip
191
+
color="secondary"
192
+
variant="flat"
193
+
>
194
+
<span className="font-semibold">Not available</span>
195
+
</Chip>
187
196
</div>
188
197
189
198
<button className="flex dark:text-violet-400 text-violet-600 bg-violet-600/30 hover:bg-violet-600/10 py-2 px-4 rounded-md duration-200 justify-center gap-2 w-full opacity-30 cursor-not-allowed" disabled>
+2
-2
app/dashboard/[guildId]/greeting/bye/page.tsx
+2
-2
app/dashboard/[guildId]/greeting/bye/page.tsx
···
10
10
import { userStore } from "@/common/user";
11
11
import { webStore } from "@/common/webstore";
12
12
import MessageCreatorEmbed from "@/components/embed-creator";
13
-
import ErrorBanner from "@/components/Error";
14
13
import ImageUrlInput from "@/components/inputs/ImageUrlInput";
15
14
import NumberInput from "@/components/inputs/NumberInput";
16
15
import SelectMenu from "@/components/inputs/SelectMenu";
17
16
import Switch from "@/components/inputs/Switch";
17
+
import Notice from "@/components/notice";
18
18
import { ApiV1GuildsModulesByeGetResponse, RouteErrorResponse } from "@/typings";
19
19
20
20
export default function Home() {
···
62
62
<Link href={`/dashboard/${guild?.id}/greeting`} className="button-underline relative bottom-3 mb-4">
63
63
<HiArrowNarrowLeft /> Greetings
64
64
</Link>
65
-
{error && <ErrorBanner message={error} />}
65
+
{error && <Notice message={error} />}
66
66
</div>
67
67
);
68
68
+3
-3
app/dashboard/[guildId]/greeting/passport/page.tsx
+3
-3
app/dashboard/[guildId]/greeting/passport/page.tsx
···
7
7
8
8
import { guildStore } from "@/common/guilds";
9
9
import { CopyToClipboardButton } from "@/components/copy-to-clipboard";
10
-
import ErrorBanner from "@/components/Error";
11
10
import SelectInput from "@/components/inputs/SelectMenu";
12
11
import Switch from "@/components/inputs/Switch";
13
12
import Modal from "@/components/modal";
14
13
import OverviewLinkComponent from "@/components/OverviewLinkComponent";
15
14
import { ApiV1GuildsModulesPassportGetResponse, RouteErrorResponse } from "@/typings";
16
15
import { getCanonicalUrl } from "@/utils/urls";
16
+
import Notice from "@/components/notice";
17
17
18
18
export default function Home() {
19
19
const guild = guildStore((g) => g);
···
64
64
<Link href={`/dashboard/${guild?.id}/greeting`} className="button-underline relative bottom-3 mb-4">
65
65
<HiArrowNarrowLeft /> Greetings
66
66
</Link>
67
-
{error && <ErrorBanner message={error} />}
67
+
{error && <Notice message={error} />}
68
68
</div>
69
69
);
70
70
···
77
77
78
78
{passport.enabled && passport.punishment === 2 && !passport.punishmentRoleId && !modal &&
79
79
<div className="mt-6">
80
-
<ErrorBanner type="info" message="When using 'Assign role to member', a punishment role must be set." removeButton />
80
+
<Notice message="When using 'Assign role to member', a punishment role must be set." />
81
81
</div>
82
82
}
83
83
+2
-2
app/dashboard/[guildId]/greeting/welcome/page.tsx
+2
-2
app/dashboard/[guildId]/greeting/welcome/page.tsx
···
10
10
import { userStore } from "@/common/user";
11
11
import { webStore } from "@/common/webstore";
12
12
import MessageCreatorEmbed from "@/components/embed-creator";
13
-
import ErrorBanner from "@/components/Error";
14
13
import ImageUrlInput from "@/components/inputs/ImageUrlInput";
15
14
import MultiSelectMenu from "@/components/inputs/MultiSelectMenu";
16
15
import NumberInput from "@/components/inputs/NumberInput";
17
16
import SelectMenu from "@/components/inputs/SelectMenu";
18
17
import Switch from "@/components/inputs/Switch";
18
+
import Notice from "@/components/notice";
19
19
import { ApiV1GuildsModulesWelcomeGetResponse, RouteErrorResponse } from "@/typings";
20
20
21
21
export default function Home() {
···
63
63
<Link href={`/dashboard/${guild?.id}/greeting`} className="button-underline relative bottom-3 mb-4">
64
64
<HiArrowNarrowLeft /> Greetings
65
65
</Link>
66
-
{error && <ErrorBanner message={error} />}
66
+
{error && <Notice message={error} />}
67
67
</div>
68
68
);
69
69
-32
components/Error.tsx
-32
components/Error.tsx
···
1
-
import Link from "next/link";
2
-
import { FunctionComponent } from "react";
3
-
import { BsDiscord } from "react-icons/bs";
4
-
import { HiExclamationCircle } from "react-icons/hi";
5
-
6
-
interface Props {
7
-
message: string;
8
-
removeButton?: boolean;
9
-
type?: "error" | "info"
10
-
}
11
-
12
-
/**
13
-
* @deprecated
14
-
*/
15
-
const ErrorBanner: FunctionComponent<Props> = ({ message, removeButton, type }) => {
16
-
return (
17
-
<span className={`w-full text-neutral-100 ${type === "info" ? "bg-blue-400/40" : "bg-red-400/40"} py-2 px-4 mb-6 rounded-md flex gap-2 items-center`}>
18
-
<HiExclamationCircle style={{ height: 20, width: 20 }} />
19
-
<div className="text-lg">{message}</div>
20
-
21
-
{!removeButton &&
22
-
<Link href="/support" className={`ml-auto flex ${type === "info" ? "bg-blue-400/50 hover:bg-blue-400" : "bg-red-400/50 hover:bg-red-400"} hover:text-white py-2 px-4 rounded-md duration-200`}>
23
-
<BsDiscord className="relative top-1" />
24
-
<span className="ml-2">Support</span>
25
-
</Link>
26
-
}
27
-
28
-
</span>
29
-
);
30
-
};
31
-
32
-
export default ErrorBanner;
-20
components/badge.tsx
-20
components/badge.tsx
···
1
-
import { FunctionComponent } from "react";
2
-
3
-
import cn from "@/utils/cn";
4
-
5
-
interface Props {
6
-
before?: React.ReactNode;
7
-
text: string;
8
-
classname?: string;
9
-
}
10
-
11
-
const Badge: FunctionComponent<Props> = ({ before, text, classname }) => {
12
-
return (
13
-
<span className={cn("max-w-fit flex gap-2 items-center whitespace-nowrap rounded-full dark:bg-violet-400/40 bg-violet-600/40 px-[0.7em] pb-[0.25em] pt-[0.35em] text-center text-[0.75em] font-medium leading-none dark:text-violet-300 text-violet-700/60 ml-auto", classname)}>
14
-
{before}
15
-
{text}
16
-
</span>
17
-
);
18
-
};
19
-
20
-
export default Badge;