feat(ui): support verified bots and colored authors (#9471)

Co-authored-by: Noel <buechler.noel@outlook.com>

apps/guide/src/content/01-home/03-how-to-contribute.mdx

@@ -136,6 +136,27 @@ Whenever some text does not need to be in the main body, you can put it here.
 	>
 		Interactions are supported! I definitely used a command.
 	</DiscordMessage>
+	<DiscordMessage
+		author={{
+			avatar: '/assets/discordjs.png',
+			bot: true,
+			color: 'text-red-500',
+			time: 'Today at 21:04',
+			username: 'Guide Bot',
+		}}
+		reply={{
+			author: {
+				avatar: '/assets/snek-bot.jpeg',
+				bot: true,
+				verified: true,
+				color: 'text-blue-500',
+				username: 'Snek Bot',
+			},
+			content: 'You can also have verified bots, like me!',
+		}}
+	>
+		Display colors are supported as well!
+	</DiscordMessage>
 </DiscordMessages>
 
 ## Code blocks

packages/ui/package.json

@@ -46,6 +46,7 @@
 	},
 	"homepage": "https://discord.js.org",
 	"dependencies": {
+		"@react-icons/all-files": "^4.1.0",
 		"ariakit": "^2.0.0-next.44",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"

packages/ui/src/lib/components/discord/MessageAuthor.tsx

@@ -1,11 +1,15 @@
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+
 export interface IDiscordMessageAuthor {
 	avatar: string;
 	bot?: boolean;
+	color?: string;
 	time: string;
 	username: string;
+	verified?: boolean;
 }
 
-export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMessageAuthor) {
+export function DiscordMessageAuthor({ avatar, bot, verified, color, time, username }: IDiscordMessageAuthor) {
 	return (
 		<>
 			<img
@@ -15,10 +19,12 @@ export function DiscordMessageAuthor({ avatar, username, bot, time }: IDiscordMe
 			/>
 			<h2 className="m-0 text-size-inherit font-medium leading-snug" id="user-info">
 				<span className="mr-1" id="username">
-					<span className="cursor-pointer text-base font-medium text-white hover:underline">{username}</span>
+					<span className={`cursor-pointer text-base font-medium hover:underline ${color ?? 'text-white'}`}>
+						{username}
+					</span>
 					{bot ? (
 						<span className="relative top-1 ml-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
-							BOT
+							{verified ? <FiCheck className="mr-1 inline-block" /> : null}BOT
 						</span>
 					) : null}
 				</span>

packages/ui/src/lib/components/discord/MessageAuthorReply.tsx

@@ -1,19 +1,23 @@
+import { FiCheck } from '@react-icons/all-files/fi/FiCheck';
+
 export interface IDiscordMessageAuthorReply {
 	avatar: string;
 	bot?: boolean;
+	color?: string;
 	username: string;
+	verified?: boolean;
 }
 
-export function DiscordMessageAuthorReply({ avatar, bot, username }: IDiscordMessageAuthorReply) {
+export function DiscordMessageAuthorReply({ avatar, bot, verified, color, username }: IDiscordMessageAuthorReply) {
 	return (
 		<>
 			<img alt={`${username}'s avatar`} className="mr-1 h-4 w-4 select-none rounded-full" src={avatar} />
 			{bot ? (
 				<div className="mr-1 rounded bg-blurple px-1 vertical-top text-xs text-white" id="bot">
-					BOT
+					{verified ? <FiCheck className="mr-1 inline-block" /> : null}BOT
 				</div>
 			) : null}
-			<span className="mr-1 cursor-pointer select-none text-sm font-medium leading-snug text-white hover:underline">
+			<span className={`mr-1 cursor-pointer select-none text-sm font-medium leading-snug ${color ?? 'text-white'}`}>
 				{username}
 			</span>
 		</>