├── src
    ├── App.css
    ├── vite-env.d.ts
    ├── index.css
    ├── App.tsx
    ├── main.tsx
    ├── types
    │   └── index.ts
    ├── UI
    │   ├── Spinner.tsx
    │   ├── DotsLoading.tsx
    │   ├── DotsLoading.css
    │   ├── Spinner.css
    │   └── weather.tsx
    └── store
    │   └── index.ts
├── postcss.config.js
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── .gitignore
├── tsconfig.node.json
├── index.html
├── .eslintrc.cjs
├── tsconfig.app.json
├── package.json
├── README.md
└── public
    └── vite.svg


/src/App.css:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.app.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.node.json"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 | 
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 |   plugins: [react()],
7 | })
8 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import "./App.css";
 2 | import Weather from "./UI/weather";
 3 | 
 4 | function App() {
 5 |   return (
 6 |     <>
 7 |       <Weather />
 8 |     </>
 9 |   );
10 | }
11 | 
12 | export default App;
13 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 |   content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom/client'
 3 | import App from './App.tsx'
 4 | import './index.css'
 5 | 
 6 | ReactDOM.createRoot(document.getElementById('root')!).render(
 7 |   <React.StrictMode>
 8 |     <App />
 9 |   </React.StrictMode>,
10 | )
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .env


--------------------------------------------------------------------------------
/src/types/index.ts:
--------------------------------------------------------------------------------
 1 | export interface WeatherData {
 2 |   name: string;
 3 |   main: {
 4 |     temp: number;
 5 |     feels_like: number;
 6 |     humidity: number;
 7 |   };
 8 |   weather: {
 9 |     description: string;
10 |     main: string;
11 |   }[];
12 |   wind: {
13 |     speed: number;
14 |   };
15 |   sys: {
16 |     sunrise: number;
17 |     sunset: number;
18 |   };
19 | }
20 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
 5 |     "skipLibCheck": true,
 6 |     "module": "ESNext",
 7 |     "moduleResolution": "bundler",
 8 |     "allowSyntheticDefaultImports": true,
 9 |     "strict": true,
10 |     "noEmit": true
11 |   },
12 |   "include": ["vite.config.ts"]
13 | }
14 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Weather App</title>
 8 |   </head>
 9 |   <body>
10 |     <div id="root"></div>
11 |     <script type="module" src="/src/main.tsx"></script>
12 |   </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/src/UI/Spinner.tsx:
--------------------------------------------------------------------------------
 1 | // Spinner.js
 2 | import React from "react";
 3 | import "./Spinner.css"; // Import the CSS file for keyframes
 4 | 
 5 | const Spinner = () => {
 6 |   return (
 7 |     <div className="spinner center">
 8 |       {Array.from({ length: 12 }).map((_, index) => (
 9 |         <div
10 |           key={index}
11 |           className={`spinner-blade spinner-blade-${index + 1}`}
12 |         ></div>
13 |       ))}
14 |     </div>
15 |   );
16 | };
17 | 
18 | export default Spinner;
19 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: { browser: true, es2020: true },
 4 |   extends: [
 5 |     'eslint:recommended',
 6 |     'plugin:@typescript-eslint/recommended',
 7 |     'plugin:react-hooks/recommended',
 8 |   ],
 9 |   ignorePatterns: ['dist', '.eslintrc.cjs'],
10 |   parser: '@typescript-eslint/parser',
11 |   plugins: ['react-refresh'],
12 |   rules: {
13 |     'react-refresh/only-export-components': [
14 |       'warn',
15 |       { allowConstantExport: true },
16 |     ],
17 |   },
18 | }
19 | 


--------------------------------------------------------------------------------
/src/UI/DotsLoading.tsx:
--------------------------------------------------------------------------------
 1 | // DotsLoading.js
 2 | import React from "react";
 3 | import "./DotsLoading.css"; // Import the CSS file for keyframes
 4 | 
 5 | const DotsLoading = () => {
 6 |   return (
 7 |     <section className="flex items-center justify-center h-full w-full">
 8 |       <div className="dot"></div>
 9 |       <div className="dot"></div>
10 |       <div className="dot"></div>
11 |       <div className="dot"></div>
12 |       <div className="dot"></div>
13 |     </section>
14 |   );
15 | };
16 | 
17 | export default DotsLoading;
18 | 


