Emboldened component, copyToClipboard

frontend/src/components/Emboldened.tsx

@@ -0,0 +1,30 @@
+import { cn, type ClassValue } from "@/util";
+
+type EmboldenedProps = {
+  children: string | number;
+  className?: ClassValue;
+  copyable?: boolean;
+};
+
+const Emboldened = ({ children, copyable }: EmboldenedProps) => {
+  function copyToClipboard() {
+    // Copy to clipboard
+    navigator.clipboard.writeText(children.toString());
+  }
+
+  return (
+    <span
+      onClick={copyable ? copyToClipboard : undefined}
+      className={cn(
+        "bg-zinc-900/40 rounded border border-zinc-700 py-0.5 px-1 font-mono text-teal-400",
+        {
+          "cursor-pointer": copyable,
+        }
+      )}
+    >
+      {children}
+    </span>
+  );
+};
+
+export default Emboldened;

frontend/src/components/StatefulDemo.tsx

@@ -1,4 +1,5 @@
 import Badge from "@/components/Badge";
+import Emboldened from "@/components/Emboldened";
 import { cn, plural, type ClassValue } from "@/util";
 import { useState } from "preact/hooks";
 
@@ -32,9 +33,11 @@ const StatefulDemo = ({ class: className }: StatefulDemoProps) => {
         <br />
         {session != null ? (
           <>
-            Your session is <b class="text-teal-400 font-inter">{session.id}</b>
-            . You have{" "}
-            <b class="text-teal-400 font-inter">{session.downloads.length}</b>{" "}
+            Your session is{" "}
+            <Emboldened copyable={true}>{session.id}</Emboldened>. You have{" "}
+            <Emboldened className="text-teal-400 font-inter">
+              {session.downloads.length}
+            </Emboldened>{" "}
             known {plural("download", session.downloads.length)}.
           </>
         ) : null}