Source

1"use client";
2import React, { createContext, useContext } from "react";
3import {
4  HoverCard,
5  HoverCardContent,
6  HoverCardTrigger,
7} from "@/components/ui/hover-card";
8import { cn } from "@/lib/utils";
9 
10type SourceContextType = {
11  href: string;
12  label?: string | number;
13};
14 
15const SourceContext = createContext<SourceContextType | null>(null);
16 
17function useSourceContext() {
18  const context = useContext(SourceContext);
19  if (!context) {
20    throw new Error("useSourceContext must be used within a Source component");
21  }
22  return context;
23}
24 
25export type SourceProps = {
26  href: string;
27  label?: string | number;
28  children: React.ReactNode;
29};
30 
31function getDomainFromUrl(url: string): string {
32  try {
33    const urlObj = new URL(url);
34    return urlObj.hostname;
35  } catch {
36    return url;
37  }
38}
39 
40export function Source({ href, label, children }: SourceProps) {
41  return (
42    <SourceContext.Provider value={{ href, label }}>
43      <HoverCard openDelay={150} closeDelay={0}>
44        {children}
45      </HoverCard>
46    </SourceContext.Provider>
47  );
48}
49 
50export type SourceTriggerProps = {
51  showFavicon?: boolean;
52  className?: string;
53  label?: string | number;
54};
55 
56export function SourceTrigger({
57  showFavicon = true,
58  className,
59  label: propLabel,
60}: SourceTriggerProps) {
61  const { href, label: contextLabel } = useSourceContext();
62  const displayLabel = propLabel ?? contextLabel;
63 
64  return (
65    <HoverCardTrigger asChild>
66      <a
67        href={href}
68        target="_blank"
69        rel="noopener noreferrer"
70        className={cn(
71          "bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-1 text-xs leading-none no-underline transition-colors duration-150",
72          showFavicon ? "pr-2 pl-1" : "px-1",
73          className
74        )}
75      >
76        {showFavicon && (
77          // eslint-disable-next-line @next/next/no-img-element
78          <img
79            src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(
80              href
81            )}`}
82            alt="favicon"
83            width={14}
84            height={14}
85            className="size-3.5 rounded-full"
86          />
87        )}
88        <span className="truncate text-center font-normal">
89          {displayLabel ?? getDomainFromUrl(href)}
90        </span>
91      </a>
92    </HoverCardTrigger>
93  );
94}
95 
96export type SourceContentProps = {
97  title: string;
98  description: string;
99// … truncated