From f27631175a97b8a7620efedc24073fdb944cb728 Mon Sep 17 00:00:00 2001
From: Almeida <almeidx@pm.me>
Date: Sun, 30 Apr 2023 15:56:34 +0100
Subject: [PATCH] feat(ui): support embed image, thumbnail, author url, and url
 (#9478)

---
 .../discord/DiscordMessages.stories.tsx          | 11 ++++++++++-
 .../src/lib/components/discord/MessageEmbed.tsx  | 12 ++++++++++--
 .../components/discord/MessageEmbedAuthor.tsx    | 16 ++++++++++++++--
 .../lib/components/discord/MessageEmbedImage.tsx | 10 ++++++++++
 .../components/discord/MessageEmbedThumbnail.tsx |  8 ++++++++
 .../lib/components/discord/MessageEmbedTitle.tsx | 16 ++++++++++++++--
 6 files changed, 66 insertions(+), 7 deletions(-)
 create mode 100644 packages/ui/src/lib/components/discord/MessageEmbedImage.tsx
 create mode 100644 packages/ui/src/lib/components/discord/MessageEmbedThumbnail.tsx

diff --git a/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx b/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
index 7bd932541..f3d734c90 100644
--- a/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
+++ b/packages/ui/src/lib/components/discord/DiscordMessages.stories.tsx
@@ -57,13 +57,14 @@ export const Default = {
 						author={{
 							avatar: '/assets/discordjs.png',
 							username: 'Guide Bot',
+							url: 'https://discord.js.org',
 						}}
 						footer={{
 							content: 'Sometimes, titles just have to be.',
 							icon: '/assets/discordjs.png',
 							timestamp: 'Today at 21:02',
 						}}
-						title={{ title: 'An amazing title' }}
+						title={{ title: 'An amazing title', url: 'https://discord.js.org' }}
 					>
 						This is a description. You can put a description here. It must be descriptive!
 					</DiscordMessageEmbed>
@@ -73,6 +74,7 @@ export const Default = {
 							username: 'Guide Bot',
 						}}
 						footer={{ content: "When one amazing title just wasn't enough." }}
+						thumbnail={{ alt: 'discord.js logo', image: '/assets/discordjs.png' }}
 						title={{ title: 'Another amazing title' }}
 					>
 						Multiple embeds!
@@ -104,6 +106,13 @@ export const Default = {
 							},
 						]}
 						footer={{ timestamp: 'Today at 21:02' }}
+						image={{
+							alt: 'discord.js logo',
+							url: '/assets/discordjs.png',
+							width: 300,
+							height: 300,
+						}}
+						thumbnail={{ alt: 'discord.js logo', image: '/assets/discordjs.png' }}
 						title={{ title: 'Fields are also supported!' }}
 					/>
 				</>
diff --git a/packages/ui/src/lib/components/discord/MessageEmbed.tsx b/packages/ui/src/lib/components/discord/MessageEmbed.tsx
index 53b4ca1a9..16ba67358 100644
--- a/packages/ui/src/lib/components/discord/MessageEmbed.tsx
+++ b/packages/ui/src/lib/components/discord/MessageEmbed.tsx
@@ -3,6 +3,8 @@ import { DiscordMessageEmbedAuthor, type IDiscordMessageEmbedAuthor } from './Me
 import type { IDiscordMessageEmbedField } from './MessageEmbedField.jsx';
 import { DiscordMessageEmbedFields } from './MessageEmbedFields.jsx';
 import { DiscordMessageEmbedFooter, type IDiscordMessageEmbedFooter } from './MessageEmbedFooter.jsx';
