Evandro Fonseca Junior
ab37b477df
- wrap root layout with QueryProvider for React Query - replace market UnderConstruction placeholder with MarketClient and real data fetching - implement search, pagination, and sort via search params using getActiveListings - add necessary client components and queries - update dependencies (e.g., prisma, pkg-types)
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { User, CheckCircle2 } from "lucide-react";
|
|
import { useEffect } from "react";
|
|
import { useMarketTelemetry } from "@/lib/hooks/use-telemetry";
|
|
|
|
interface SellerInfoProps {
|
|
sellerId: number;
|
|
sellerName: string;
|
|
sellerImage?: string | null;
|
|
verified?: boolean;
|
|
serverName: string;
|
|
listingId: number;
|
|
}
|
|
|
|
export function SellerInfo({
|
|
sellerId,
|
|
sellerName,
|
|
sellerImage,
|
|
verified = false,
|
|
serverName,
|
|
listingId,
|
|
}: SellerInfoProps) {
|
|
const { trackCustomEvent } = useMarketTelemetry();
|
|
|
|
// Tracking de visualização de vendedor
|
|
useEffect(() => {
|
|
trackCustomEvent(
|
|
"seller_profile_viewed",
|
|
listingId,
|
|
{
|
|
seller_id: sellerId,
|
|
seller_name: sellerName,
|
|
}
|
|
);
|
|
}, [sellerId, sellerName, listingId, trackCustomEvent]);
|
|
|
|
// Gerar iniciais do nome
|
|
const getInitials = (name: string) => {
|
|
return name
|
|
.split(" ")
|
|
.slice(0, 2)
|
|
.map((word) => word.charAt(0).toUpperCase())
|
|
.join("");
|
|
};
|
|
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Avatar className="h-10 w-10">
|
|
{sellerImage ? (
|
|
<img src={sellerImage} alt={sellerName} />
|
|
) : (
|
|
<AvatarFallback className="bg-muted text-xs">
|
|
{getInitials(sellerName)}
|
|
</AvatarFallback>
|
|
)}
|
|
</Avatar>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm font-medium truncate">{sellerName}</span>
|
|
{verified && (
|
|
<Badge variant="secondary" className="h-4 px-1.5 text-xs">
|
|
<CheckCircle2 className="h-3 w-3 mr-1" />
|
|
Verificado
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<User className="h-3 w-3" />
|
|
<span className="truncate">{serverName}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|