mirror of
https://github.com/discordjs/discord.js.git
synced 2024-08-21 03:04:47 +12:00
feat(ui): support verified bots and colored authors (#9471)
Co-authored-by: Noel <buechler.noel@outlook.com>
This commit is contained in:
parent
77191a2e7b
commit
496c4e2884
5 changed files with 38 additions and 6 deletions
BIN
apps/guide/public/assets/snek-bot.jpeg
Normal file
BIN
apps/guide/public/assets/snek-bot.jpeg
Normal file
Binary file not shown.
After Width: | Height: | Size: 9 KiB |
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
|
|
Loading…
Reference in a new issue