[V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isEdit="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/weather-details.tsx" isMerged="true" export default function WeatherDetails() { return (

Humidity

73%

Pressure

1004 mb

Visibility

Good

Temperature feels like

5°

Precipitation

not expected

Wind

Light winds from the north west

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isFixed="true" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { colors: { blue: { 400: "#6b9bd1", 500: "#4a85c9", 600: "#3a75b9", 700: "#2a65a9", }, green: { 400: "#a2e061", }, background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", chart: { "1": "hsl(var(--chart-1))", "2": "hsl(var(--chart-2))", "3": "hsl(var(--chart-3))", "4": "hsl(var(--chart-4))", "5": "hsl(var(--chart-5))", }, sidebar: { DEFAULT: "hsl(var(--sidebar-background))", foreground: "hsl(var(--sidebar-foreground))", primary: "hsl(var(--sidebar-primary))", "primary-foreground": "hsl(var(--sidebar-primary-foreground))", accent: "hsl(var(--sidebar-accent))", "accent-foreground": "hsl(var(--sidebar-accent-foreground))", border: "hsl(var(--sidebar-border))", ring: "hsl(var(--sidebar-ring))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0", }, to: { height: "var(--radix-accordion-content-height)", }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)", }, to: { height: "0", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [], } export default config [V0_FILE]typescriptreact:file="components/city-search.tsx" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Search, X, MapPin } from "lucide-react" import { cities } from "@/lib/weather-data" interface CitySearchProps { onSelect: (city: string) => void onClose: () => void } export default function CitySearch({ onSelect, onClose }: CitySearchProps) { const [searchTerm, setSearchTerm] = useState("") const [recentSearches, setRecentSearches] = useState([ "London", "Manchester", "Edinburgh", "Birmingham", "Glasgow", ]) const inputRef = useRef(null) useEffect(() => { // Focus the input when component mounts if (inputRef.current) { inputRef.current.focus() } }, []) const filteredCities = searchTerm.length > 0 ? cities.filter((city) => city.toLowerCase().includes(searchTerm.toLowerCase())).slice(0, 10) : [] const handleCitySelect = (city: string) => { // Add to recent searches if not already there if (!recentSearches.includes(city)) { const newRecent = [city, ...recentSearches].slice(0, 5) setRecentSearches(newRecent) // In a real app, you'd save this to localStorage or a database } onSelect(city) } return (

{/* Search Header */}

Search

{/* Search Input */}

setSearchTerm(e.target.value)} /> {searchTerm && ( )}

{/* Search Results */}

{searchTerm.length > 0 ? (

{filteredCities.length > 0 ? ( filteredCities.map((city) => ( )) ) : (

No results found for "{searchTerm}"

)}

) : ( <>

Recent searches

{recentSearches.map((city) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="lib/weather-data.ts" isMerged="true" // List of UK cities export const cities = [ "London", "Manchester", "Birmingham", "Glasgow", "Liverpool", "Bristol", "Edinburgh", "Leeds", "Sheffield", "Newcastle", "Belfast", "Cardiff", "Nottingham", "Southampton", "Aberdeen", "Brighton", "Leicester", "Plymouth", "Coventry", "York", "Swansea", "Reading", "Milton Keynes", "Stoke-on-Trent", "Oxford", "Cambridge", "Norwich", "Exeter", "Bath", "Dundee", ] // Weather data types export type WeatherIconType = "sunny" | "cloudy" | "partly-cloudy" | "rain" | "rain-cloud" | "thunderstorm" | "snow" export interface HourlyData { time: string icon: WeatherIconType temp: number precipitation: number wind: number } export interface WeatherDetails { humidity: string pressure: string visibility: string feelsLike: string precipitation: string wind: string } export interface DayData { day: string date: string icon: WeatherIconType highTemp: number lowTemp: number currentTemp: number hourly: HourlyData[] description: string details: WeatherDetails } // Generate random weather data for a city const generateCityData = (city: string): DayData[] => { const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] const today = new Date() const weatherIcons: WeatherIconType[] = [ "sunny", "cloudy", "partly-cloudy", "rain", "rain-cloud", "thunderstorm", "snow", ] // Seed random based on city name for consistent results const cityHash = city.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0) const seededRandom = (min: number, max: number) => { const x = Math.sin(cityHash + days.indexOf(days[today.getDay()]) * 9999) * 10000 const rand = x - Math.floor(x) return Math.floor(rand * (max - min + 1)) + min } // Base temperature range for the city (varies by city) const baseTemp = 5 + (cityHash % 10) return Array.from({ length: 7 }, (_, i) => { const date = new Date(today) date.setDate(today.getDate() + i) const dayName = i === 0 ? "Today" : days[date.getDay()] const dateStr = `${months[date.getMonth()]} ${date.getDate()}` // Pick a weather pattern for the day const weatherPattern = weatherIcons[seededRandom(0, weatherIcons.length - 1)] // Generate high and low temps const highTemp = baseTemp + seededRandom(0, 10) const lowTemp = baseTemp - seededRandom(0, 5) const currentTemp = Math.round((highTemp + lowTemp) / 2) // Generate hourly data const hourly: HourlyData[] = Array.from({ length: 6 }, (_, j) => { const hour = 10 + j const hourStr = `${hour}:00` // Temperature progression through the day let temp if (j < 2) { temp = lowTemp + Math.round(((highTemp - lowTemp) * (j + 1)) / 6) } else if (j < 4) { temp = highTemp } else { temp = highTemp - Math.round(((highTemp - lowTemp) * (j - 3)) / 6) } // Weather icon - may change throughout the day const hourIcon = j === 2 || j === 3 ? weatherPattern : weatherIcons[seededRandom(0, weatherIcons.length - 1)] // Precipitation chance const precipitation = hourIcon === "rain" || hourIcon === "rain-cloud" || hourIcon === "thunderstorm" ? seededRandom(40, 90) : hourIcon === "cloudy" || hourIcon === "partly-cloudy" ? seededRandom(0, 30) : 0 // Wind speed const wind = seededRandom(2, 8) return { time: hourStr, icon: hourIcon, temp, precipitation, wind, } }) // Generate weather description let description switch (weatherPattern) { case "sunny": description = "Sunny and clear skies" break case "cloudy": description = "Cloudy throughout the day" break case "partly-cloudy": description = "Partly cloudy with sunny intervals" break case "rain": description = "Rain showers expected" break case "rain-cloud": description = "Light rain with cloudy skies" break case "thunderstorm": description = "Thunderstorms possible" break case "snow": description = "Snow showers expected" break default: description = "Mixed conditions" } // Generate weather details const details: WeatherDetails = { humidity: `${seededRandom(50, 90)}%`, pressure: `${seededRandom(990, 1020)} mb`, visibility: weatherPattern === "rain" || weatherPattern === "thunderstorm" || weatherPattern === "snow" ? "Moderate" : weatherPattern === "cloudy" || weatherPattern === "rain-cloud" ? "Good" : "Excellent", feelsLike: `${currentTemp - seededRandom(0, 2)}°`, precipitation: weatherPattern === "rain" || weatherPattern === "rain-cloud" || weatherPattern === "thunderstorm" ? "likely throughout the day" : weatherPattern === "cloudy" || weatherPattern === "partly-cloudy" ? "slight chance" : "not expected", wind: `${seededRandom(0, 1) ? "Light" : "Moderate"} winds from the ${ ["north", "north east", "east", "south east", "south", "south west", "west", "north west"][seededRandom(0, 7)] }`, } return { day: dayName, date: dateStr, icon: weatherPattern, highTemp, lowTemp, currentTemp, hourly, description, details, } }) } // Cache for city data const cityDataCache: Record = {} // Get weather data for a city export const getCityData = (city: string): DayData[] => { // Check if we have cached data if (!cityDataCache[city]) { cityDataCache[city] = generateCityData(city) } return cityDataCache[city] } [V0_FILE]typescriptreact:file="components/share-modal.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef, type RefObject } from "react" import { X, Download, Share2, Check, Camera } from "lucide-react" import html2canvas from "html2canvas" interface ShareModalProps { contentRef: RefObject city: string date: string onClose: () => void } export default function ShareModal({ contentRef, city, date, onClose }: ShareModalProps) { const [imageUrl, setImageUrl] = useState(null) const [isCapturing, setIsCapturing] = useState(true) const [captureError, setCaptureError] = useState(false) const [shareSupported, setShareSupported] = useState(false) const [copied, setCopied] = useState(false) const canvasRef = useRef(null) const previewRef = useRef(null) useEffect(() => { // Check if Web Share API is supported setShareSupported(!!navigator.share) // Delay capture to ensure content is fully rendered const timer = setTimeout(() => { captureContent() }, 500) return () => clearTimeout(timer) }, []) const captureContent = async () => { if (!contentRef.current) { setIsCapturing(false) setCaptureError(true) return } try { setIsCapturing(true) setCaptureError(false) // Clone the content to avoid modifying the original const clonedContent = contentRef.current.cloneNode(true) as HTMLElement // Create a temporary container with the same styles const tempContainer = document.createElement("div") tempContainer.style.position = "absolute" tempContainer.style.left = "-9999px" tempContainer.style.top = "-9999px" tempContainer.style.width = `${contentRef.current.offsetWidth}px` tempContainer.style.height = `${contentRef.current.offsetHeight}px` tempContainer.style.overflow = "hidden" tempContainer.style.background = "linear-gradient(to bottom, #4a85c9, #3a75b9)" // Append the cloned content to the temporary container tempContainer.appendChild(clonedContent) document.body.appendChild(tempContainer) // Capture the content const canvas = await html2canvas(clonedContent, { scale: 2, // Higher resolution useCORS: true, allowTaint: true, backgroundColor: null, logging: false, onclone: (doc) => { // Additional styling for the cloned document if needed const clonedElement = doc.body.querySelector("[data-html2canvas-clone]") if (clonedElement) { clonedElement.classList.add("bg-gradient-to-b", "from-blue-500", "to-blue-600") } }, }) // Clean up document.body.removeChild(tempContainer) canvasRef.current = canvas const url = canvas.toDataURL("image/png") setImageUrl(url) setIsCapturing(false) } catch (error) { console.error("Error capturing content:", error) setIsCapturing(false) setCaptureError(true) } } // Manual capture as fallback const handleManualCapture = () => { captureContent() } const handleDownload = () => { if (imageUrl) { const link = document.createElement("a") link.href = imageUrl link.download = `${city}-weather-${date.replace(/\s/g, "-")}.png` document.body.appendChild(link) link.click() document.body.removeChild(link) } } const handleShare = async () => { if (!imageUrl) return if (navigator.share) { try { // Convert data URL to Blob const response = await fetch(imageUrl) const blob = await response.blob() // Create file from blob const file = new File([blob], `${city}-weather.png`, { type: "image/png" }) // Share the file await navigator.share({ title: `${city} Weather Forecast`, text: `Check out the weather in ${city}!`, files: [file], }) } catch (error) { console.error("Error sharing:", error) // Fallback to copying to clipboard handleCopyToClipboard() } } else { // Fallback for browsers that don't support Web Share API handleCopyToClipboard() } } const handleCopyToClipboard = async () => { if (canvasRef.current && !copied) { try { canvasRef.current.toBlob(async (blob) => { if (blob) { const item = new ClipboardItem({ "image/png": blob }) await navigator.clipboard.write([item]) setCopied(true) setTimeout(() => setCopied(false), 2000) } }) } catch (error) { console.error("Error copying to clipboard:", error) } } } const handleWhatsAppShare = () => { if (imageUrl) { // For WhatsApp, we need to open in a new tab since we can't directly share the image // The user will need to download the image first and then share it manually window.open(`https://wa.me/?text=Check out the weather in ${city}!`, "_blank") } } // Create a simple weather preview as fallback const renderFallbackPreview = () => { return (

{city}

{date}

6°

Partly Cloudy

High: 9° Low: 2°

Humidity

73%

Wind

4 mph

Precip

) } return (

{/* Header */}

Share Weather

{/* Preview */}

Weather in {city}

{isCapturing ? (

Generating preview...

) : imageUrl ? (

) : captureError ? (

Could not generate preview automatically

{renderFallbackPreview()}

) : (

Failed to generate preview

)}

{/* Share Options */}

{shareSupported ? ( ) : ( )}

) } [V0_FILE]json:file="package.json" isFixed="true" isQuickEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@radix-ui/react-accordion": "^1.2.2", "@radix-ui/react-alert-dialog": "^1.1.4", "@radix-ui/react-aspect-ratio": "^1.1.1", "@radix-ui/react-avatar": "^1.1.2", "@radix-ui/react-checkbox": "^1.1.3", "@radix-ui/react-collapsible": "^1.1.2", "@radix-ui/react-context-menu": "^2.2.4", "@radix-ui/react-dialog": "^1.1.4", "@radix-ui/react-dropdown-menu": "^2.1.4", "@radix-ui/react-hover-card": "^1.1.4", "@radix-ui/react-label": "^2.1.1", "@radix-ui/react-menubar": "^1.1.4", "@radix-ui/react-navigation-menu": "^1.2.3", "@radix-ui/react-popover": "^1.1.4", "@radix-ui/react-progress": "^1.1.1", "@radix-ui/react-radio-group": "^1.2.2", "@radix-ui/react-scroll-area": "^1.2.2", "@radix-ui/react-select": "^2.1.4", "@radix-ui/react-separator": "^1.1.1", "@radix-ui/react-slider": "^1.2.2", "@radix-ui/react-slot": "^1.1.1", "@radix-ui/react-switch": "^1.1.2", "@radix-ui/react-tabs": "^1.1.2", "@radix-ui/react-toast": "^1.2.4", "@radix-ui/react-toggle": "^1.1.1", "@radix-ui/react-toggle-group": "^1.1.1", "@radix-ui/react-tooltip": "^1.1.6", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "html2canvas": "^1.4.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.16", "next-themes": "^0.4.4", "react": "^19", "react-day-picker": "8.10.1", "react-dom": "^19", "react-hook-form": "^7.54.1", "react-resizable-panels": "^2.1.7", "recharts": "2.15.0", "sonner": "^1.7.1", "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.6", "zod": "^3.24.1" }, "devDependencies": { "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8", "tailwindcss": "^3.4.17", "typescript": "^5" } } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer utilities { .dark-mode-shadow { box-shadow: 0 0 10px rgba(255, 255, 255, 0.1); } } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import type React from "react" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useRef } from "react" import { Plus, Search, Share, Moon, Sun } from "lucide-react" import DailyForecast from "@/components/daily-forecast" import HourlyForecast from "@/components/hourly-forecast" import WeatherSummary from "@/components/weather-summary" import CitySearch from "@/components/city-search" import ShareModal from "@/components/share-modal" import { getCityData } from "@/lib/weather-data" import { useTheme } from "@/components/theme-provider" export default function WeatherApp() { const [selectedDay, setSelectedDay] = useState(0) const [currentCity, setCurrentCity] = useState("London") const [showSearch, setShowSearch] = useState(false) const [showShareModal, setShowShareModal] = useState(false) const [weekData, setWeekData] = useState(getCityData("London")) const weatherContentRef = useRef(null) const { theme, setTheme } = useTheme() const handleCitySelect = (city: string) => { setCurrentCity(city) setWeekData(getCityData(city)) setSelectedDay(0) setShowSearch(false) } const handleShare = () => { setShowShareModal(true) } const toggleTheme = () => { setTheme(theme === "light" ? "dark" : "light") } return (

{showSearch ? ( setShowSearch(false)} /> ) : showShareModal ? ( setShowShareModal(false)} /> ) : (

{/* Location */}

{currentCity}

{/* Date Display */}

{weekData[selectedDay].day} • {weekData[selectedDay].date}

06:22 | 17:59

{/* Weather Summary for Selected Day */} {/* Hourly Forecast for Selected Day */}

{/* Weekly Forecast */}

{weekData.map((day, index) => ( setSelectedDay(index)} theme={theme} /> ))}

)}

) } [V0_FILE]typescriptreact:file="components/weather-summary.tsx" isEdit="true" import { ChevronDown } from "lucide-react" import WeatherIcon from "./weather-icon" interface WeatherSummaryProps { icon: "sunny" | "cloudy" | "partly-cloudy" | "rain" | "rain-cloud" | "thunderstorm" | "snow" temperature: number description: string theme?: "light" | "dark" } export default function WeatherSummary({ icon, temperature, description, theme = "light" }: WeatherSummaryProps) { return (

{temperature}°

{description}

) } [V0_FILE]typescriptreact:file="components/hourly-forecast.tsx" isEdit="true" import WeatherIcon from "./weather-icon" interface HourlyData { time: string icon: "sunny" | "cloudy" | "partly-cloudy" | "rain" | "rain-cloud" | "thunderstorm" | "snow" temp: number precipitation: number wind: number } interface WeatherDetails { humidity: string pressure: string visibility: string feelsLike: string precipitation: string wind: string } interface HourlyForecastProps { hourlyData: HourlyData[] details: WeatherDetails theme?: "light" | "dark" } export default function HourlyForecast({ hourlyData, details, theme = "light" }: HourlyForecastProps) { return (

{hourlyData.map((hour) => (

{hour.time}

))}

{hourlyData.map((hour) => (

))}

{hourlyData.map((hour) => (

{hour.temp}°

))}

{hourlyData.map((hour) => (

{hour.precipitation}%

))}

{hourlyData.map((hour) => (

{hour.wind}

))}

Humidity

{details.humidity}

Pressure

{details.pressure}

Visibility

{details.visibility}

Temperature feels like

{details.feelsLike}

Precipitation

{details.precipitation}

Wind

{details.wind}

) } [V0_FILE]typescriptreact:file="components/daily-forecast.tsx" isEdit="true" "use client" import WeatherIcon from "./weather-icon" interface DailyForecastProps { day: string icon: "sunny" | "cloudy" | "partly-cloudy" | "rain" | "rain-cloud" | "thunderstorm" | "snow" highTemp: number lowTemp: number isActive?: boolean onClick?: () => void theme?: "light" | "dark" } export default function DailyForecast({ day, icon, highTemp, lowTemp, isActive = false, onClick, theme = "light", }: DailyForecastProps) { return ( ) } [V0_FILE]typescriptreact:file="components/weather-icon.tsx" isEdit="true" import { Cloud, CloudRain, CloudSun, CloudDrizzle, CloudLightning, CloudSnow, Sun } from "lucide-react" type WeatherIconType = "sunny" | "cloudy" | "partly-cloudy" | "rain" | "rain-cloud" | "thunderstorm" | "snow" interface WeatherIconProps { type: WeatherIconType size?: "small" | "medium" | "large" theme?: "light" | "dark" } export default function WeatherIcon({ type, size = "medium", theme = "light" }: WeatherIconProps) { const sizeClass = { small: "w-6 h-6", medium: "w-10 h-10", large: "w-24 h-24", } const getIconColors = () => { if (theme === "light") { return { sun: "text-yellow-300", cloud: "text-gray-200", rain: "text-blue-300", } } else { return { sun: "text-yellow-400", cloud: "text-gray-300", rain: "text-blue-400", } } } const colors = getIconColors() const renderIcon = () => { switch (type) { case "sunny": return case "cloudy": return case "partly-cloudy": return (

) case "rain": return case "rain-cloud": return (

) case "thunderstorm": return case "snow": return default: return } } return

{renderIcon()}

} [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isQuickEdit="true" "use client" import { createContext, useContext, useState, useEffect, type ReactNode } from "react" type Theme = "light" | "dark" interface ThemeContextType { theme: Theme setTheme: (theme: Theme) => void } const ThemeContext = createContext({ theme: "light", setTheme: () => null, }) export function ThemeProvider({ children }: { children: ReactNode }) { const [theme, setTheme] = useState("light") // Initialize theme from localStorage if available useEffect(() => { const savedTheme = localStorage.getItem("weather-theme") as Theme | null if (savedTheme) { setTheme(savedTheme) } }, []) // Save theme to localStorage when it changes useEffect(() => { localStorage.setItem("weather-theme", theme) // Apply theme class to document for global styling if (theme === "dark") { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } }, [theme]) return {children} } export const useTheme = () => useContext(ThemeContext)