Search Results Tabs

​

Installation

​

Usage

import { SearchResultsTabs } from "@/components/ui/search-results-tabs";

const searchResults = {
  web: [
    {
      title: "Example Page",
      url: "https://example.com",
      content: "This is an example search result description.",
      date: "2024-03-01",
    },
  ],
  images: [
    "https://example.com/image1.jpg",
    "https://example.com/image2.jpg",
  ],
  news: [
    {
      title: "Breaking News",
      url: "https://news.example.com/article",
      content: "Article summary goes here.",
      score: 0.95,
      date: "2024-03-03",
    },
  ],
};

export default function Example() {
  return (
    <SearchResultsTabs
      search_results={searchResults}
      onImageClick={(url) => console.log("Image clicked:", url)}
    />
  );
}

​

Web Results Only

<SearchResultsTabs
  search_results={{
    web: [
      // web results array
    ],
  }}
/>

​

With News

<SearchResultsTabs
  search_results={{
    web: [/* web results */],
    news: [
      {
        title: "Article Title",
        url: "https://...",
        content: "Summary",
        score: 0.92,
        date: "2024-03-03",
      },
    ],
  }}
/>

​

With Image Click Handler

<SearchResultsTabs
  search_results={searchResults}
  onImageClick={(imageUrl) => {
    // Open lightbox, preview, etc.
    console.log("Clicked:", imageUrl);
  }}
/>

​

Props

​

Types

export interface WebResult {
  title: string;
  url: string;
  content: string;
  date?: string;
}

export interface ImageResult {
  url: string;
  title?: string;
}

export interface NewsResult {
  title: string;
  url: string;
  content: string;
  score?: number;
  date?: string;
}

export interface SearchResults {
  web?: WebResult[];
  images?: string[] | ImageResult[];
  news?: NewsResult[];
}

interface SearchResultsTabsProps {
  search_results: SearchResults;
  onImageClick?: (imageUrl: string) => void;
}

​

Features

​

Web Results

• Popover Display: Web results shown in a compact popover button
• Favicon Integration: Automatically fetches and displays site favicons
• Preview Stacking: Multiple favicons stacked for visual appeal
• Metadata: Shows domain, date, and truncated descriptions
• External Links: Opens in new tabs with proper security attributes

​

Image Results

• Validation: Automatically validates image URLs before display
• Lazy Loading: Images load progressively with skeleton loaders
• Animated Entrance: Staggered fade-in animations with framer-motion
• 3D Rotation: Alternating rotation effects on hover
• Z-index Management: Hovered images come to the front
• Click Handler: Optional callback for image interactions
• Responsive: Adapts to different screen sizes

​

News Results

• Relevance Scores: Display confidence scores for news articles
• Date Formatting: Automatically formats dates
• Truncated Content: Uses line-clamp for clean previews
• Hover Effects: Smooth transitions on interaction
• Icon Integration: News icon from Hugeicons library

​

Image Validation

• Attempts to load each image URL
• Filters out broken or invalid images
• Has a 5-second timeout per image
• Only displays successfully loaded images
• Shows nothing if no valid images exist

​

Styling

​

Web Results Button

• Compact button with favicon stack
• Semi-transparent background with backdrop blur
• Smooth hover transitions
• Popover with max-width and scrollable content

​

Image Grid

• Overlapping images with negative space (-space-x-15)
• Alternating rotation angles
• Smooth scale and blur animations
• Dynamic z-index for hover states

​

News Cards

• Card-based layout with borders
• Subtle shadows that grow on hover
• Truncated content for consistent heights
• Metadata display (score and date)

​

Accessibility

• Semantic HTML structure
• External links with rel="noopener noreferrer"
• Alt text for all images
• Keyboard navigation support through shadcn/ui components
• Loading states communicated visually
• Error handling for failed image loads

​

Performance

• Image validation runs in parallel with Promise.all
• Timeout prevents hanging on slow images
• Lazy loading with Next.js Image component
• Priority loading for first 3 images
• Component cleanup prevents memory leaks
• Efficient re-renders with React hooks

​

Common Use Cases

1. AI Search Results: Display results from AI-powered search engines
2. Content Discovery: Show related articles, images, and news
3. Research Tools: Present comprehensive search data
4. News Aggregators: Combine multiple news sources
5. Image Galleries: Display validated image collections