"use client"; import React, { useState } from "react"; import { motion, Variants } from "framer-motion"; import { Activity, ArrowUpRight, Cpu, HardDrive, LayoutGrid } from "lucide-react"; // --- TYPES & INTERFACES --- export type NeumorphicIconType = "cpu" | "drive" | "grid"; export interface NeumorphicCardProps { label: string; value: string; unit?: string; trend: string; isPositive?: boolean; icon?: NeumorphicIconType; className?: string; } export const NeumorphicDashboardCard = ({ label, value, unit, trend, isPositive = true, icon = "cpu", className, }: NeumorphicCardProps) => { const [isPressed, setIsPressed] = useState(false); // Icon Mapping const icons: Record = { cpu: Cpu, drive: HardDrive, grid: LayoutGrid, }; const IconComponent = icons[icon]; // --- ANIMATIONS --- const cardVariants: Variants = { initial: { scale: 1, boxShadow: "10px 10px 20px rgba(0,0,0,0.03), -10px -10px 20px rgba(255,255,255,0.8)" }, hover: { scale: 1.02, boxShadow: "15px 15px 30px rgba(0,0,0,0.05), -15px -15px 30px rgba(255,255,255,0.9)" }, pressed: { scale: 0.98, boxShadow: "inset 6px 6px 12px rgba(0,0,0,0.08), inset -6px -6px 12px rgba(255,255,255,0.8)" } }; // Dark Mode Shadow definitions to avoid long class strings const darkShadows = "dark:shadow-[8px_8px_16px_rgba(0,0,0,0.4),-8px_-8px_16px_rgba(255,255,255,0.02)]"; return ( setIsPressed(true)} onMouseUp={() => setIsPressed(false)} onMouseLeave={() => setIsPressed(false)} className={` relative w-full max-w-[280px] aspect-square rounded-[2.5rem] p-8 flex flex-col font-sans select-none cursor-pointer bg-[#F0F2F5] dark:bg-[#0F0F0F] transition-shadow duration-300 ${darkShadows} ${className || ""} `} > {/* 1. TOP BAR: ICON & TREND */}

{trend}

{/* 2. MAIN CONTENT */}

{label}

{value}

{unit && ( {unit} )}

{/* 3. INTERACTIVE CORNER BUTTON */}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function NeumorphicDashboardDemo() { return (

); }