54 lines
2.4 KiB
TypeScript
54 lines
2.4 KiB
TypeScript
import { CloudRain, Sun, Thermometer, Wind } from 'lucide-react';
|
|
|
|
interface WeatherProps {
|
|
data: {
|
|
condition: string;
|
|
temp: string;
|
|
high: string;
|
|
low: string;
|
|
forecast: string;
|
|
color: string;
|
|
};
|
|
}
|
|
|
|
export default function WeatherWidget({ data }: WeatherProps) {
|
|
const isAlert = data.color === 'amber' || data.color === 'red';
|
|
|
|
return (
|
|
<div className={`rounded-xl border p-5 shadow-sm transition-all ${
|
|
isAlert ? 'border-amber-200 bg-amber-50/30 dark:border-amber-900/50 dark:bg-amber-900/10' : 'border-gray-100 bg-white dark:border-gray-800 dark:bg-gray-900'
|
|
}`}>
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`p-2.5 rounded-lg ${
|
|
isAlert ? 'bg-amber-100 text-amber-600 dark:bg-amber-900/30 dark:text-amber-500' : 'bg-blue-50 text-blue-500 dark:bg-blue-900/30 dark:text-blue-400'
|
|
}`}>
|
|
{data.condition.toLowerCase().includes('rain') || data.condition.toLowerCase().includes('storm')
|
|
? <CloudRain className="w-6 h-6" />
|
|
: <Sun className="w-6 h-6" />
|
|
}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-gray-900 dark:text-white truncate">{data.condition}</h3>
|
|
<p className="text-sm font-medium text-gray-500">{data.temp}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4 mt-3 sm:mt-0 ml-12 sm:ml-0 text-sm font-medium text-gray-500">
|
|
<div className="flex items-center gap-1.5 tooltip">
|
|
<Thermometer className="w-4 h-4 text-gray-400" />
|
|
<span>H: {data.high} • L: {data.low}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`text-sm py-2.5 px-3 rounded-lg flex items-start gap-2 ${
|
|
isAlert ? 'bg-amber-100/50 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300' : 'bg-gray-50 text-gray-600 dark:bg-gray-800 dark:text-gray-300'
|
|
}`}>
|
|
<Wind className="w-4 h-4 mt-0.5 shrink-0" />
|
|
<p>{data.forecast}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|