feat: discord mention clone

app/globals.css

@@ -38,6 +38,9 @@
   --color-popover: var(--popover);
   --color-card-foreground: var(--card-foreground);
   --color-card: var(--card);
+  --color-mention-foreground: var(--mention-foreground);
+  --color-mention-background: var(--mention-background);
+  --color-mention-hover: var(--mention-hover);
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -77,6 +80,17 @@
   --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
   --sidebar-border: oklch(0.92 0.004 286.32);
   --sidebar-ring: oklch(0.623 0.214 259.815);
+  --mention-foreground: color-mix(
+    in oklab,
+    hsl(228.785 calc(1 * 100%) 79.02% / 1) 100%,
+    #000 0%
+  );
+  --mention-background: color-mix(
+    in oklab,
+    hsl(234.935 calc(1 * 85.556%) 64.706% / 0.23921568627450981) 100%,
+    hsl(0 0% 0% / 0.23921568627450981) 0%
+  );
+  --mention-hover: hsl(234.935 calc(1 * 85.556%) 64.706% / 1);
 }
 
 .dark {

components/mentionable.tsx

@@ -0,0 +1,59 @@
+"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="px-0.5 rounded-[3px] cursor-pointer transition-[background-color,color] duration-50 ease-out font-medium bg-mention-background text-mention-foreground hover:text-white hover:bg-mention-hover"
+      >
+        {type === "channel" ? "#" : "@"}
+        {name}
+      </button>
+    </SimpleTooltip>
+  );
+}