"use client"; import React, { createContext, useContext } from "react"; import { HoverCard, HoverCardContent, HoverCardTrigger, } from "@/components/ui/hover-card"; import { cn } from "@/lib/utils"; type SourceContextType = { href: string; label?: string | number; }; const SourceContext = createContext(null); function useSourceContext() { const context = useContext(SourceContext); if (!context) { throw new Error("useSourceContext must be used within a Source component"); } return context; } export type SourceProps = { href: string; label?: string | number; children: React.ReactNode; }; function getDomainFromUrl(url: string): string { try { const urlObj = new URL(url); return urlObj.hostname; } catch { return url; } } export function Source({ href, label, children }: SourceProps) { return ( {children} ); } export type SourceTriggerProps = { showFavicon?: boolean; className?: string; label?: string | number; }; export function SourceTrigger({ showFavicon = true, className, label: propLabel, }: SourceTriggerProps) { const { href, label: contextLabel } = useSourceContext(); const displayLabel = propLabel ?? contextLabel; return ( {showFavicon && ( // eslint-disable-next-line @next/next/no-img-element favicon

)} {displayLabel ?? getDomainFromUrl(href)} ); } export type SourceContentProps = { title: string; description: string; className?: string; children?: React.ReactNode; }; export function SourceContent({ title, description, className, children, }: SourceContentProps) { const { href } = useSourceContext(); if (children) return {children}; if (!title && !description) return null; return (

{/* eslint-disable-next-line @next/next/no-img-element */}

{getDomainFromUrl(href)}

{title}

{description}

); }

Source

Examples

Installation