+import { DiscordMessageEmbedImage, type IDiscordMessageEmbedImage } from './MessageEmbedImage.jsx';
+import { DiscordMessageEmbedThumbnail, type IDiscordMessageEmbedThumbnail } from './MessageEmbedThumbnail.jsx';
 import { DiscordMessageEmbedTitle, type IDiscordMessageEmbedTitle } from './MessageEmbedTitle.jsx';
 
 export interface IDiscordMessageEmbed {
@@ -11,7 +13,8 @@ export interface IDiscordMessageEmbed {
 	fields?: IDiscordMessageEmbedField[];
 	footer?: IDiscordMessageEmbedFooter | undefined;
 	footerNode?: ReactNode | undefined;
-	timestamp?: string;
+	image?: IDiscordMessageEmbedImage;
+	thumbnail?: IDiscordMessageEmbedThumbnail;
 	title?: IDiscordMessageEmbedTitle | undefined;
 	titleNode?: ReactNode | undefined;
 }
@@ -22,21 +25,26 @@ export function DiscordMessageEmbed({
 	fields,
 	title,
 	titleNode,
+	image,
 	children,
+	thumbnail,
 	footer,
 	footerNode,
 }: PropsWithChildren<IDiscordMessageEmbed>) {
 	return (
 		<div className="py-0.5" id="outer-embed-wrapper">
 			<div className="grid max-w-max border-l-4 border-l-blurple rounded bg-[rgb(47_49_54)]" id="embed-wrapper">
-				<div className="max-w-128">
+				<div className="max-w-128 flex">
 					<div className="pb-4 pl-3 pr-4 pt-2">
 						{author ? <DiscordMessageEmbedAuthor {...author} /> : authorNode ?? null}
 						{title ? <DiscordMessageEmbedTitle {...title} /> : titleNode ?? null}
 						{children ? <div className="mt-2 text-sm">{children}</div> : null}
 						{fields ? <DiscordMessageEmbedFields fields={fields} /> : null}
+						{image ? <DiscordMessageEmbedImage {...image} /> : null}
 						{footer ? <DiscordMessageEmbedFooter {...footer} /> : footerNode ?? null}
 					</div>
+
+					{thumbnail ? <DiscordMessageEmbedThumbnail {...thumbnail} /> : null}
 				</div>
 			</div>
 		</div>
diff --git a/packages/ui/src/lib/components/discord/MessageEmbedAuthor.tsx b/packages/ui/src/lib/components/discord/MessageEmbedAuthor.tsx
index 793970d23..c0dafd25a 100644
--- a/packages/ui/src/lib/components/discord/MessageEmbedAuthor.tsx
+++ b/packages/ui/src/lib/components/discord/MessageEmbedAuthor.tsx
@@ -1,13 +1,25 @@
 export interface IDiscordMessageEmbedAuthor {
 	avatar: string;
+	url?: string;
 	username: string;
 }
 
-export function DiscordMessageEmbedAuthor({ avatar, username }: IDiscordMessageEmbedAuthor) {
+export function DiscordMessageEmbedAuthor({ avatar, url, username }: IDiscordMessageEmbedAuthor) {
 	return (
 		<div className="mt-2 flex place-items-center">
 			<img alt={`${username}'s avatar`} className="mr-2 h-6 w-6 select-none rounded-full" src={avatar} />
-			<span className="text-sm font-medium hover:underline">{username}</span>
+			{url ? (
+				<a
+					className="text-sm font-medium hover:underline"
+					href={url}
+					rel="noreferrer noopener external"
+					target="_blank"
+				>
+					{username}
+				</a>
+			) : (
+				<span className="text-sm font-medium">{username}</span>
+			)}
 		</div>
 	);
 }
diff --git a/packages/ui/src/lib/components/discord/MessageEmbedImage.tsx b/packages/ui/src/lib/components/discord/MessageEmbedImage.tsx
new file mode 100644
index 000000000..c0e284749
--- /dev/null
+++ b/packages/ui/src/lib/components/discord/MessageEmbedImage.tsx
@@ -0,0 +1,10 @@
+export interface IDiscordMessageEmbedImage {
+	alt: string;
+	height: number;
+	url: string;
+	width: number;
+}
+
+export function DiscordMessageEmbedImage({ alt, height, url, width }: IDiscordMessageEmbedImage) {
+	return <img alt={alt} className="mt-4" height={height} src={url} width={width} />;
+}
diff --git a/packages/ui/src/lib/components/discord/MessageEmbedThumbnail.tsx b/packages/ui/src/lib/components/discord/MessageEmbedThumbnail.tsx
new file mode 100644
index 000000000..bfa14a80c
--- /dev/null
+++ b/packages/ui/src/lib/components/discord/MessageEmbedThumbnail.tsx
@@ -0,0 +1,8 @@
+export interface IDiscordMessageEmbedThumbnail {
+	alt: string;
+	image: string;
+}
+
+export function DiscordMessageEmbedThumbnail({ alt, image }: IDiscordMessageEmbedThumbnail) {
+	return <img alt={alt} className="mr-4 mt-4 aspect-square h-20" height={80} src={image} width={80} />;
+}
diff --git a/packages/ui/src/lib/components/discord/MessageEmbedTitle.tsx b/packages/ui/src/lib/components/discord/MessageEmbedTitle.tsx
index 0e3f2c75d..068cd8081 100644
--- a/packages/ui/src/lib/components/discord/MessageEmbedTitle.tsx
+++ b/packages/ui/src/lib/components/discord/MessageEmbedTitle.tsx
@@ -1,7 +1,19 @@
 export interface IDiscordMessageEmbedTitle {
 	title: string;
+	url?: string;
 }
 
-export function DiscordMessageEmbedTitle({ title }: IDiscordMessageEmbedTitle) {
-	return <div className="mt-2 font-medium">{title}</div>;
+export function DiscordMessageEmbedTitle({ title, url }: IDiscordMessageEmbedTitle) {
+	return url ? (
+		<a
+			className="mt-2 font-medium text-blue-500 hover:underline"
+			href={url}
+			rel="noreferrer noopener external"
+			target="_blank"
+		>
+			{title}
+		</a>
+	) : (
+		<div className="mt-2 font-medium">{title}</div>
+	);
 }