Nomchy/discord.js
1
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2026-03-09 16:13:31 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Co-authored-by: Noel <buechler.noel@outlook.com>
This commit is contained in:
Tetie
2023-04-29 17:26:31 +02:00
committed by GitHub
parent 77191a2e7b
commit 496c4e2884
5 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/ui/package.json
View File

@@ -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"

12
packages/ui/src/lib/components/discord/MessageAuthor.tsx
View File

@@ -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>

10
packages/ui/src/lib/components/discord/MessageAuthorReply.tsx
View File

@@ -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>
</>