Restore issue request socials

Author: jasperdevs

src/components/github-stars.tsx

@@ -66,7 +66,7 @@ export function GitHubStars() {
         rel="noreferrer"
         aria-label={stars === null ? "open GitHub repo" : `open GitHub repo, ${stars} stars`}
         className={cn(
-          "flex h-11 items-center gap-1.5 border-l border-border/60 px-1.5 text-[14px] font-medium text-foreground min-[420px]:px-2",
+          "flex h-11 items-center gap-1.5 px-1.5 text-[14px] font-medium text-foreground min-[420px]:px-2",
           "transition-colors duration-[180ms] hover:bg-foreground/5"
         )}
       >

src/components/request-form.tsx

@@ -1,8 +1,18 @@
 "use client";
 
+import { useState } from "react";
 import { OddIcon } from "@/components/ui/odd-icon";
 
 const ISSUES_URL = "https://github.com/jasperdevs/oddicons/issues/new";
+type Social =
+  | { id: string; label: string; icon: string; href: string; copy?: never }
+  | { id: string; label: string; icon: string; copy: string; href?: never };
+
+const SOCIALS: Social[] = [
+  { id: "x", label: "x", icon: "x-twitter", href: "https://x.com/jasperdevs" },
+  { id: "discord", label: "discord", icon: "discord", copy: "jasperdevs" },
+  { id: "gmail", label: "gmail", icon: "gmail", href: "mailto:jasper.mceligott@gmail.com" },
+];
 
 interface RequestFormProps {
   heading?: string;
@@ -15,6 +25,18 @@ export function RequestForm({
   subheading = "tell us what icon you want on GitHub",
   hideHeader = false,
 }: RequestFormProps) {
+  const [copied, setCopied] = useState<string | null>(null);
+
+  const copySocial = async (id: string, value: string) => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(id);
+      window.setTimeout(() => setCopied((current) => (current === id ? null : current)), 1400);
+    } catch {
+      // ignore
+    }
+  };
+
   return (
     <div className="flex flex-col gap-4">
       {!hideHeader && (
@@ -37,7 +59,7 @@ export function RequestForm({
             Send an issue with the icon you want.
           </p>
           <p className="text-[12px] leading-[1.55] text-muted-foreground">
-            Requests are tracked in GitHub issues so they do not get lost.
+            GitHub is the best place to request new icons.
           </p>
         </div>
       </div>
@@ -51,6 +73,43 @@ export function RequestForm({
         <OddIcon name="github" size={20} />
         send GitHub issue
       </a>
+
+      <div className="grid grid-cols-3 gap-1.5 border-t border-border pt-4">
+        {SOCIALS.map((social) => {
+          const content = (
+            <>
+              <OddIcon name={copied === social.id ? "check" : social.icon} size={20} />
+              <span className="truncate">{copied === social.id ? "copied" : social.label}</span>
+            </>
+          );
+          const className = "group/chip flex h-11 items-center justify-center gap-2 rounded-lg border border-border bg-sidebar text-[12px] font-medium text-muted-foreground transition-[color,background-color,border-color,transform] duration-[180ms] hover:-translate-y-0.5 hover:border-foreground/30 hover:bg-accent hover:text-foreground";
+
+          if (social.copy !== undefined) {
+            return (
+              <button
+                key={social.id}
+                type="button"
+                onClick={() => copySocial(social.id, social.copy)}
+                className={className}
+              >
+                {content}
+              </button>
+            );
+          }
+
+          return (
+            <a
+              key={social.id}
+              href={social.href}
+              target={social.href.startsWith("mailto:") ? undefined : "_blank"}
+              rel={social.href.startsWith("mailto:") ? undefined : "noreferrer"}
+              className={className}
+            >
+              {content}
+            </a>
+          );
+        })}
+      </div>
     </div>
   );
 }

src/components/usage-content.tsx

@@ -69,7 +69,7 @@ export function UsageContent() {
               send an issue.
             </h2>
             <p className="text-[13.5px] leading-[1.6] text-muted-foreground">
-              say what icon you want and it will be tracked on GitHub.
+              say what icon you want on GitHub.
             </p>
           </div>
         </div>