Untitled
"use client" import React, { useEffect, useState } from 'react'; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"; import { TreePine, Leaf } from "lucide-react"; import { Progress } from "@/components/ui/progress"; interface TreeVisualizationProps { impact: { co2_saved: number; trees_saved: number; }; } const TreeVisualization: React.FC<TreeVisualizationProps> = ({ impact }) => { const [scale, setScale] = useState(0); const maxImpact = 10; // kg of CO2 for full size // This useEffect now properly updates when impact changes useEffect(() => { const calculatedScale = Math.min((impact.co2_saved / maxImpact) * 100, 100); // Force a re-render by creating a new state value setScale(prevScale => { if (prevScale !== calculatedScale) { return calculatedScale; } return prevScale; }); }, [impact.co2_saved]); // Explicitly depend on co2_saved return ( <CardContent className="flex flex-col items-center space-y-4"> <div className="relative w-64 h-64 flex items-center justify-center"> <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000" style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }} > {/* Tree trunk */} <path d="M45 90 L55 90 L53 60 L47 60 Z" fill="#8B4513" className="transition-all duration-1000" style={{ transform: `scaleY(${0.8 + (scale * 0.2) / 100})`, transformOrigin: 'center bottom' }} /> {/* Tree foliage layers */} <g className="transition-all duration-1000"> {/* Bottom layer */} <path d="M20 60 L80 60 L50 30 Z" fill="#2F855A" opacity={scale >= 20 ? "1" : "0"} className="transition-all duration-500" /> {/* Middle layer */} <path d="M25 45 L75 45 L50 20 Z" fill="#276749" opacity={scale >= 50 ? "1" : "0"} className="transition-all duration-500" /> {/* Top layer */} <path d="M30 30 L70 30 L50 10 Z" fill="#22543D" opacity={scale >= 80 ? "1" : "0"} className="transition-all duration-500" /> {/* Decorative elements that appear at full growth */} {scale >= 95 && ( <> {/* Small leaves */} <circle cx="35" cy="50" r="2" fill="#48BB78" /> <circle cx="65" cy="50" r="2" fill="#48BB78" /> <circle cx="50" cy="25" r="2" fill="#48BB78" /> {/* Birds */} <path d="M30 35 Q35 32 40 35" stroke="#4A5568" fill="none" strokeWidth="1" /> <path d="M60 40 Q65 37 70 40" stroke="#4A5568" fill="none" strokeWidth="1" /> </> )} </g> </svg> </div> <div className="w-full space-y-2"> <div className="flex justify-between text-sm"> <span>Growth Progress</span> <span>{Math.round(scale)}%</span> </div> <Progress value={scale} className="h-2" /> </div> <div className="grid grid-cols-2 gap-4 text-sm text-muted-foreground"> <div className="flex items-center gap-2"> <Leaf className="h-4 w-4 text-green-500" /> <span>{impact.co2_saved.toFixed(2)} kg CO₂ saved</span> </div> <div className="flex items-center gap-2"> <TreePine className="h-4 w-4 text-green-700" /> <span>{impact.trees_saved.toFixed(3)} trees preserved</span> </div> </div> {scale >= 100 && ( <div className="text-sm font-medium text-green-600"> 🎉 Maximum impact reached! Keep up the great work! </div> )} </CardContent> ); }; export default TreeVisualization;
Leave a Comment