The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
recode message component
+64
-10
+64
-10
components/discord/Message.tsx
+64
-10
components/discord/Message.tsx
···
1
-
import Image from "next/image";
1
+
"use client";
2
+
3
+
import { Avatar } from "@nextui-org/react";
2
4
import React, { FunctionComponent } from "react";
3
5
import { HiCheck } from "react-icons/hi";
4
6
7
+
import cn from "@/utils/cn";
8
+
5
9
interface Props {
6
10
children: React.ReactNode;
7
11
mode: "DARK" | "LIGHT";
8
12
13
+
commandUsed?: {
14
+
name: string;
15
+
username: string;
16
+
avatar: string;
17
+
bot: boolean;
18
+
}
19
+
9
20
user: {
10
21
username: string;
11
22
avatar: string;
···
13
24
}
14
25
}
15
26
16
-
const DiscordMessage: FunctionComponent<Props> = ({ children, user, mode }) => {
27
+
const DiscordMessage: FunctionComponent<Props> = ({ children, commandUsed, user, mode }) => {
17
28
18
29
function formatTime(date: Date) {
19
30
const timeString = date.toLocaleString("en-US", { hour: "numeric", minute: "numeric" });
···
21
32
}
22
33
23
34
return (
24
-
<div className={`w-full ${mode === "DARK" ? "text-neutral-100" : "text-neutral-900"}`}>
25
-
<div className="flex w-full">
26
-
<Image src={user.avatar} height={40} width={40} alt="" className="rounded-full h-10 w-10" />
27
-
<div className="ml-3 w-full">
28
-
<div className="flex items-center gap-1">
29
-
<div className="text-md font-medium">{user.username}</div>
35
+
<div className={cn("group relative hover:bg-neutral-800/40 rounded-lg px-1 w-full", mode === "DARK" ? "text-neutral-100" : "text-neutral-900")}>
36
+
37
+
{commandUsed ?
38
+
<div className={cn("flex items-center gap-1 opacity-70 text-sm ml-4", mode === "DARK" ? "text-neutral-400" : "text-neutral-600")} >
39
+
<div className={cn("border-t-2 border-l-2 border-neutral-600 rounded-tl-md w-7 relative shrink-0 h-2.5 top-1", mode === "DARK" ? "text-neutral-600" : "text-neutral-400")} />
40
+
<div className="mx-0.5 flex items-center gap-1 font-semibold whitespace-nowrap overflow-hidden text-ellipsis shrink-0">
41
+
<Avatar
42
+
className="h-4 w-4"
43
+
radius="full"
44
+
src={commandUsed.avatar}
45
+
/>
46
+
<span className={cn(mode === "DARK" ? "text-violet-400" : "text-violet-600")}>{commandUsed.username}</span>
47
+
{commandUsed.bot && <div className="text-xxs text-white bg-blurple rounded py-[1px] px-1 h-4 flex items-center">
48
+
<HiCheck />
49
+
<span className="ml-1">BOT</span>
50
+
</div>
51
+
}
52
+
used
53
+
<span className="text-blue-400">/{commandUsed.name}</span>
54
+
</div>
55
+
</div>
56
+
: null
57
+
}
58
+
59
+
<div className="flex flex-row items-start pointer-events-none [&>*]:pointer-events-auto">
60
+
<div className="flex justify-start items-center w-[52px] shrink-0">
61
+
<Avatar
62
+
className="h-10 w-10 hover:cursor-pointer mt-1.5 lca-popover-activator"
63
+
radius="full"
64
+
src={user.avatar}
65
+
/>
66
+
</div>
67
+
68
+
<div className="flex-1 w-0">
69
+
<div className="flex items-center space-x-2">
70
+
<div className="font-semibold whitespace-nowrap overflow-hidden text-ellipsis hover:underline lca-popover-activator" >
71
+
{user.username}
72
+
</div>
30
73
{user.bot && <div className="text-xxs text-white bg-blurple rounded py-[1px] px-1 flex items-center">
31
74
<HiCheck />
32
75
<span className="ml-1">BOT</span>
33
76
</div>
34
77
}
35
-
<div className={`text-xs ml-1 ${mode === "DARK" ? "text-neutral-400" : "text-neutral-600"}`}>{formatTime(new Date())}</div>
78
+
<time
79
+
className="mt-[2px] text-xs opacity-70 font-light"
80
+
dateTime={new Date().toISOString()}
81
+
>
82
+
{formatTime(new Date())}
83
+
</time>
84
+
</div>
85
+
86
+
<div className="opacity-90 break-words hyphens-auto font-light flex flex-col text-bsm" lang="en">
87
+
{children}
36
88
</div>
37
-
{children}
89
+
38
90
</div>
39
91
</div>
92
+
93
+
40
94
</div>
41
95
);
42
96
};