Wind Power Education - Copy this React, Tailwind Component to your project

import-React,-{-useState,-useEffect,-useMemo-}-from-'react';-import-{-Wind,-Zap,-Gauge,-Info-}-from-'lucide-react';-import-{-LineChart,-Line,-XAxis,-YAxis,-Tooltip,-ResponsiveContainer,-CartesianGrid,-Legend-}-from-'recharts';-import-{-Alert,-AlertDescription-}-from-'@/components/ui/alert';-import-{-Card,-CardContent,-CardHeader,-CardTitle-}-from-'@/components/ui/card';-import-{-Tabs,-TabsContent,-TabsList,-TabsTrigger-}-from-'@/components/ui/tabs';-const-AdvancedWindPowerEducation-=-()-=>-{-//-Initial-state-setup-const-[windSpeed,-setWindSpeed]-=-useState(15);-const-[windDirection,-setWindDirection]-=-useState(0);-const-[millRotation,-setMillRotation]-=-useState(0);-const-[millYaw,-setMillYaw]-=-useState(0);-const-[millPower,-setMillPower]-=-useState(0);-const-[millEfficiency,-setMillEfficiency]-=-useState(0);-const-[airDensity,-setAirDensity]-=-useState(1.225);-const-[temperature,-setTemperature]-=-useState(20);-const-[pressure,-setPressure]-=-useState(1013.25);-const-[performanceData,-setPerformanceData]-=-useState([]);-const-[sailAngle,-setSailAngle]-=-useState(15);-const-[autoAdjust,-setAutoAdjust]-=-useState(false);-const-[alerts,-setAlerts]-=-useState([]);-//-Constants-for-calculations-const-constants-=-useMemo(()-=>-({-millSailLength:-10,-millSails:-4,-baseEfficiency:-0.35,-optimalSailAngle:-15,-optimalWindSpeed:-8,-millMass:-2500,-gearRatio:-5.2,-millstoneDiameter:-1.4,-woodDensity:-700,-dragCoefficient:-1.2,-frictionCoefficient:-0.15,-reynoldsNumber:-windSpeed-*-10-/-(15e-6),-powerCoefficient:-0.4,-turbulenceFactor:-0.1-}),-[windSpeed]);-//-Mill-component-const-Mill-=-({-rotation,-yaw,-sailAngle,-windSpeed-})-=>-(-<svg-viewBox="0-0-400-500"-className="w-full-h-96">-{/*-Ground-shadow-*/}-<ellipse-cx="200"-cy="480"-rx="80"-ry="20"-fill="rgba(0,0,0,0.1)"-/>-{/*-Mill-base-*/}-<g-transform={`rotate(${yaw}-200-250)`}>-<path-d="M-160-480-L-240-480-L-220-250-L-180-250-Z"-fill="#8B4513"-/>-{/*-Mill-cap-*/}-<g-transform={`translate(200-250)`}>-<path-d="M-30,0-Q0,-40-30,0"-fill="#A0522D"-/>-<circle-cx="0"-cy="0"-r="35"-fill="#8B4513"-/>-<path-d="M-20,-20-L20,-20-L25,0-L-25,0-Z"-fill="#A0522D"-/>-</g>-{/*-Rotating-sail-assembly-*/}-<g-transform={`rotate(${rotation}-200-250)`}>-{/*-Main-shaft-*/}-<rect-x="198"-y="150"-width="4"-height="100"-fill="#8B4513"-/>-{/*-Four-sails-*/}-{[0,-90,-180,-270].map(angle-=>-(-<g-key={angle}-transform={`rotate(${angle}-200-250)`}>-<g-transform={`rotate(${sailAngle}-200-150)`}>-<path-d="M-200-150-L-240-180-L-200-210-L-160-180-Z"-fill="#F5F5DC"-stroke="#8B4513"-strokeWidth="2"-/>-<path-d={`M-200-150-C-${220-+-windSpeed/2}-${165-+-windSpeed/4}-${230-+-windSpeed/2}-${180-+-windSpeed/4}-200-210`}-fill="#F5F5F5"-opacity="0.8"-/>-</g>-</g>-))}-</g>-{/*-Door-and-windows-*/}-<rect-x="190"-y="400"-width="20"-height="40"-fill="#A0522D"-/>-<rect-x="185"-y="320"-width="15"-height="15"-fill="#87CEEB"-/>-<rect-x="200"-y="320"-width="15"-height="15"-fill="#87CEEB"-/>-</g>-{/*-Wind-direction-indicator-*/}-<g-transform={`translate(350-50)`}>-<circle-cx="0"-cy="0"-r="20"-fill="white"-stroke="#666"-/>-<path-d={`M-0--15-L-${Math.sin(windDirection-*-Math.PI/180)-*-15}-${-Math.cos(windDirection-*-Math.PI/180)-*-15}`}-stroke="#666"-strokeWidth="2"-/>-</g>-</svg>-);-//-Update-calculations-useEffect(()-=>-{-const-interval-=-setInterval(()-=>-{-//-Calculate-air-density-const-newAirDensity-=-(pressure-*-100)-/-(287.05-*-(temperature-+-273.15));-setAirDensity(newAirDensity);-//-Power-calculations-const-sailArea-=-constants.millSailLength-*-constants.millSailLength-*-constants.millSails;-const-windAngleEfficiency-=-Math.cos(Math.abs(windDirection---millYaw)-*-Math.PI/180);-const-sailAngleEfficiency-=-Math.cos((sailAngle---constants.optimalSailAngle)-*-Math.PI/180);-const-turbulenceEffect-=-1---(constants.turbulenceFactor-*-Math.random());-//-Auto-adjustment-if-(autoAdjust)-{-const-targetYaw-=-windDirection;-const-yawDifference-=-targetYaw---millYaw;-setMillYaw(prev-=>-prev-+-(yawDifference-*-0.1));-const-optimalAngle-=-15-+-(windSpeed->-constants.optimalWindSpeed-?-5-:--5);-setSailAngle(prev-=>-prev-+-(optimalAngle---prev)-*-0.1);-}-//-Calculate-power-const-theoreticalPower-=-0.5-*-newAirDensity-*-sailArea-*-Math.pow(windSpeed,-3);-const-betsCorrectedPower-=-theoreticalPower-*-constants.powerCoefficient;-const-actualPower-=-betsCorrectedPower-*-constants.baseEfficiency-*-windAngleEfficiency-*-sailAngleEfficiency-*-turbulenceEffect;-setMillPower(actualPower-/-1000);-setMillEfficiency((actualPower-/-theoreticalPower)-*-100);-//-Update-rotation-const-rotationSpeed-=-(windSpeed-*-windAngleEfficiency-*-sailAngleEfficiency)-/-(constants.gearRatio-*-0.3)-*-turbulenceEffect;-setMillRotation(prev-=>-(prev-+-rotationSpeed)-%-360);-//-Update-performance-data-const-newPerformanceData-=-{-time:-Date.now(),-power:-actualPower-/-1000,-efficiency:-(actualPower-/-theoreticalPower)-*-100,-windSpeed,-temperature,-pressure,-turbulence:-turbulenceEffect-};-setPerformanceData(prev-=>-[...prev.slice(-60),-newPerformanceData]);-//-Alert-system-if-(windSpeed->-25)-{-setAlerts(prev-=>-[...prev,-{-id:-Date.now(),-type:-'warning',-message:-'High-wind-speed-detected.-Consider-reducing-sail-area.'-}].slice(-5));-}-},-50);-return-()-=>-clearInterval(interval);-},-[windSpeed,-windDirection,-sailAngle,-temperature,-pressure,-millYaw,-constants,-autoAdjust]);-return-(-<div-className="w-full-max-w-7xl-mx-auto-p-6-space-y-6-bg-gray-50">-<Card>-<CardHeader>-<div-className="flex-items-center-gap-2">-<Wind-className="h-6-w-6"-/>-<CardTitle-className="text-3xl">Interactive-Wind-Power-Laboratory</CardTitle>-</div>-</CardHeader>-<CardContent>-<div-className="grid-grid-cols-1-lg:grid-cols-2-gap-8">-{/*-Main-visualization-*/}-<div-className="space-y-6">-<div-className="relative-bg-gray-50-rounded-lg-p-4">-<Mill-rotation={millRotation}-yaw={millYaw}-sailAngle={sailAngle}-windSpeed={windSpeed}-/>-</div>-{/*-Power-indicators-*/}-<div-className="grid-grid-cols-2-gap-4">-<Card>-<CardContent-className="pt-6">-<div-className="flex-items-center-gap-2">-<Zap-className="h-5-w-5-text-green-500"-/>-<div>-<p-className="text-sm-font-medium">Power-Output</p>-<p-className="text-2xl-font-bold">{millPower.toFixed(2)}-kW</p>-</div>-</div>-</CardContent>-</Card>-<Card>-<CardContent-className="pt-6">-<div-className="flex-items-center-gap-2">-<Gauge-className="h-5-w-5-text-blue-500"-/>-<div>-<p-className="text-sm-font-medium">Efficiency</p>-<p-className="text-2xl-font-bold">{millEfficiency.toFixed(1)}%</p>-</div>-</div>-</CardContent>-</Card>-</div>-{/*-Alerts-*/}-{alerts.length->-0-&&-(-<div-className="space-y-2">-{alerts.map(alert-=>-(-<Alert-key={alert.id}-variant={alert.type}>-<Info-className="h-4-w-4"-/>-<AlertDescription>{alert.message}</AlertDescription>-</Alert>-))}-</div>-)}-</div>-{/*-Controls-*/}-<div-className="space-y-6">-<Card>-<CardHeader>-<CardTitle>Wind-Controls</CardTitle>-</CardHeader>-<CardContent-className="space-y-4">-<div>-<div-className="flex-justify-between-mb-2">-<span-className="text-sm-font-medium">Wind-Speed</span>-<span-className="text-sm-text-gray-500">{windSpeed}-m/s</span>-</div>-<input-type="range"-min="0"-max="30"-step="0.5"-value={windSpeed}-onChange={(e)-=>-setWindSpeed(Number(e.target.value))}-className="w-full"-/>-</div>-<div>-<div-className="flex-justify-between-mb-2">-<span-className="text-sm-font-medium">Wind-Direction</span>-<span-className="text-sm-text-gray-500">{windDirection}°</span>-</div>-<input-type="range"-min="0"-max="360"-value={windDirection}-onChange={(e)-=>-setWindDirection(Number(e.target.value))}-className="w-full"-/>-</div>-<div>-<div-className="flex-justify-between-mb-2">-<span-className="text-sm-font-medium">Sail-Angle</span>-<span-className="text-sm-text-gray-500">{sailAngle}°</span>-</div>-<input-type="range"-min="0"-max="45"-value={sailAngle}-onChange={(e)-=>-setSailAngle(Number(e.target.value))}-className="w-full"-/>-</div>-<div-className="flex-items-center-justify-between">-<span-className="text-sm-font-medium">Auto-Optimization</span>-<input-type="checkbox"-checked={autoAdjust}-onChange={(e)-=>-setAutoAdjust(e.target.checked)}-className="toggle"-/>-</div>-</CardContent>-</Card>-{/*-Performance-Graph-*/}-<Card>-<CardHeader>-<CardTitle>Performance-Analysis</CardTitle>-</CardHeader>-<CardContent>-<div-className="h-64">-<ResponsiveContainer-width="100%"-height="100%">-<LineChart-data={performanceData}>-<CartesianGrid-strokeDasharray="3-3"-/>-<XAxis-dataKey="time"-type="number"-domain={['auto',-'auto']}-tickFormatter={(time)-=>-new-Date(time).toLocaleTimeString()}-/>-<YAxis-yAxisId="power"-orientation="left"-/>-<YAxis-yAxisId="efficiency"-orientation="right"-/>-<Tooltip-labelFormatter={(time)-=>-new-Date(time).toLocaleTimeString()}-formatter={(value,-name)-=>-[value.toFixed(2),-name]}-/>-<Legend-/>-<Line-yAxisId="power"-type="monotone"-dataKey="power"-stroke="#10B981"-dot={false}-name="Power-(kW)"-/>-<Line-yAxisId="efficiency"-type="monotone"-dataKey="efficiency"-stroke="#6366F1"-dot={false}-name="Efficiency-(%)"-/>-</LineChart>-</ResponsiveContainer>-</div>-</CardContent>-</Card>-</div>-</div>-</CardContent>-</Card>-</div>-);-};-export-default-AdvancedWindPowerEducation;-I-want-to-improve-its-interface.