refactor(mascot): replace ChibiMascot SVG with MascotImage PNG and simplify empty states
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user