From 496c4e2884d171e5e86979d0459d9e96a83fe2f9 Mon Sep 17 00:00:00 2001
From: Tetie <tjvssr@gmail.com>
Date: Sat, 29 Apr 2023 17:26:31 +0200
Subject: [PATCH] feat(ui): support verified bots and colored authors (#9471)

Co-authored-by: Noel <buechler.noel@outlook.com>
---
 apps/guide/public/assets/snek-bot.jpeg        | Bin 0 -> 9170 bytes
 .../content/01-home/03-how-to-contribute.mdx  |  21 ++++++++++++++++++
 packages/ui/package.json                      |   1 +
 .../lib/components/discord/MessageAuthor.tsx  |  12 +++++++---
 .../components/discord/MessageAuthorReply.tsx |  10 ++++++---
 5 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 apps/guide/public/assets/snek-bot.jpeg

diff --git a/apps/guide/public/assets/snek-bot.jpeg b/apps/guide/public/assets/snek-bot.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..59feb7835990664f65efd06a13cd2521b8e0b898
GIT binary patch
literal 9170
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

literal 0
HcmV?d00001

diff --git a/apps/guide/src/content/01-home/03-how-to-contribute.mdx b/apps/guide/src/content/01-home/03-how-to-contribute.mdx
index 281a6e084..f732c7d04 100644
--- a/apps/guide/src/content/01-home/03-how-to-contribute.mdx
+++ b/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
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 780050eab..99b3cce3d 100644
--- a/packages/ui/package.json
+++ b/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"
diff --git a/packages/ui/src/lib/components/discord/MessageAuthor.tsx b/packages/ui/src/lib/components/discord/MessageAuthor.tsx
index 482340f21..22f743c45 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthor.tsx
+++ b/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>
diff --git a/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx b/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
index 1b8de583d..0ac3564c8 100644
--- a/packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
+++ b/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>
 		</>