Use Habbo currency PNGs for admin credits, duckets, and diamonds icons.

Co-authored-by: Cursor <[email protected]>

src/components/admin/catalog/items-shop-preview.tsx

@@ -3,6 +3,10 @@
 import { Crown, Image as ImageIcon, Package, Sparkles } from "lucide-react";
 import type { CatalogItemData } from "@/app/admin/catalog/[id]/catalog-items-table/types";
 import { getPointsLabel } from "@/app/admin/catalog/[id]/catalog-items-table/types";
+import {
+	CurrencyIcon,
+	currencyKindFromPointsType,
+} from "@/components/shared/currency-icon";
 import { Badge } from "@/components/ui/badge";
 import { getHabboCdnIconUrl, getLocalIconUrl } from "@/lib/furni/classname";
 import { cn } from "@/lib/utils";
@@ -113,13 +117,20 @@ export function ItemsShopPreview({
 								</p>
 								<div className="mt-0.5 flex items-center gap-1.5 text-[10px] font-mono">
 									{item.costCredits > 0 && (
-										<span className="text-[var(--admin-warning)] dark:text-[var(--admin-warning)]">
-											{item.costCredits}c
+										<span className="inline-flex items-center gap-0.5 text-[var(--admin-warning)] dark:text-[var(--admin-warning)]">
+											<CurrencyIcon kind="credits" size={12} />
+											{item.costCredits}
 										</span>
 									)}
 									{item.costPoints > 0 && (
-										<span className={points.color}>
-											{item.costPoints} {points.label.slice(0, 3)}
+										<span
+											className={`inline-flex items-center gap-0.5 ${points.color}`}
+										>
+											<CurrencyIcon
+												kind={currencyKindFromPointsType(item.pointsType)}
+												size={12}
+											/>
+											{item.costPoints}
 										</span>
 									)}
 									{item.costCredits === 0 && item.costPoints === 0 && (