Initial commit

components/public/copy-button.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { useState } from "react";
+
+type CopyButtonProps = {
+  value: string;
+};
+
+export function CopyButton({ value }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      setCopied(false);
+    }
+  }
+
+  return (
+    <button type="button" onClick={handleCopy} aria-label="Copy value" className="method-action">
+      {copied ? "Copied" : "Copy"}
+    </button>
+  );
+}

components/public/payment-method-card.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { PaymentMethod, PaymentMethodType } from "@prisma/client";
+import { PAYMENT_METHOD_LABELS, SUPPORTS_QR } from "@/lib/constants";
+import { buildPaymentUri } from "@/lib/payment-uri";
+import { CopyButton } from "@/components/public/copy-button";
+import { QrModal } from "@/components/public/qr-modal";
+
+type PublicPaymentMethod = Pick<
+  PaymentMethod,
+  "id" | "type" | "label" | "value" | "network" | "description" | "isVisible"
+>;
+
+type PaymentMethodCardProps = {
+  method: PublicPaymentMethod;
+};
+
+function isHttpUrl(value: string) {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+
+export function PaymentMethodCard({ method }: PaymentMethodCardProps) {
+  const typeLabel = PAYMENT_METHOD_LABELS[method.type as PaymentMethodType];
+  const qrPayload = buildPaymentUri(method.type, method.value, method.network);
+  const linkTarget = isHttpUrl(qrPayload) ? qrPayload : null;
+
+  return (
+    <article className="method-card">
+      <div className="method-card-grid">
+        <div className="method-card-content">
+          <p className="method-card-title">{method.label}</p>
+          <p className="method-card-meta">
+            {typeLabel}
+            {method.network ? ` · ${method.network}` : ""}
+          </p>
+          <p className="method-card-value">{method.value}</p>
+          {method.description ? <p className="method-card-description">{method.description}</p> : null}
+        </div>
+
+        <div className="method-actions">
+          <CopyButton value={method.value} />
+          {SUPPORTS_QR.has(method.type) ? <QrModal title={`${method.label} QR`} payload={qrPayload} /> : null}
+          {linkTarget ? (
+            <a href={linkTarget} target="_blank" rel="noreferrer" className="method-action">
+              Open
+            </a>
+          ) : null}
+        </div>
+      </div>
+    </article>
+  );
+}

components/public/profile-header.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable @next/next/no-img-element */
+type ProfileHeaderProps = {
+  displayName: string;
+  username: string;
+  bio: string | null;
+  avatarUrl: string | null;
+};
+
+export function ProfileHeader({ displayName, username, bio, avatarUrl }: ProfileHeaderProps) {
+  const words = displayName.trim().split(/\s+/).filter(Boolean);
+  const initials =
+    words.length >= 2
+      ? `${words[0]?.[0] ?? ""}${words[1]?.[0] ?? ""}`.toUpperCase()
+      : (words[0]?.slice(0, 2) ?? username.slice(0, 2)).toUpperCase();
+
+  return (
+    <header className="terminal-card space-y-4">
+      <div className="flex items-center gap-4">
+        {avatarUrl ? (
+          <img
+            src={avatarUrl}
+            alt={`${displayName} avatar`}
+            className="h-16 w-16 rounded-full border border-border object-cover"
+          />
+        ) : (
+          <div className="flex h-16 w-16 items-center justify-center rounded-full border border-border bg-panel text-lg font-semibold text-muted">
+            {initials}
+          </div>
+        )}
+
+        <div className="space-y-1.5">
+          <h1 className="text-3xl font-bold leading-tight">{displayName}</h1>
+          <p className="text-sm text-muted">@{username}</p>
+        </div>
+      </div>
+
+      {bio ? <p className="max-w-2xl text-sm leading-relaxed text-muted">{bio}</p> : null}
+    </header>
+  );
+}

components/public/qr-modal.tsx

@@ -0,0 +1,65 @@
+"use client";
+/* eslint-disable @next/next/no-img-element */
+
+import { useEffect, useState } from "react";
+import QRCode from "qrcode";
+import { Modal } from "@/components/ui/modal";
+
+type QrModalProps = {
+  title: string;
+  payload: string;
+};
+
+export function QrModal({ title, payload }: QrModalProps) {
+  const [open, setOpen] = useState(false);
+  const [qrDataUrl, setQrDataUrl] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    QRCode.toDataURL(payload, { margin: 1, width: 280 })
+      .then((dataUrl) => {
+        setQrDataUrl(dataUrl);
+        setError(null);
+      })
+      .catch(() => {
+        setQrDataUrl(null);
+        setError("Could not generate QR code");
+      });
+  }, [open, payload]);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={(event) => {
+          event.stopPropagation();
+          setOpen(true);
+        }}
+        aria-label="Show QR code"
+        className="method-action"
+      >
+        QR
+      </button>
+      <Modal open={open} onClose={() => setOpen(false)} title={title}>
+        <div className="space-y-3">
+          {qrDataUrl ? (
+            <img
+              src={qrDataUrl}
+              alt="QR code"
+              className="mx-auto h-56 w-56 rounded-md border border-border bg-white p-2 md:h-64 md:w-64"
+            />
+          ) : (
+            <div className="flex h-56 items-center justify-center rounded-md border border-border bg-bg/40 text-sm text-muted md:h-64">
+              {error ?? "Generating QR..."}
+            </div>
+          )}
+          <p className="max-h-28 overflow-y-auto break-all text-xs text-muted">{payload}</p>
+        </div>
+      </Modal>
+    </>
+  );
+}

components/public/social-links-list.tsx

@@ -0,0 +1,34 @@
+import { buttonStyles } from "@/components/ui/button";
+import { SocialLink } from "@prisma/client";
+
+type PublicSocialLink = Pick<SocialLink, "id" | "label" | "url">;
+
+type SocialLinksListProps = {
+  links: PublicSocialLink[];
+};
+
+export function SocialLinksList({ links }: SocialLinksListProps) {
+  if (links.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className="terminal-section space-y-3">
+      <h2 className="terminal-heading">Social / Contact</h2>
+      <ul className="space-y-3">
+        {links.map((link) => (
+          <li key={link.id}>
+            <a
+              href={link.url}
+              target="_blank"
+              rel="noreferrer"
+              className={buttonStyles({ variant: "secondary", className: "bg-panel/45" })}
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}