--------------------------------------------------------------------------------
/src/store/index.ts:
--------------------------------------------------------------------------------
 1 | export const weatherIconMap: { [key: string]: string } = {
 2 |   Thunderstorm: "ri-thunderstorms-line",
 3 |   Drizzle: "ri-drizzle-line",
 4 |   Rain: "ri-rainy-line",
 5 |   Snow: "ri-snowy-line",
 6 |   Mist: "ri-foggy-line",
 7 |   Smoke: "ri-smoke-line",
 8 |   Haze: "ri-haze-line",
 9 |   Dust: "ri-dust-line",
10 |   Fog: "ri-foggy-line",
11 |   Sand: "ri-sandstorm-line",
12 |   Ash: "ri-volcano-line",
13 |   Squall: "ri-windy-line",
14 |   Tornado: "ri-tornado-line",
15 |   Clear: "ri-sun-line",
16 |   Clouds: "ri-cloudy-line",
17 | };
18 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "composite": true,
 4 |     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
 5 |     "target": "ES2020",
 6 |     "useDefineForClassFields": true,
 7 |     "lib": ["ES2020", "DOM", "DOM.Iterable"],
 8 |     "module": "ESNext",
 9 |     "skipLibCheck": true,
10 | 
11 |     /* Bundler mode */
12 |     "moduleResolution": "bundler",
13 |     "allowImportingTsExtensions": true,
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "moduleDetection": "force",
17 |     "noEmit": true,
18 |     "jsx": "react-jsx",
19 | 
20 |     /* Linting */
21 |     "strict": true,
22 |     "noUnusedLocals": true,
23 |     "noUnusedParameters": true,
24 |     "noFallthroughCasesInSwitch": true
25 |   },
26 |   "include": ["src"]
27 | }
28 | 


--------------------------------------------------------------------------------
/src/UI/DotsLoading.css:
--------------------------------------------------------------------------------
 1 | /* DotsLoading.css */
 2 | .dot {
 3 |   @apply h-5 w-5 mr-2 rounded-full bg-blue-200;
 4 |   animation: pulse 1.5s infinite ease-in-out;
 5 | }
 6 | 
 7 | .dot:last-child {
 8 |   @apply mr-0;
 9 | }
