spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/chat/result-card.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import { ExternalLink } from "lucide-react";18import type { SearchResult } from "@shared/types";1920interface ResultCardProps {21  result: SearchResult;22  index: number;23}2425export function ResultCard({ result, index }: ResultCardProps) {26  return (27    <a28      href={result.url}29      target="_blank"30      rel="noopener noreferrer"31      className="group block bg-card border border-border rounded-xl p-5 hover:border-primary/40 transition-colors"32      data-testid={`link-result-${index}`}33    >34      <div className="flex items-start gap-4">35        <div className="flex-shrink-0 mt-1">36          {result.favicon ? (37            <img38              src={result.favicon}39              alt=""40              className="w-6 h-6 rounded"41              onError={(e) => {42                e.currentTarget.style.display = 'none';43              }}44            />45          ) : (46            <div className="w-6 h-6 rounded bg-primary/10 flex items-center justify-center">47              <span className="text-xs font-mono font-semibold text-primary">48                {new URL(result.url).hostname[0].toUpperCase()}49              </span>50            </div>51          )}52        </div>5354        <div className="flex-1 min-w-0">55          <div className="flex items-start justify-between gap-3 mb-2">56            <h3 className="text-lg font-semibold text-foreground line-clamp-2 group-hover:text-primary transition-colors" data-testid={`text-result-title-${index}`}>57              {result.title}58            </h3>59            <ExternalLink className="w-4 h-4 text-muted-foreground flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" data-testid={`icon-external-link-${index}`} />60          </div>6162          <p className="text-sm text-muted-foreground font-mono mb-2 truncate" data-testid={`text-result-domain-${index}`}>63            {new URL(result.url).hostname}64          </p>6566          <p className="text-sm text-muted-foreground line-clamp-3 leading-relaxed" data-testid={`text-result-snippet-${index}`}>67            {result.snippet}68          </p>69        </div>70      </div>71    </a>72  );73}74