diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
new file mode 100644
index 0000000..16336c2
--- /dev/null
+++ b/src/components/ExternalLink.tsx
@@ -0,0 +1,65 @@
+import { ExternalLink as ExternalLinkIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ExternalLinkProps {
+ href: string;
+ children: React.ReactNode;
+ className?: string;
+ iconClassName?: string;
+ showIcon?: boolean;
+ variant?: "default" | "muted";
+ size?: "xs" | "sm" | "base";
+}
+
+/**
+ * Reusable external link component with consistent styling across the app
+ * Follows patterns from HighlightRenderer and BookmarkRenderer
+ */
+export function ExternalLink({
+ href,
+ children,
+ className,
+ iconClassName,
+ showIcon = true,
+ variant = "muted",
+ size = "xs",
+}: ExternalLinkProps) {
+ const sizeClasses = {
+ xs: "text-xs",
+ sm: "text-sm",
+ base: "text-base",
+ };
+
+ const iconSizeClasses = {
+ xs: "size-3",
+ sm: "size-3",
+ base: "size-4",
+ };
+
+ const variantClasses = {
+ default: "text-primary hover:underline",
+ muted: "text-muted-foreground underline decoration-dotted",
+ };
+
+ return (
+ e.stopPropagation()}
+ >
+ {showIcon && (
+
+ )}
+ {children}
+
+ );
+}
diff --git a/src/components/nostr/kinds/ApplicationHandlerDetailRenderer.tsx b/src/components/nostr/kinds/ApplicationHandlerDetailRenderer.tsx
index a5fc905..3099727 100644
--- a/src/components/nostr/kinds/ApplicationHandlerDetailRenderer.tsx
+++ b/src/components/nostr/kinds/ApplicationHandlerDetailRenderer.tsx
@@ -11,13 +11,13 @@ import { KindBadge } from "@/components/KindBadge";
import { Badge } from "@/components/ui/badge";
import { useCopy } from "@/hooks/useCopy";
import { UserName } from "../UserName";
+import { ExternalLink } from "@/components/ExternalLink";
import {
Copy,
CopyCheck,
Globe,
Smartphone,
TabletSmartphone,
- ExternalLink,
} from "lucide-react";
interface ApplicationHandlerDetailRendererProps {
@@ -94,15 +94,9 @@ export function ApplicationHandlerDetailRenderer({
{/* Website */}
{website && (
-
+
{website}
-
-
+
)}
{/* Metadata Grid */}
diff --git a/src/components/nostr/kinds/ApplicationHandlerRenderer.tsx b/src/components/nostr/kinds/ApplicationHandlerRenderer.tsx
index 987c676..c786dac 100644
--- a/src/components/nostr/kinds/ApplicationHandlerRenderer.tsx
+++ b/src/components/nostr/kinds/ApplicationHandlerRenderer.tsx
@@ -11,6 +11,7 @@ import {
} from "@/lib/nip89-helpers";
import { KindBadge } from "@/components/KindBadge";
import { Badge } from "@/components/ui/badge";
+import { ExternalLink } from "@/components/ExternalLink";
import { Globe, Smartphone, TabletSmartphone } from "lucide-react";
/**
@@ -60,17 +61,7 @@ export function ApplicationHandlerRenderer({ event }: BaseEventProps) {
{/* Website */}
- {website && (
- e.stopPropagation()}
- >
- {website}
-
- )}
+ {website && {website}}
{/* Supported Kinds */}
{displayKinds.length > 0 && (