10 | 
11 | .dot:nth-child(1) {
12 |   animation-delay: -0.3s;
13 | }
14 | 
15 | .dot:nth-child(2) {
16 |   animation-delay: -0.1s;
17 | }
18 | 
19 | .dot:nth-child(3) {
20 |   animation-delay: 0.1s;
21 | }
22 | 
23 | @keyframes pulse {
24 |   0% {
25 |     transform: scale(0.8);
26 |     background-color: #b3d4fc;
27 |     box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
28 |   }
29 | 
30 |   50% {
31 |     transform: scale(1.2);
32 |     background-color: #6793fb;
33 |     box-shadow: 0 0 0 10px rgba(178, 212, 252, 0);
34 |   }
35 | 
36 |   100% {
37 |     transform: scale(0.8);
38 |     background-color: #b3d4fc;
39 |     box-shadow: 0 0 0 0 rgba(178, 212, 252, 0.7);
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "weather-app",
 3 |   "private": true,
 4 |   "version": "0.0.0",
 5 |   "type": "module",
 6 |   "scripts": {
 7 |     "dev": "vite",
 8 |     "build": "tsc -b && vite build",
 9 |     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10 |     "preview": "vite preview"
11 |   },
12 |   "dependencies": {
13 |     "@types/axios": "^0.14.0",
14 |     "axios": "^1.7.2",
15 |     "dotenv": "^16.4.5",
16 |     "react": "^18.3.1",
17 |     "react-dom": "^18.3.1",
18 |     "remixicon": "^4.3.0"
19 |   },
20 |   "devDependencies": {
21 |     "@types/react": "^18.3.3",
22 |     "@types/react-dom": "^18.3.0",
23 |     "@typescript-eslint/eslint-plugin": "^7.13.1",
24 |     "@typescript-eslint/parser": "^7.13.1",
25 |     "@vitejs/plugin-react": "^4.3.1",
26 |     "autoprefixer": "^10.4.19",
27 |     "eslint": "^8.57.0",
28 |     "eslint-plugin-react-hooks": "^4.6.2",
29 |     "eslint-plugin-react-refresh": "^0.4.7",
30 |     "postcss": "^8.4.39",
31 |     "tailwindcss": "^3.4.4",
32 |     "typescript": "^5.2.2",
33 |     "vite": "^5.3.1"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # React + TypeScript + Vite
 2 | 
 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 4 | 
 5 | Currently, two official plugins are available:
 6 | 
 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
 9 | 
10 | ## Expanding the ESLint configuration
11 | 
12 | If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13 | 
14 | - Configure the top-level `parserOptions` property like this:
15 | 
16 | ```js
17 | export default {
18 |   // other rules...
19 |   parserOptions: {
20 |     ecmaVersion: 'latest',
21 |     sourceType: 'module',
22 |     project: ['./tsconfig.json', './tsconfig.node.json'],
23 |     tsconfigRootDir: __dirname,
24 |   },
25 | }
26 | ```
27 | 
28 | - Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
29 | - Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
30 | - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
31 | 


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/src/UI/Spinner.css:
--------------------------------------------------------------------------------
 1 | /* Spinner.css */
 2 | .spinner {
 3 |   font-size: 28px;
 4 |   position: relative;
 5 |   display: inline-block;
 6 |   width: 1em;
 7 |   height: 1em;
 8 | }
 9 | 
10 | .center {
11 |   position: absolute;
12 |   left: 0;
13 |   right: 0;
14 |   top: 0;
15 |   bottom: 0;
16 |   margin: auto;
17 | }
18 | 
19 | .spinner .spinner-blade {
20 |   position: absolute;
21 |   left: 0.4629em;
22 |   bottom: 0;
23 |   width: 0.074em;
24 |   height: 0.2777em;
25 |   border-radius: 0.0555em;
26 |   background-color: transparent;
27 |   transform-origin: center -0.2222em;
28 |   animation: spinner-fade9234 1s infinite linear;
29 | }
30 | 
31 | .spinner .spinner-blade-1 {
32 |   animation-delay: 0s;
33 |   transform: rotate(0deg);
34 | }
35 | .spinner .spinner-blade-2 {
36 |   animation-delay: 0.083s;
37 |   transform: rotate(30deg);
38 | }
39 | .spinner .spinner-blade-3 {
40 |   animation-delay: 0.166s;
41 |   transform: rotate(60deg);
42 | }
43 | .spinner .spinner-blade-4 {
44 |   animation-delay: 0.249s;
45 |   transform: rotate(90deg);
46 | }
47 | .spinner .spinner-blade-5 {
48 |   animation-delay: 0.332s;
49 |   transform: rotate(120deg);
50 | }
51 | .spinner .spinner-blade-6 {
52 |   animation-delay: 0.415s;
53 |   transform: rotate(150deg);
54 | }
55 | .spinner .spinner-blade-7 {
56 |   animation-delay: 0.498s;
57 |   transform: rotate(180deg);
58 | }
59 | .spinner .spinner-blade-8 {
60 |   animation-delay: 0.581s;
61 |   transform: rotate(210deg);
62 | }
63 | .spinner .spinner-blade-9 {
64 |   animation-delay: 0.664s;
65 |   transform: rotate(240deg);
66 | }
67 | .spinner .spinner-blade-10 {
68 |   animation-delay: 0.747s;
69 |   transform: rotate(270deg);
70 | }
71 | .spinner .spinner-blade-11 {
72 |   animation-delay: 0.83s;
73 |   transform: rotate(300deg);
74 | }
75 | .spinner .spinner-blade-12 {
76 |   animation-delay: 0.913s;
77 |   transform: rotate(330deg);
78 | }
79 | 
80 | @keyframes spinner-fade9234 {
81 |   0% {
82 |     background-color: #69717d;
83 |   }
84 |   100% {
85 |     background-color: transparent;
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/src/UI/weather.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import axios from "axios";
  3 | import "remixicon/fonts/remixicon.css";
  4 | import DotsLoading from "./DotsLoading";
  5 | import { WeatherData } from "../types";
  6 | import { weatherIconMap } from "../store";
  7 | 
  8 | const Weather: React.FC = () => {
  9 |   const [weather, setWeather] = useState<WeatherData | null>(null);
 10 |   const [loading, setLoading] = useState(true);
 11 |   const [location, setLocation] = useState("Kolkata"); // Default location
 12 |   const [searchTerm, setSearchTerm] = useState(location);
 13 |   const apiKey = import.meta.env.VITE_API_KEY;
 14 | 
 15 |   const fetchWeather = async (loc: string) => {
 16 |     setLoading(true);
 17 |     try {
 18 |       const response = await axios.get(
 19 |         "https://api.openweathermap.org/data/2.5/weather",
 20 |         {
 21 |           params: {
 22 |             q: loc,
 23 |             appid: apiKey,
 24 |             units: "metric",
 25 |           },
 26 |         }
 27 |       );
 28 |       setWeather(response.data);
 29 |     } catch (error) {
 30 |       setWeather(null); // Clear previous weather data
 31 |       alert("Failed to fetch weather data. Please try again."); // Inform the user of the error
 32 |     } finally {
 33 |       setLoading(false);
 34 |     }
 35 |   };
 36 | 
 37 |   useEffect(() => {
 38 |     fetchWeather(location);
 39 |   }, [location]);
 40 | 
 41 |   const handleSearch = () => {
 42 |     if (searchTerm.trim()) {
 43 |       setLocation(searchTerm);
 44 |     } else {
 45 |       alert("Please enter a valid location.");
 46 |     }
 47 |   };
 48 | 
 49 |   const getWeatherIcon = (weatherMain: string) => {
 50 |     return weatherIconMap[weatherMain] || "ri-question-line";
 51 |   };
 52 | 
 53 |   const isDaytime = () => {
 54 |     if (!weather) return true;
 55 | 
 56 |     const currentTime = Math.floor(Date.now() / 1000);
 57 |     return (
 58 |       currentTime >= weather.sys.sunrise && currentTime < weather.sys.sunset
 59 |     );
 60 |   };
 61 | 
 62 |   const formatTime = (timestamp: number) => {
 63 |     const date = new Date(timestamp * 1000);
 64 |     return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
 65 |   };
 66 | 
 67 |   return (
 68 |     <div
 69 |       className={`flex flex-col items-center justify-center min-h-screen ${
 70 |         isDaytime()
 71 |           ? "bg-gradient-to-r from-orange-400 to-blue-500 transition-colors duration-500"
 72 |           : "bg-gradient-to-r from-blue-800 to-slate-800 transition-colors duration-500"
 73 |       } p-6`}
 74 |     >
 75 |       <div className="flex items-center mb-6 w-full max-w-lg">
 76 |         <input
 77 |           type="text"
 78 |           value={searchTerm}
 79 |           onChange={(e) => setSearchTerm(e.target.value)}
 80 |           placeholder="Enter location"
 81 |           className="outline-none flex-grow px-4 py-2 border rounded-l-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
 82 |         />
 83 |         <button
 84 |           onClick={handleSearch}
 85 |           className="bg-blue-500 text-white px-4 py-2 rounded-r-lg shadow hover:bg-blue-600 transition-colors flex items-center justify-center"
 86 |         >
 87 |           <i className="ri-search-line text-xl"></i>
 88 |         </button>
 89 |       </div>
 90 |       <div className="w-full max-w-lg">
 91 |         <div className="bg-white p-8 rounded-lg shadow-xl w-full h-80 mt-6 flex flex-col justify-center items-center">
 92 |           {loading ? (
 93 |             <div className="flex items-center justify-center h-full">
 94 |               <DotsLoading />
 95 |             </div>
 96 |           ) : (
 97 |             weather && (
 98 |               <>
 99 |                 <div className="text-center">
100 |                   <h2 className="text-2xl font-semibold text-gray-800 mb-4">
101 |                     {weather.name}
102 |                   </h2>
103 |                   <div className="flex justify-center items-center gap-3">
104 |                     <i
105 |                       className={`${getWeatherIcon(
106 |                         weather.weather[0].main
107 |                       )} text-4xl text-gray-600`}
108 |                     ></i>
109 |                     <p className="text-gray-600 text-xl">
110 |                       {weather.weather[0].description.toUpperCase()}
111 |                     </p>
112 |                   </div>
113 |                 </div>
114 |                 <div className="mt-6 text-center grid grid-cols-2 gap-4">
115 |                   <div className="flex items-center space-x-1">
116 |                     <i className="ri-thermometer-line text-xl text-gray-600"></i>
117 |                     <p className="text-gray-600 text-lg">
118 |                       Temp: {weather.main.temp} °C
119 |                     </p>
120 |                   </div>
121 |                   <div className="flex items-center space-x-1">
122 |                     <i className="ri-thermometer-line text-xl text-gray-600"></i>
123 |                     <p className="text-gray-600 text-lg">
124 |                       Feels Like: {weather.main.feels_like} °C
125 |                     </p>
126 |                   </div>
127 |                   <div className="flex items-center space-x-1">
128 |                     <i className="ri-drop-line text-xl text-gray-600"></i>
129 |                     <p className="text-gray-600 text-lg">
130 |                       Humidity: {weather.main.humidity}%
131 |                     </p>
132 |                   </div>
133 |                   <div className="flex items-center space-x-1">
134 |                     <i className="ri-windy-line text-xl text-gray-600"></i>
135 |                     <p className="text-gray-600 text-lg">
136 |                       Wind Speed: {weather.wind.speed} m/s
137 |                     </p>
138 |                   </div>
139 |                   <div className="flex items-center space-x-1">
140 |                     <i className="ri-sunrise-line text-xl"></i>
141 |                     <p className="text-gray-600 text-lg">
142 |                       Sunrise: {formatTime(weather.sys.sunrise)}
143 |                     </p>
144 |                   </div>
145 |                   <div className="flex items-center space-x-1">
146 |                     <i className="ri-sunset-line text-xl"></i>
147 |                     <p className="text-gray-600 text-lg">
148 |                       Sunset: {formatTime(weather.sys.sunset)}
149 |                     </p>
150 |                   </div>
151 |                 </div>
152 |               </>
153 |             )
154 |           )}
155 |         </div>
156 |       </div>
157 |       <footer className="text-center text-gray-500 text-sm mt-8">
158 |         <p>Weather data by OpenWeather</p>
159 |       </footer>
160 |     </div>
161 |   );
162 | };
163 | 
164 | export default Weather;
165 | 


--------------------------------------------------------------------------------