60 lines
1.5 KiB
TypeScript
Executable File
60 lines
1.5 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { SimpleTooltip } from "./tooltip";
|
|
|
|
export function DiscordMentionable({
|
|
name,
|
|
id,
|
|
type,
|
|
}: {
|
|
name: string;
|
|
id: string;
|
|
type: "role" | "user" | "channel";
|
|
}) {
|
|
const [copied, setCopied] = useState(0);
|
|
useEffect(() => {
|
|
if (!copied) return;
|
|
const timeout = setTimeout(() => setCopied(0), 5000);
|
|
return () => clearTimeout(timeout);
|
|
}, [copied]);
|
|
return (
|
|
<SimpleTooltip
|
|
text={
|
|
copied === 1
|
|
? "Copied!"
|
|
: copied === 2
|
|
? "Couldn't copy..."
|
|
: `Click to copy ${type} mention`
|
|
}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
try {
|
|
switch (type) {
|
|
case "user":
|
|
navigator.clipboard.writeText(`<@${id}>`);
|
|
break;
|
|
case "role":
|
|
navigator.clipboard.writeText(`<@&${id}>`);
|
|
break;
|
|
case "channel":
|
|
navigator.clipboard.writeText(`<#${id}>`);
|
|
break;
|
|
}
|
|
setCopied(1);
|
|
} catch (e) {
|
|
console.error(e);
|
|
setCopied(2);
|
|
}
|
|
}}
|
|
className="cursor-pointer rounded-[3px] bg-mention-background px-0.5 font-medium text-mention-foreground transition-[background-color,color] duration-50 ease-out hover:bg-mention-hover hover:text-white"
|
|
>
|
|
{type === "channel" ? "#" : "@"}
|
|
{name}
|
|
</button>
|
|
</SimpleTooltip>
|
|
);
|
|
}
|