discordjs/discord.js
2
0
Fork 0
mirror of https://github.com/discordjs/discord.js.git synced 2024-08-21 03:04:47 +12:00
Code Issues Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
apps/guide/public/assets/snek-bot.jpeg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 9 KiB

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

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

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