Search Results Tabs

1"use client";
2 
3import { motion } from "framer-motion";
4import Image from "next/image";
5import { useCallback, useEffect, useState } from "react";
6import { HugeiconsIcon, News01Icon } from "@/components/icons";
7 
8import { Button } from "@/components/ui/button";
9import {
10	Popover,
11	PopoverContent,
12	PopoverTrigger,
13} from "@/components/ui/popover";
14import { Skeleton } from "@/components/ui/skeleton";
15 
16export interface ImageResult {
17	url: string;
18	title?: string;
19}
20 
21export interface WebResult {
22	title: string;
23	url: string;
24	content: string;
25	date?: string;
26}
27 
28export interface NewsResult {
29	title: string;
30	url: string;
31	content: string;
32	score?: number;
33	date?: string;
34}
35 
36export interface SearchResults {
37	web?: WebResult[];
38	images?: string[] | ImageResult[];
39	news?: NewsResult[];
40}
41 
42interface SearchResultsTabsProps {
43	search_results: SearchResults;
44	onImageClick?: (imageUrl: string) => void;
45}
46 
47export function SearchResultsTabs({
48	search_results,
49	onImageClick,
50}: SearchResultsTabsProps) {
51	return (
52		<div className="w-full">
53			<div className="space-y-6">
54				{search_results.web && search_results.web?.length > 0 && (
55					<SourcesButton web={search_results.web} />
56				)}
57 
58				{search_results.images && search_results.images?.length > 0 && (
59					<ImageResults
60						images={search_results.images}
61						onImageClick={onImageClick}
62					/>
63				)}
64 
65				{search_results.news && search_results.news?.length > 0 && (
66					<NewsResults news={search_results.news} />
67				)}
68			</div>
69		</div>
70	);
71}
72 
73interface ImageResultsProps {
74	images: string[] | ImageResult[];
75	onImageClick?: (imageUrl: string) => void;
76}
77 
78function ImageResults({ images, onImageClick }: ImageResultsProps) {
79	const [validImages, setValidImages] = useState<string[]>([]);
80 
81	useEffect(() => {
82		const validateImages = async () => {
83			// Convert to string array if needed
84			const imageUrls = images.map((img) =>
85				typeof img === "string" ? img : img.url,
86			);
87 
88			// Filter out obviously invalid images first
89			const potentiallyValidImages = imageUrls.filter(
90				(imageUrl) => imageUrl && typeof imageUrl === "string",
91			);
92 
93			// Test each image by trying to load it
94			const validationPromises = potentiallyValidImages.map(
95				(imageUrl) =>
96					new Promise<string | null>((resolve) => {
97						const img = new window.Image();
98 
99						const timeoutId = setTimeout(() => {
100							resolve(null); // Timeout after 5 seconds
101						}, 5000);
102 
103						img.onload = () => {
104							clearTimeout(timeoutId);
105// … truncated