33 lines
987 B
TypeScript
33 lines
987 B
TypeScript
import Link from "next/link";
|
|
import { CopyButton } from "./copy-button";
|
|
|
|
interface FediverseHandleWidgetProps {
|
|
username: string;
|
|
}
|
|
|
|
export function FediverseHandleWidget({ username }: FediverseHandleWidgetProps) {
|
|
const domain = process.env.NEXT_PUBLIC_FEDIVERSE_DOMAIN;
|
|
if (!domain) return null;
|
|
|
|
const handle = `@${username}@${domain}`;
|
|
|
|
return (
|
|
<div className="glass-effect rounded-md shadow-fa-lg p-4">
|
|
<h2 className="text-sm font-semibold mb-2">Your fediverse handle</h2>
|
|
<div className="flex items-center gap-1 mb-2">
|
|
<p className="text-xs font-mono text-muted-foreground break-all">{handle}</p>
|
|
<CopyButton text={handle} />
|
|
</div>
|
|
<p className="text-xs text-muted-foreground mb-2">
|
|
Anyone on Mastodon or Pixelfed can follow you with this.
|
|
</p>
|
|
<Link
|
|
href="/about/fediverse"
|
|
className="text-xs text-primary hover:underline"
|
|
>
|
|
Learn more →
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|