The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
prettier notices
+88
-35
+6
-7
app/docs/[...pathname]/page.tsx
+6
-7
app/docs/[...pathname]/page.tsx
···
1
-
import { Code } from "@nextui-org/react";
2
1
import { readFile } from "fs/promises";
3
2
4
3
import { Faq } from "@/app/(home)/faq.component";
5
4
import BeautifyMarkdown from "@/components/markdown";
6
5
import Notice, { NoticeType } from "@/components/notice";
7
6
import { ScreenMessage } from "@/components/screen-message";
7
+
import { Badge } from "@/components/ui/badge";
8
8
import metadata from "@/public/docs/meta.json";
9
9
10
10
interface Props {
···
36
36
{meta?.permissions?.bot &&
37
37
<Notice
38
38
type={NoticeType.Info}
39
-
message="Wamellow requries permission:"
40
-
location="bottom"
39
+
message="Wamellow requires permissions"
41
40
>
42
41
<div className="flex flex-wrap gap-1">
43
42
{meta.permissions.bot.map((perm) => (
44
-
<Code
43
+
<Badge
45
44
key={perm}
46
-
className="font-semibold text-violet-400"
47
-
color="secondary"
45
+
className="-my-1"
46
+
variant="flat"
48
47
>
49
48
{perm}
50
-
</Code>
49
+
</Badge>
51
50
))}
52
51
</div>
53
52
</Notice>
+24
-28
components/notice.tsx
+24
-28
components/notice.tsx
···
1
+
import { cn } from "@nextui-org/react";
1
2
import { HiExclamation, HiExclamationCircle } from "react-icons/hi";
2
3
3
-
import { cn } from "@/utils/cn";
4
+
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
4
5
5
6
export enum NoticeType {
6
-
Error = "error",
7
-
Info = "info"
7
+
Info = 0,
8
+
Error = 1
8
9
}
9
10
10
11
interface Props {
11
-
className?: string;
12
+
icon?: React.ReactNode;
12
13
message: string;
13
-
type?: NoticeType;
14
+
type?: NoticeType | typeof NoticeType;
14
15
location?: "side" | "bottom";
15
16
children?: React.ReactNode;
16
17
}
17
18
18
19
export default function Notice({
19
-
className,
20
+
icon,
20
21
message,
21
-
type,
22
+
type = NoticeType.Info,
22
23
location = "side",
23
24
children
24
25
}: Props) {
25
26
26
27
return (
27
-
<div
28
-
className={cn(
29
-
"w-full text-neutral-100 py-2 px-4 mb-6 rounded-md flex gap-2",
30
-
location === "side" ? "flex-row items-center" : "flex-col",
31
-
type === NoticeType.Info ? "bg-violet-400/40" : "bg-red-400/40",
32
-
className
33
-
)}
28
+
<Alert
29
+
variant={type === NoticeType.Info ? "secondary" : "destructive"}
30
+
className={cn("mb-4", location === "side" && "flex justify-between")}
34
31
>
35
-
<div className="flex items-center gap-2">
36
-
{type === NoticeType.Info
37
-
? <HiExclamationCircle className="size-4" />
38
-
: <HiExclamation className="size-4" />
39
-
}
40
-
<div className="text-medium">
41
-
{message}
42
-
</div>
43
-
</div>
32
+
{icon || (type === NoticeType.Info
33
+
? <HiExclamationCircle className="size-4" />
34
+
: <HiExclamation className="size-4" />
35
+
)}
44
36
45
-
{children &&
46
-
<div className={cn(location === "side" && "ml-auto")}>
37
+
<AlertTitle className={cn(location !== "bottom" && "mb-0")}>
38
+
{message}
39
+
</AlertTitle>
40
+
41
+
{children && (
42
+
<AlertDescription>
47
43
{children}
48
-
</div>
49
-
}
50
-
</div>
44
+
</AlertDescription>
45
+
)}
46
+
</Alert>
51
47
);
52
48
}
+58
components/ui/alert.tsx
+58
components/ui/alert.tsx
···
1
+
import { cva, type VariantProps } from "class-variance-authority";
2
+
import * as React from "react";
3
+
4
+
import { cn } from "@/utils/cn";
5
+
6
+
const alertVariants = cva(
7
+
"relative w-full rounded-lg p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-2px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-[17px] [&>svg]:text-foreground",
8
+
{
9
+
variants: {
10
+
variant: {
11
+
secondary: "bg-secondary/60 text-secondary-foreground",
12
+
destructive: "bg-destructive/60 text-destructive-foreground"
13
+
}
14
+
},
15
+
defaultVariants: {
16
+
variant: "secondary"
17
+
}
18
+
}
19
+
);
20
+
21
+
const Alert = React.forwardRef<
22
+
HTMLDivElement,
23
+
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
24
+
>(({ className, variant, ...props }, ref) => (
25
+
<div
26
+
ref={ref}
27
+
role="alert"
28
+
className={cn(alertVariants({ variant }), className)}
29
+
{...props}
30
+
/>
31
+
));
32
+
Alert.displayName = "Alert";
33
+
34
+
const AlertTitle = React.forwardRef<
35
+
HTMLParagraphElement,
36
+
React.HTMLAttributes<HTMLHeadingElement>
37
+
>(({ className, ...props }, ref) => (
38
+
<h5
39
+
ref={ref}
40
+
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
41
+
{...props}
42
+
/>
43
+
));
44
+
AlertTitle.displayName = "AlertTitle";
45
+
46
+
const AlertDescription = React.forwardRef<
47
+
HTMLParagraphElement,
48
+
React.HTMLAttributes<HTMLParagraphElement>
49
+
>(({ className, ...props }, ref) => (
50
+
<div
51
+
ref={ref}
52
+
className={cn("text-sm [&_p]:leading-relaxed", className)}
53
+
{...props}
54
+
/>
55
+
));
56
+
AlertDescription.displayName = "AlertDescription";
57
+
58
+
export { Alert, AlertDescription, AlertTitle };