"use client"; import Image from "next/image"; import React, { useRef, useState, useEffect } from "react"; import { motion, useMotionValue, useSpring, useTransform, AnimatePresence } from "framer-motion"; import { cn } from "@/lib/utils"; import { PiSquaresFourBold, PiChartLineUpBold, PiWalletBold, PiGearSixBold, PiBellBold, PiMagnifyingGlassBold, PiArrowUpRightBold, PiArrowDownLeftBold, PiXBold, PiCreditCardBold, } from "react-icons/pi"; export interface TransactionData { id: string | number; title: string; date: string; amount: string; icon: string; positive?: boolean; type?: "incomes" | "expenses"; } const defaultTransactions: TransactionData[] = [ { id: 1, title: "Tech Store", date: "Today, 14:20", amount: "-$1,299.00", icon: "T", type: "expenses", positive: false }, { id: 2, title: "Salary Deposit", date: "Yesterday", amount: "+$4,500.00", icon: "S", type: "incomes", positive: true }, { id: 3, title: "Figma Premium", date: "Yesterday", amount: "-$15.00", icon: "F", type: "expenses", positive: false }, { id: 4, title: "Client Payment", date: "Oct 22", amount: "+$850.00", icon: "C", type: "incomes", positive: true }, { id: 5, title: "Uber Ride", date: "Oct 21", amount: "-$24.50", icon: "U", type: "expenses", positive: false }, ]; export interface TabletDashboardProps extends Omit, "style"> { userName?: string; userAvatar?: string; totalBalance?: string; income?: string; expenses?: string; cardNumber?: string; cardExpiry?: string; recentTransactions?: TransactionData[]; defaultTab?: "dashboard" | "analytics" | "wallet" | "settings"; quickTransferAvatars?: string[]; quickTransferTitle?: string; marketOverviewTitle?: string; walletPrimaryBalance?: string; walletSecondaryBalance?: string; } export const TabletDashboard = ({ userName = "Alex Perez", userAvatar = "https://i.pravatar.cc/150?img=11", totalBalance = "$48,294.00", income = "$12,450", expenses = "$3,820", cardNumber = "4092", cardExpiry = "12/28", recentTransactions = defaultTransactions, defaultTab = "dashboard", quickTransferAvatars = [ "https://i.pravatar.cc/150?img=32", "https://i.pravatar.cc/150?img=12", "https://i.pravatar.cc/150?img=47" ], quickTransferTitle = "Quick Transfer", marketOverviewTitle = "Market Overview", walletPrimaryBalance = "$24,500.00", walletSecondaryBalance = "$8,230.50", className, ...props }: TabletDashboardProps) => { const containerRef = useRef(null); const [mounted, setMounted] = useState(false); useEffect(() => { const timer = setTimeout(() => setMounted(true), 0); return () => clearTimeout(timer); }, []); const mouseX = useMotionValue(0); const mouseY = useMotionValue(0); const rotateX = useSpring(useTransform(mouseY, [-0.5, 0.5], [5, -5]), { damping: 40, stiffness: 150 }); const rotateY = useSpring(useTransform(mouseX, [-0.5, 0.5], [-5, 5]), { damping: 40, stiffness: 150 }); const lightX = useSpring(useTransform(mouseX, [-0.5, 0.5], [100, -100]), { damping: 30, stiffness: 200 }); const lightY = useSpring(useTransform(mouseY, [-0.5, 0.5], [100, -100]), { damping: 30, stiffness: 200 }); const handleMouseMove = (e: React.MouseEvent) => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const width = rect.width; const height = rect.height; const mouseXPos = e.clientX - rect.left; const mouseYPos = e.clientY - rect.top; mouseX.set(mouseXPos / width - 0.5); mouseY.set(mouseYPos / height - 0.5); }; const handleMouseLeave = () => { mouseX.set(0); mouseY.set(0); }; const [activeTab, setActiveTab] = useState(defaultTab); const [wallpaper, setWallpaper] = useState("cream"); const [isDarkMode, setIsDarkMode] = useState(false); const [walletFilter, setWalletFilter] = useState("all"); if (!mounted) return null; return (

{wallpaper === "live" && } {wallpaper === "waves" && } {wallpaper === "vortex" && } {wallpaper === "aurora" && (

)}

{activeTab} Tuesday, 24 October

{activeTab === "dashboard" && (

Total Balance

{totalBalance}

Income

{income}

Expenses

{expenses}

{quickTransferTitle}

{quickTransferAvatars.map((src, idx) => ( Avatar

))}

{marketOverviewTitle}

{[30, 45, 35, 70, 55, 90, 60].map((h, i) => ( ))}

S&P 500 +2.4%

My Card

VISA

**** **** **** {cardNumber}

{userName} {cardExpiry}

Recent

{recentTransactions.slice(0, 4).map(t => ( ))}

)} {activeTab === "settings" && (

Appearance

Customize your tablet experience and wallpapers.

Dark Mode

Switch between light and dark themes using the Glass Toggle.

Wallpapers

)} {activeTab === "wallet" && (

VISA

Balance

{walletPrimaryBalance}

**** **** **** 4092

12/28

Mastercard

Balance

{walletSecondaryBalance}

**** **** **** 8831

05/26

History

{["all", "incomes", "expenses"].map((f) => ( ))}

{recentTransactions.filter(item => walletFilter === "all" || item.type === walletFilter).map((t) => ( ))}

)} {(activeTab === "analytics") && (

{activeTab}

Coming soon in the next update.

)}

); }; function NavItem({ icon, active, isDark, onClick }: { icon: React.ReactNode, active: boolean, isDark?: boolean, onClick: () => void }) { return ( ); } function TransactionItem({ title, date, amount, icon, positive, isDark }: { title: string, date: string, amount: string, icon: string, positive?: boolean, isDark?: boolean }) { return (

{icon}

{title}

{date}

{amount}

); } function LiveCanvasBackground({ isDark }: { isDark?: boolean }) { const canvasRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext("2d"); if (!ctx) return; let width = canvas.width = canvas.offsetWidth; let height = canvas.height = canvas.offsetHeight; const particles: {x: number, y: number, vx: number, vy: number, size: number}[] = []; const numParticles = 80; for (let i = 0; i < numParticles; i++) { particles.push({ x: Math.random() * width, y: Math.random() * height, vx: (Math.random() - 0.5) * 0.8, vy: (Math.random() - 0.5) * 0.8, size: Math.random() * 2.5 + 1 }); } let animationFrameId: number; const render = () => { ctx.clearRect(0, 0, width, height); particles.forEach((p, i) => { p.x += p.vx; p.y += p.vy; if (p.x < 0 || p.x> width) p.vx *= -1; if (p.y < 0 || p.y> height) p.vy *= -1; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fillStyle = isDark ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.35)"; ctx.fill(); for (let j = i + 1; j < numParticles; j++) { const p2 = particles[j]; const dist = Math.sqrt((p.x - p2.x)**2 + (p.y - p2.y)**2); if (dist < 180) { ctx.beginPath(); ctx.moveTo(p.x, p.y); ctx.lineTo(p2.x, p2.y); ctx.strokeStyle = isDark ? `rgba(255, 255, 255, ${0.5 * (1 - dist / 180)})` : `rgba(0, 0, 0, ${0.2 * (1 - dist / 180)})`; ctx.lineWidth = 1.2; ctx.stroke(); } } }); animationFrameId = requestAnimationFrame(render); }; render(); const handleResize = () => { if (!canvas) return; width = canvas.width = canvas.offsetWidth; height = canvas.height = canvas.offsetHeight; }; window.addEventListener("resize", handleResize); return () => { window.removeEventListener("resize", handleResize); cancelAnimationFrame(animationFrameId); }; }, [isDark]); return

Compatibility Notice