Janady13/llms-txt-hub / apps/web/components/ui/favicon-with-fallback.tsx

Source identity

Field	Recorded value
Source type	GitHub source
Original record	Janady13/llms-txt-hub / apps/web/components/ui/favicon-with-fallback.tsx
Date	Not specified in source
Repository	Janady13/llms-txt-hub
Revision	e0f4bf978d4df168369c7601d9c5f5ea89e84377
Branch	main
Path or archive member	apps/web/components/ui/favicon-with-fallback.tsx
Original SHA-256	b39401c6289d1bc40f95d97f16630a777dc7d7a62436849a38484f1d30cd621d
Git blob SHA	6e8e52fd44e8cb9d6449ea331136137510678bc2
Reading-copy SHA-256	b39401c6289d1bc40f95d97f16630a777dc7d7a62436849a38484f1d30cd621d

Original source ↗

Recovered source transcript

Download complete source text ↓50 lines · 1.2 KB

'use client'

import { getFaviconUrl } from '@thedaviddias/utils/get-favicon-url'
import { Globe } from 'lucide-react'
import { useState } from 'react'

interface FaviconWithFallbackProps {
  website: string
  name: string
  size?: number
  className?: string
}

/**
 * Displays a favicon with automatic fallback to a Globe icon on error
 * @param props - The component props
 * @returns React component that handles favicon loading and errors
 */
export function FaviconWithFallback({
  website,
  name,
  size = 32,
  className = 'rounded-lg'
}: FaviconWithFallbackProps) {
  const [imageError, setImageError] = useState(false)

  if (imageError) {
    return (
      <div
        className={`${className} flex-shrink-0 flex items-center justify-center bg-muted`}
        style={{ width: `${size}px`, height: `${size}px` }}
      >
        <Globe className="w-4 h-4 text-muted-foreground" />
      </div>
    )
  }

  return (
    <img
      src={getFaviconUrl(website, 256) || '/placeholder.svg'}
      alt={`${name} favicon`}
      width={size}
      height={size}
      className={`${className} flex-shrink-0 object-contain`}
      style={{ width: `${size}px`, height: 'auto', aspectRatio: '1/1' }}
      onError={() => setImageError(true)}
    />
  )
}