The weeb for the next gen discord boat - Wamellow wamellow.com
bot discord
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

prettier notices

Luna 1de43869 36ac2183

+88 -35
+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
··· 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
··· 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 };