Source

1"use client"
2 
3import {
4  HoverCard,
5  HoverCardContent,
6  HoverCardTrigger,
7} from "@/components/ui/hover-card"
8import { cn } from "@/lib/utils"
9import { createContext, useContext } from "react"
10 
11const SourceContext = createContext<{
12  href: string
13  domain: string
14} | null>(null)
15 
16function useSourceContext() {
17  const ctx = useContext(SourceContext)
18  if (!ctx) throw new Error("Source.* must be used inside <Source>")
19  return ctx
20}
21 
22export type SourceProps = {
23  href: string
24  children: React.ReactNode
25}
26 
27export function Source({ href, children }: SourceProps) {
28  let domain = ""
29  try {
30    domain = new URL(href).hostname
31  } catch {
32    domain = href.split("/").pop() || href
33  }
34 
35  return (
36    <SourceContext.Provider value={{ href, domain }}>
37      <HoverCard openDelay={150} closeDelay={0}>
38        {children}
39      </HoverCard>
40    </SourceContext.Provider>
41  )
42}
43 
44export type SourceTriggerProps = {
45  label?: string | number
46  showFavicon?: boolean
47  className?: string
48}
49 
50export function SourceTrigger({
51  label,
52  showFavicon = false,
53  className,
54}: SourceTriggerProps) {
55  const { href, domain } = useSourceContext()
56  const labelToShow = label ?? domain.replace("www.", "")
57 
58  return (
59    <HoverCardTrigger asChild>
60      <a
61        href={href}
62        target="_blank"
63        rel="noopener noreferrer"
64        className={cn(
65          "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-0 text-xs no-underline transition-colors duration-150",
66          showFavicon ? "pr-2 pl-1" : "px-1",
67          className
68        )}
69      >
70        {showFavicon && (
71          <img
72            src={`https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(
73              href
74            )}`}
75            alt="favicon"
76            width={14}
77            height={14}
78            className="size-3.5 rounded-full"
79          />
80        )}
81        <span className="truncate tabular-nums text-center font-normal">{labelToShow}</span>
82      </a>
83    </HoverCardTrigger>
84  )
85}
86 
87export type SourceContentProps = {
88  title: string
89  description: string
90  className?: string
91}
92 
93export function SourceContent({
94  title,
95  description,
96  className,
97}: SourceContentProps) {
98  const { href, domain } = useSourceContext()
99 
100  return (
101    <HoverCardContent className={cn("w-80 p-0 shadow-xs", className)}>
102      <a
103        href={href}
104        target="_blank"
105// … truncated