The weeb for the next gen discord boat - Wamellow wamellow.com
bot discord
3
fork

Configure Feed

Select the types of activity you want to include in your feed.

recode message component

Luna 7b8c3aa8 f7e94028

+64 -10
+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 };