refactor(mascot): replace ChibiMascot SVG with MascotImage PNG and simplify empty states

This commit is contained in:
MythEclipse
2026-06-03 13:56:11 +07:00
parent 2ea0ea5810
commit bb65178210
9 changed files with 54 additions and 22 deletions
+3 -3
View File
@@ -2,7 +2,7 @@ import { motion } from "framer-motion";
import { BarChart3, MessageSquare, Radio } from "lucide-react";
import type { DashboardTab } from "../entities/ui/types";
import { cn } from "../shared/lib/utils";
import { ChibiMascot } from "./mascot/ChibiMascot";
import { MascotImage } from "./mascot/MascotImage";
const navItems: Array<{ id: DashboardTab; label: string; icon: typeof Radio }> =
[
@@ -84,9 +84,9 @@ export function Sidebar({
{/* Spacer pushes mascot to bottom */}
<div className="flex-1" />
{/* Chibi mascot */}
{/* Mascot PNG */}
<div className="flex justify-center pb-4">
<ChibiMascot size="sm" variant="idle" />
<MascotImage size="sm" />
</div>
</motion.nav>
);
@@ -0,0 +1,40 @@
/**
* MascotImage — Anime mascot PNG from GitHub CDN
* Replaces ChibiMascot SVG component with external PNG asset
*/
interface MascotImageProps {
size?: "sm" | "md" | "lg";
className?: string;
}
const sizeMap = {
sm: "w-16 h-auto",
md: "w-32 h-auto",
lg: "w-48 h-auto",
};
export function MascotImage({ size = "md", className = "" }: MascotImageProps) {
const sizeClass = sizeMap[size];
return (
<img
src="https://raw.githubusercontent.com/IMPHNEN/imphnen-frontend-service/develop/apps/dimentorin/public/image/mascot-1.png"
alt="Mascot"
className={`object-contain drop-shadow-md ${sizeClass} ${className}`}
/>
);
}
/**
* EmptyStateMascot — Mascot for empty states
* Replaces ChibiMascot when showing empty data states
*/
export function EmptyStateMascot() {
return (
<div className="flex flex-col items-center justify-center gap-4 py-12">
<MascotImage size="md" className="opacity-60" />
<p className="text-sm text-muted-foreground">No data to display</p>
</div>
);
}