| // src/components/tools/ToolStatsSidebar.tsx | |
| import { Download, Star, Sparkles, Package, Tag } from "lucide-react"; | |
| interface ToolStatsSidebarProps { | |
| totalTools: number; | |
| featuredCount: number; | |
| publicCount: number; | |
| categoriesCount: number; | |
| totalDownloads: number; | |
| avgRating?: number; | |
| } | |
| export function ToolStatsSidebar({ | |
| totalTools, | |
| featuredCount, | |
| publicCount, | |
| categoriesCount, | |
| totalDownloads, | |
| avgRating, | |
| }: ToolStatsSidebarProps) { | |
| return ( | |
| <div className="relative overflow-hidden rounded-[1.75rem] border border-white/10 bg-slate-950/40 p-5 text-white shadow-[0_20px_60px_rgba(15,23,42,0.22)]"> | |
| <div className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-white/40 to-transparent" /> | |
| <div className="text-sm font-semibold tracking-wide text-white/90">Store stats</div> | |
| <div className="mt-4 space-y-3"> | |
| <div className="grid grid-cols-2 gap-3 text-sm"> | |
| <div className="rounded-2xl bg-white/5 p-3 ring-1 ring-white/5"> | |
| <div className="flex items-center gap-2 text-white/50 text-xs"> | |
| <Package className="h-3 w-3" /> Tools | |
| </div> | |
| <div className="text-xl font-bold">{totalTools}</div> | |
| </div> | |
| <div className="rounded-2xl bg-white/5 p-3 ring-1 ring-white/5"> | |
| <div className="flex items-center gap-2 text-white/50 text-xs"> | |
| <Sparkles className="h-3 w-3" /> Featured | |
| </div> | |
| <div className="text-xl font-bold">{featuredCount}</div> | |
| </div> | |
| <div className="rounded-2xl bg-white/5 p-3 ring-1 ring-white/5"> | |
| <div className="flex items-center gap-2 text-white/50 text-xs"> | |
| <Tag className="h-3 w-3" /> Categories | |
| </div> | |
| <div className="text-xl font-bold">{categoriesCount}</div> | |
| </div> | |
| <div className="rounded-2xl bg-white/5 p-3 ring-1 ring-white/5"> | |
| <div className="flex items-center gap-2 text-white/50 text-xs">Public</div> | |
| <div className="text-xl font-bold">{publicCount}</div> | |
| </div> | |
| </div> | |
| <div className="rounded-2xl bg-white/5 p-3 ring-1 ring-white/5"> | |
| <div className="flex items-center gap-2 text-white/50 text-xs"> | |
| <Download className="h-3 w-3" /> Total Downloads | |
| </div> | |
| <div className="text-xl font-bold">{totalDownloads.toLocaleString()}</div> | |
| </div> | |
| {avgRating !== undefined && ( | |
| <div className="rounded-2xl bg-white/5 p-3 ring-1 ring-white/5"> | |
| <div className="flex items-center gap-2 text-white/50 text-xs"> | |
| <Star className="h-3 w-3" /> Avg Rating | |
| </div> | |
| <div className="text-xl font-bold">{avgRating.toFixed(1)}</div> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } | |
Xet Storage Details
- Size:
- 2.87 kB
- Xet hash:
- 2003aaed33556d33f3dc3b25dc5ca6a6a700555b06c5a7f46fa3656b80fcbb44
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.