Create weathericon.tsx

weathericon.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import type { Weather } from '../types';
+
+interface WeatherIconProps {
+  condition: Weather['condition'];
+  className?: string;
+}
+
+const WeatherIcon: React.FC<WeatherIconProps> = ({ condition, className = 'w-16 h-16 text-yellow-500' }) => {
+  switch (condition) {
+    case 'Sunny':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+      );
+    case 'Cloudy':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" className={`${className} text-gray-500`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+        </svg>
+      );
+    case 'Rainy':
+      return (
+        <svg xmlns="http://www.w3.org/2000/svg" className={`${className} text-blue-500`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M19.428 15.428a8 8 0 00-14.856 0M8 17h8M9 21h6" />
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 12v3m-2-3v3m4-3v3" />
+        </svg>
+      );
+    case 'Snowy':
+       return (
+        <svg xmlns="http://www.w3.org/2000/svg" className={`${className} text-cyan-400`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm0 18a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM22 12a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM4 12a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm15.657-5.657a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zM6.343 17.657a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 0zm11.314 0a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 011.414-1.414l.707.707zM6.343 6.343a1 1 0 01-1.414 1.414l-.707-.707a1 1 0 011.414-1.414l.707.707z" />
+        </svg>
+      );
+    default:
+      return (
+         <svg xmlns="http://www.w3.org/2000/svg" className={`${className} text-gray-500`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
+        </svg>
+      );
+  }
+};
+
+export default WeatherIcon;