feat: add MCP marketplace and custom scrollbar styles

Add comprehensive CSS styles for the MCP Marketplace interface, including card hover effects, responsive grid layout, modal backdrop blur, category badges, rating stars, install buttons, and loading animations. Also include custom scrollbar styling for the model selector to enhance user experience and visual consistency.
This commit is contained in:
Evandro Fonseca Junior committed 2025-10-28 19:40:45 -03:00
1 parent d5dd3a9f09
commit ce010d39ee
31 files changed
+4127 -45

No files matched your search

+74
View File
@@ -0,0 +1,74 @@
"use client";
import { Star } from "lucide-react";
interface MCPRatingStarsProps {
rating: number;
size?: "sm" | "md" | "lg";
showNumber?: boolean;
}
export function MCPRatingStars({
rating,
size = "sm",
showNumber = true,
}: MCPRatingStarsProps) {
const sizeClasses = {
sm: "h-3 w-3",
md: "h-4 w-4",
lg: "h-5 w-5",
};
const stars = [];
const fullStars = Math.floor(rating);
const hasHalfStar = rating % 1 >= 0.5;
// Renderizar estrelas cheias
for (let i = 0; i < fullStars; i++) {
stars.push(
<Star
key={i}
className={`${sizeClasses[size]} fill-yellow-400 text-yellow-400`}
/>
);
}
// Renderizar meia estrela se necessário
if (hasHalfStar) {
stars.push(
<div key="half" className="relative">
<Star className={`${sizeClasses[size]} text-gray-300`} />
<div
className="absolute inset-0 overflow-hidden"
style={{ width: "50%" }}
>
<Star
className={`${sizeClasses[size]} fill-yellow-400 text-yellow-400`}
/>
</div>
</div>
);
}
// Renderizar estrelas vazias
const emptyStars = 5 - Math.ceil(rating);
for (let i = 0; i < emptyStars; i++) {
stars.push(
<Star
key={`empty-${i}`}
className={`${sizeClasses[size]} text-gray-300`}
/>
);
}
return (
<div className="flex items-center gap-1">
<div className="flex">{stars}</div>
{showNumber && (
<span className="text-sm text-[var(--muted-foreground)] ml-1">
{rating.toFixed(1)}
</span>
)}
</div>
);
}