mirror of
https://github.com/piyush-eon/tanstack-query-weather-app.git
synced 2025-11-24 05:11:19 +00:00
Klimate App
This commit is contained in:
Piyush Agarwal
commit
d1ad533352
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
.env
|
||||||
50
README.md
Normal file
50
README.md
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
# React + TypeScript + Vite
|
||||||
|
|
||||||
|
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||||
|
|
||||||
|
Currently, two official plugins are available:
|
||||||
|
|
||||||
|
- [@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
|
||||||
|
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||||
|
|
||||||
|
## Expanding the ESLint configuration
|
||||||
|
|
||||||
|
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
|
||||||
|
|
||||||
|
- Configure the top-level `parserOptions` property like this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
export default tseslint.config({
|
||||||
|
languageOptions: {
|
||||||
|
// other options...
|
||||||
|
parserOptions: {
|
||||||
|
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||||
|
tsconfigRootDir: import.meta.dirname,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
|
|
||||||
|
- Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
|
||||||
|
- Optionally add `...tseslint.configs.stylisticTypeChecked`
|
||||||
|
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
|
||||||
|
|
||||||
|
```js
|
||||||
|
// eslint.config.js
|
||||||
|
import react from 'eslint-plugin-react'
|
||||||
|
|
||||||
|
export default tseslint.config({
|
||||||
|
// Set the react version
|
||||||
|
settings: { react: { version: '18.3' } },
|
||||||
|
plugins: {
|
||||||
|
// Add the react plugin
|
||||||
|
react,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
// other rules...
|
||||||
|
// Enable its recommended rules
|
||||||
|
...react.configs.recommended.rules,
|
||||||
|
...react.configs['jsx-runtime'].rules,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
```
|
||||||
20
components.json
Normal file
20
components.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": false,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "tailwind.config.js",
|
||||||
|
"css": "src/index.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"aliases": {
|
||||||
|
"components": "@/components",
|
||||||
|
"utils": "@/lib/utils",
|
||||||
|
"ui": "@/components/ui",
|
||||||
|
"lib": "@/lib",
|
||||||
|
"hooks": "@/hooks"
|
||||||
|
}
|
||||||
|
}
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Vite + React + TS</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6026
package-lock.json
generated
Normal file
6026
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
53
package.json
Normal file
53
package.json
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
{
|
||||||
|
"name": "weather-app",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@radix-ui/react-dialog": "^1.1.2",
|
||||||
|
"@radix-ui/react-dropdown-menu": "^2.1.2",
|
||||||
|
"@radix-ui/react-icons": "^1.3.1",
|
||||||
|
"@radix-ui/react-scroll-area": "^1.2.0",
|
||||||
|
"@radix-ui/react-slot": "^1.1.0",
|
||||||
|
"@radix-ui/react-switch": "^1.1.1",
|
||||||
|
"@radix-ui/react-tooltip": "^1.1.3",
|
||||||
|
"@tanstack/react-query": "^5.59.16",
|
||||||
|
"@tanstack/react-query-devtools": "^5.59.16",
|
||||||
|
"class-variance-authority": "^0.7.0",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "^1.0.0",
|
||||||
|
"date-fns": "^4.1.0",
|
||||||
|
"lucide-react": "^0.454.0",
|
||||||
|
"next-themes": "^0.3.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^6.27.0",
|
||||||
|
"recharts": "^2.13.3",
|
||||||
|
"sonner": "^1.5.0",
|
||||||
|
"tailwind-merge": "^2.5.4",
|
||||||
|
"tailwindcss-animate": "^1.0.7"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.13.0",
|
||||||
|
"@types/node": "^22.8.6",
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.3.3",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.13.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.0.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.14",
|
||||||
|
"globals": "^15.11.0",
|
||||||
|
"postcss": "^8.4.47",
|
||||||
|
"tailwindcss": "^3.4.14",
|
||||||
|
"typescript": "~5.6.2",
|
||||||
|
"typescript-eslint": "^8.11.0",
|
||||||
|
"vite": "^5.4.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
BIN
public/logo2.png
Normal file
BIN
public/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +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>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
0
src/App.css
Normal file
0
src/App.css
Normal file
40
src/App.tsx
Normal file
40
src/App.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
|
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||||
|
import { Toaster } from "./components/ui/sonner";
|
||||||
|
import { WeatherDashboard } from "./pages/weather-dashboard";
|
||||||
|
import { Layout } from "./components/layout";
|
||||||
|
import { ThemeProvider } from "./context/theme-provider";
|
||||||
|
import { BrowserRouter, Route, Routes } from "react-router-dom";
|
||||||
|
import { CityPage } from "./pages/city-page";
|
||||||
|
|
||||||
|
const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: 5 * 60 * 1000, // 5 minutes
|
||||||
|
gcTime: 10 * 60 * 1000, // 10 minutes
|
||||||
|
retry: false,
|
||||||
|
refetchOnWindowFocus: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<BrowserRouter>
|
||||||
|
<ThemeProvider defaultTheme="dark">
|
||||||
|
<Layout>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<WeatherDashboard />} />
|
||||||
|
<Route path="/city/:cityName" element={<CityPage />} />
|
||||||
|
</Routes>
|
||||||
|
</Layout>
|
||||||
|
<Toaster richColors />
|
||||||
|
</ThemeProvider>
|
||||||
|
</BrowserRouter>
|
||||||
|
<ReactQueryDevtools initialIsOpen={false} />
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
9
src/api/config.ts
Normal file
9
src/api/config.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export const API_CONFIG = {
|
||||||
|
BASE_URL: "https://api.openweathermap.org/data/2.5",
|
||||||
|
GEO: "https://api.openweathermap.org/geo/1.0",
|
||||||
|
API_KEY: import.meta.env.VITE_OPENWEATHER_API_KEY,
|
||||||
|
DEFAULT_PARAMS: {
|
||||||
|
units: "metric",
|
||||||
|
appid: import.meta.env.VITE_OPENWEATHER_API_KEY,
|
||||||
|
},
|
||||||
|
};
|
||||||
60
src/api/types.ts
Normal file
60
src/api/types.ts
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
export interface Coordinates {
|
||||||
|
lat: number;
|
||||||
|
lon: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface GeocodingResponse {
|
||||||
|
name: string;
|
||||||
|
local_names?: Record<string, string>;
|
||||||
|
lat: number;
|
||||||
|
lon: number;
|
||||||
|
country: string;
|
||||||
|
state?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WeatherCondition {
|
||||||
|
id: number;
|
||||||
|
main: string;
|
||||||
|
description: string;
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface WeatherData {
|
||||||
|
coord: Coordinates;
|
||||||
|
weather: WeatherCondition[];
|
||||||
|
main: {
|
||||||
|
temp: number;
|
||||||
|
feels_like: number;
|
||||||
|
temp_min: number;
|
||||||
|
temp_max: number;
|
||||||
|
pressure: number;
|
||||||
|
humidity: number;
|
||||||
|
};
|
||||||
|
wind: {
|
||||||
|
speed: number;
|
||||||
|
deg: number;
|
||||||
|
};
|
||||||
|
sys: {
|
||||||
|
sunrise: number;
|
||||||
|
sunset: number;
|
||||||
|
country: string;
|
||||||
|
};
|
||||||
|
name: string;
|
||||||
|
dt: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ForecastData {
|
||||||
|
list: Array<{
|
||||||
|
dt: number;
|
||||||
|
main: WeatherData["main"];
|
||||||
|
weather: WeatherData["weather"];
|
||||||
|
wind: WeatherData["wind"];
|
||||||
|
dt_txt: string;
|
||||||
|
}>;
|
||||||
|
city: {
|
||||||
|
name: string;
|
||||||
|
country: string;
|
||||||
|
sunrise: number;
|
||||||
|
sunset: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
67
src/api/weather.ts
Normal file
67
src/api/weather.ts
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { API_CONFIG } from "./config";
|
||||||
|
import type {
|
||||||
|
WeatherData,
|
||||||
|
ForecastData,
|
||||||
|
GeocodingResponse,
|
||||||
|
Coordinates,
|
||||||
|
} from "./types";
|
||||||
|
|
||||||
|
class WeatherAPI {
|
||||||
|
private createUrl(endpoint: string, params: Record<string, string | number>) {
|
||||||
|
const searchParams = new URLSearchParams({
|
||||||
|
appid: API_CONFIG.API_KEY,
|
||||||
|
...params,
|
||||||
|
});
|
||||||
|
return `${endpoint}?${searchParams.toString()}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async fetchData<T>(url: string): Promise<T> {
|
||||||
|
const response = await fetch(url);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Weather API Error: ${response.statusText}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
async getCurrentWeather({ lat, lon }: Coordinates): Promise<WeatherData> {
|
||||||
|
const url = this.createUrl(`${API_CONFIG.BASE_URL}/weather`, {
|
||||||
|
lat: lat.toString(),
|
||||||
|
lon: lon.toString(),
|
||||||
|
units: "metric",
|
||||||
|
});
|
||||||
|
return this.fetchData<WeatherData>(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
async getForecast({ lat, lon }: Coordinates): Promise<ForecastData> {
|
||||||
|
const url = this.createUrl(`${API_CONFIG.BASE_URL}/forecast`, {
|
||||||
|
lat: lat.toString(),
|
||||||
|
lon: lon.toString(),
|
||||||
|
units: "metric",
|
||||||
|
});
|
||||||
|
return this.fetchData<ForecastData>(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
async reverseGeocode({
|
||||||
|
lat,
|
||||||
|
lon,
|
||||||
|
}: Coordinates): Promise<GeocodingResponse[]> {
|
||||||
|
const url = this.createUrl(`${API_CONFIG.GEO}/reverse`, {
|
||||||
|
lat: lat.toString(),
|
||||||
|
lon: lon.toString(),
|
||||||
|
limit: "1",
|
||||||
|
});
|
||||||
|
return this.fetchData<GeocodingResponse[]>(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
async searchLocations(query: string): Promise<GeocodingResponse[]> {
|
||||||
|
const url = this.createUrl(`${API_CONFIG.GEO}/direct`, {
|
||||||
|
q: query,
|
||||||
|
limit: "5",
|
||||||
|
});
|
||||||
|
return this.fetchData<GeocodingResponse[]>(url);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const weatherAPI = new WeatherAPI();
|
||||||
168
src/components/city-search.tsx
Normal file
168
src/components/city-search.tsx
Normal file
@ -0,0 +1,168 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import { Search, Loader2, Clock, Star, XCircle } from "lucide-react";
|
||||||
|
import { useLocationSearch } from "@/hooks/use-weather";
|
||||||
|
import { useSearchHistory } from "@/hooks/use-search-history";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandDialog,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
CommandSeparator,
|
||||||
|
} from "@/components/ui/command";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useFavorites } from "@/hooks/use-favorite";
|
||||||
|
|
||||||
|
export function CitySearch() {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [query, setQuery] = useState("");
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { data: locations, isLoading } = useLocationSearch(query);
|
||||||
|
const { favorites } = useFavorites();
|
||||||
|
const { history, clearHistory, addToHistory } = useSearchHistory();
|
||||||
|
|
||||||
|
const handleSelect = (cityData: string) => {
|
||||||
|
const [lat, lon, name, country] = cityData.split("|");
|
||||||
|
|
||||||
|
// Add to search history
|
||||||
|
addToHistory.mutate({
|
||||||
|
query,
|
||||||
|
name,
|
||||||
|
lat: parseFloat(lat),
|
||||||
|
lon: parseFloat(lon),
|
||||||
|
country,
|
||||||
|
});
|
||||||
|
|
||||||
|
setOpen(false);
|
||||||
|
navigate(`/city/${name}?lat=${lat}&lon=${lon}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64"
|
||||||
|
onClick={() => setOpen(true)}
|
||||||
|
>
|
||||||
|
<Search className="mr-2 h-4 w-4" />
|
||||||
|
Search cities...
|
||||||
|
</Button>
|
||||||
|
<CommandDialog open={open} onOpenChange={setOpen}>
|
||||||
|
<Command>
|
||||||
|
<CommandInput
|
||||||
|
placeholder="Search cities..."
|
||||||
|
value={query}
|
||||||
|
onValueChange={setQuery}
|
||||||
|
/>
|
||||||
|
<CommandList>
|
||||||
|
{query.length > 2 && !isLoading && (
|
||||||
|
<CommandEmpty>No cities found.</CommandEmpty>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Favorites Section */}
|
||||||
|
{favorites.length > 0 && (
|
||||||
|
<CommandGroup heading="Favorites">
|
||||||
|
{favorites.map((city) => (
|
||||||
|
<CommandItem
|
||||||
|
key={city.id}
|
||||||
|
value={`${city.lat}|${city.lon}|${city.name}|${city.country}`}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
>
|
||||||
|
<Star className="mr-2 h-4 w-4 text-yellow-500" />
|
||||||
|
<span>{city.name}</span>
|
||||||
|
{city.state && (
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
, {city.state}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
, {city.country}
|
||||||
|
</span>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Search History Section */}
|
||||||
|
{history.length > 0 && (
|
||||||
|
<>
|
||||||
|
<CommandSeparator />
|
||||||
|
<CommandGroup>
|
||||||
|
<div className="flex items-center justify-between px-2 my-2">
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
Recent Searches
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => clearHistory.mutate()}
|
||||||
|
>
|
||||||
|
<XCircle className="h-4 w-4" />
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{history.map((item) => (
|
||||||
|
<CommandItem
|
||||||
|
key={item.id}
|
||||||
|
value={`${item.lat}|${item.lon}|${item.name}|${item.country}`}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
>
|
||||||
|
<Clock className="mr-2 h-4 w-4 text-muted-foreground" />
|
||||||
|
<span>{item.name}</span>
|
||||||
|
{item.state && (
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
, {item.state}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
, {item.country}
|
||||||
|
</span>
|
||||||
|
<span className="ml-auto text-xs text-muted-foreground">
|
||||||
|
{format(item.searchedAt, "MMM d, h:mm a")}
|
||||||
|
</span>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Search Results */}
|
||||||
|
<CommandSeparator />
|
||||||
|
{locations && locations.length > 0 && (
|
||||||
|
<CommandGroup heading="Suggestions">
|
||||||
|
{isLoading && (
|
||||||
|
<div className="flex items-center justify-center p-4">
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{locations?.map((location) => (
|
||||||
|
<CommandItem
|
||||||
|
key={`${location.lat}-${location.lon}`}
|
||||||
|
value={`${location.lat}|${location.lon}|${location.name}|${location.country}`}
|
||||||
|
onSelect={handleSelect}
|
||||||
|
>
|
||||||
|
<Search className="mr-2 h-4 w-4" />
|
||||||
|
<span>{location.name}</span>
|
||||||
|
{location.state && (
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
, {location.state}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
, {location.country}
|
||||||
|
</span>
|
||||||
|
</CommandItem>
|
||||||
|
))}
|
||||||
|
</CommandGroup>
|
||||||
|
)}
|
||||||
|
</CommandList>
|
||||||
|
</Command>
|
||||||
|
</CommandDialog>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
98
src/components/current-weather.tsx
Normal file
98
src/components/current-weather.tsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import { Card, CardContent } from "./ui/card";
|
||||||
|
import { ArrowDown, ArrowUp, Droplets, Wind } from "lucide-react";
|
||||||
|
import type { WeatherData, GeocodingResponse } from "@/api/types";
|
||||||
|
|
||||||
|
interface CurrentWeatherProps {
|
||||||
|
data: WeatherData;
|
||||||
|
locationName?: GeocodingResponse;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CurrentWeather({ data, locationName }: CurrentWeatherProps) {
|
||||||
|
const {
|
||||||
|
weather: [currentWeather],
|
||||||
|
main: { temp, feels_like, temp_min, temp_max, humidity },
|
||||||
|
wind: { speed },
|
||||||
|
} = data;
|
||||||
|
|
||||||
|
// Format temperature
|
||||||
|
const formatTemp = (temp: number) => `${Math.round(temp)}°`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="overflow-hidden">
|
||||||
|
<CardContent className="p-6">
|
||||||
|
<div className="grid gap-6 md:grid-cols-2">
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<h2 className="text-2xl font-bold tracking-tight">
|
||||||
|
{locationName?.name}
|
||||||
|
</h2>
|
||||||
|
{locationName?.state && (
|
||||||
|
<span className="text-muted-foreground">
|
||||||
|
, {locationName.state}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
{locationName?.country}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<p className="text-7xl font-bold tracking-tighter">
|
||||||
|
{formatTemp(temp)}
|
||||||
|
</p>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="text-sm font-medium text-muted-foreground">
|
||||||
|
Feels like {formatTemp(feels_like)}
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2 text-sm font-medium">
|
||||||
|
<span className="flex items-center gap-1 text-blue-500">
|
||||||
|
<ArrowDown className="h-3 w-3" />
|
||||||
|
{formatTemp(temp_min)}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1 text-red-500">
|
||||||
|
<ArrowUp className="h-3 w-3" />
|
||||||
|
{formatTemp(temp_max)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Droplets className="h-4 w-4 text-blue-500" />
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<p className="text-sm font-medium">Humidity</p>
|
||||||
|
<p className="text-sm text-muted-foreground">{humidity}%</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Wind className="h-4 w-4 text-blue-500" />
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<p className="text-sm font-medium">Wind Speed</p>
|
||||||
|
<p className="text-sm text-muted-foreground">{speed} m/s</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center justify-center">
|
||||||
|
<div className="relative flex aspect-square w-full max-w-[200px] items-center justify-center">
|
||||||
|
<img
|
||||||
|
src={`https://openweathermap.org/img/wn/${currentWeather.icon}@4x.png`}
|
||||||
|
alt={currentWeather.description}
|
||||||
|
className="h-full w-full object-contain"
|
||||||
|
/>
|
||||||
|
<div className="absolute bottom-0 text-center">
|
||||||
|
<p className="text-sm font-medium capitalize">
|
||||||
|
{currentWeather.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
43
src/components/favorite-button.tsx
Normal file
43
src/components/favorite-button.tsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
// src/components/weather/favorite-button.tsx
|
||||||
|
import { Star } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import type { WeatherData } from "@/api/types";
|
||||||
|
import { useFavorites } from "@/hooks/use-favorite";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
interface FavoriteButtonProps {
|
||||||
|
data: WeatherData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FavoriteButton({ data }: FavoriteButtonProps) {
|
||||||
|
const { addFavorite, removeFavorite, isFavorite } = useFavorites();
|
||||||
|
const isCurrentlyFavorite = isFavorite(data.coord.lat, data.coord.lon);
|
||||||
|
|
||||||
|
const handleToggleFavorite = () => {
|
||||||
|
if (isCurrentlyFavorite) {
|
||||||
|
removeFavorite.mutate(`${data.coord.lat}-${data.coord.lon}`);
|
||||||
|
toast.error(`Removed ${data.name} from Favorites`);
|
||||||
|
} else {
|
||||||
|
addFavorite.mutate({
|
||||||
|
name: data.name,
|
||||||
|
lat: data.coord.lat,
|
||||||
|
lon: data.coord.lon,
|
||||||
|
country: data.sys.country,
|
||||||
|
});
|
||||||
|
toast.success(`Added ${data.name} to Favorites`);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Button
|
||||||
|
variant={isCurrentlyFavorite ? "default" : "outline"}
|
||||||
|
size="icon"
|
||||||
|
onClick={handleToggleFavorite}
|
||||||
|
className={isCurrentlyFavorite ? "bg-yellow-500 hover:bg-yellow-600" : ""}
|
||||||
|
>
|
||||||
|
<Star
|
||||||
|
className={`h-4 w-4 ${isCurrentlyFavorite ? "fill-current" : ""}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
);
|
||||||
|
}
|
||||||
109
src/components/favorite-cities.tsx
Normal file
109
src/components/favorite-cities.tsx
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
// src/components/weather/favorite-cities.tsx
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
import { useWeatherQuery } from "@/hooks/use-weather";
|
||||||
|
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
|
||||||
|
import { X, Loader2 } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useFavorites } from "@/hooks/use-favorite";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
interface FavoriteCityTabletProps {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
lat: number;
|
||||||
|
lon: number;
|
||||||
|
onRemove: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function FavoriteCityTablet({
|
||||||
|
id,
|
||||||
|
name,
|
||||||
|
lat,
|
||||||
|
lon,
|
||||||
|
onRemove,
|
||||||
|
}: FavoriteCityTabletProps) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { data: weather, isLoading } = useWeatherQuery({ lat, lon });
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
navigate(`/city/${name}?lat=${lat}&lon=${lon}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={handleClick}
|
||||||
|
className="relative flex min-w-[250px] cursor-pointer items-center gap-3 rounded-lg border bg-card p-4 pr-8 shadow-sm transition-all hover:shadow-md"
|
||||||
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="absolute right-1 top-1 h-6 w-6 rounded-full p-0 hover:text-destructive-foreground group-hover:opacity-100"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onRemove(id);
|
||||||
|
toast.error(`Removed ${name} from Favorites`);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{isLoading ? (
|
||||||
|
<div className="flex h-8 items-center justify-center">
|
||||||
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||||||
|
</div>
|
||||||
|
) : weather ? (
|
||||||
|
<>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<img
|
||||||
|
src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}.png`}
|
||||||
|
alt={weather.weather[0].description}
|
||||||
|
className="h-8 w-8"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">{name}</p>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{weather.sys.country}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto text-right">
|
||||||
|
<p className="text-xl font-bold">
|
||||||
|
{Math.round(weather.main.temp)}°
|
||||||
|
</p>
|
||||||
|
<p className="text-xs capitalize text-muted-foreground">
|
||||||
|
{weather.weather[0].description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function FavoriteCities() {
|
||||||
|
const { favorites, removeFavorite } = useFavorites();
|
||||||
|
|
||||||
|
if (!favorites.length) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1 className="text-xl font-bold tracking-tight">Favorites</h1>
|
||||||
|
<ScrollArea className="w-full pb-4">
|
||||||
|
<div className="flex gap-4">
|
||||||
|
{favorites.map((city) => (
|
||||||
|
<FavoriteCityTablet
|
||||||
|
key={city.id}
|
||||||
|
{...city}
|
||||||
|
onRemove={() => removeFavorite.mutate(city.id)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<ScrollBar orientation="horizontal" className="mt-2" />
|
||||||
|
</ScrollArea>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
src/components/header.tsx
Normal file
27
src/components/header.tsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { Link } from "react-router-dom";
|
||||||
|
import { CitySearch } from "./city-search";
|
||||||
|
import { ThemeToggle } from "./theme-toggle";
|
||||||
|
import { useTheme } from "@/context/theme-provider";
|
||||||
|
|
||||||
|
export function Header() {
|
||||||
|
const { theme } = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 py-2">
|
||||||
|
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
||||||
|
<Link to={"/"}>
|
||||||
|
<img
|
||||||
|
src={theme === "dark" ? "/logo.png" : "/logo2.png"}
|
||||||
|
alt="Klimate logo"
|
||||||
|
className="h-14"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="flex gap-4">
|
||||||
|
<CitySearch />
|
||||||
|
<ThemeToggle />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
107
src/components/hourly-temprature.tsx
Normal file
107
src/components/hourly-temprature.tsx
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
||||||
|
import {
|
||||||
|
LineChart,
|
||||||
|
Line,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
Tooltip,
|
||||||
|
ResponsiveContainer,
|
||||||
|
} from "recharts";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import type { ForecastData } from "@/api/types";
|
||||||
|
|
||||||
|
interface HourlyTemperatureProps {
|
||||||
|
data: ForecastData;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ChartData {
|
||||||
|
time: string;
|
||||||
|
temp: number;
|
||||||
|
feels_like: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function HourlyTemperature({ data }: HourlyTemperatureProps) {
|
||||||
|
// Get today's forecast data and format for chart
|
||||||
|
|
||||||
|
const chartData: ChartData[] = data.list
|
||||||
|
.slice(0, 8) // Get next 24 hours (3-hour intervals)
|
||||||
|
.map((item) => ({
|
||||||
|
time: format(new Date(item.dt * 1000), "ha"),
|
||||||
|
temp: Math.round(item.main.temp),
|
||||||
|
feels_like: Math.round(item.main.feels_like),
|
||||||
|
}));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="flex-1">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Today's Temperature</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="h-[200px] w-full">
|
||||||
|
<ResponsiveContainer width="100%" height="100%">
|
||||||
|
<LineChart data={chartData}>
|
||||||
|
<XAxis
|
||||||
|
dataKey="time"
|
||||||
|
stroke="#888888"
|
||||||
|
fontSize={12}
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
stroke="#888888"
|
||||||
|
fontSize={12}
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={false}
|
||||||
|
tickFormatter={(value) => `${value}°`}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
content={({ active, payload }) => {
|
||||||
|
if (active && payload && payload.length) {
|
||||||
|
return (
|
||||||
|
<div className="rounded-lg border bg-background p-2 shadow-sm">
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||||
|
Temperature
|
||||||
|
</span>
|
||||||
|
<span className="font-bold">
|
||||||
|
{payload[0].value}°
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col">
|
||||||
|
<span className="text-[0.70rem] uppercase text-muted-foreground">
|
||||||
|
Feels Like
|
||||||
|
</span>
|
||||||
|
<span className="font-bold">
|
||||||
|
{payload[1].value}°
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
type="monotone"
|
||||||
|
dataKey="temp"
|
||||||
|
stroke="#2563eb"
|
||||||
|
strokeWidth={2}
|
||||||
|
dot={false}
|
||||||
|
/>
|
||||||
|
<Line
|
||||||
|
type="monotone"
|
||||||
|
dataKey="feels_like"
|
||||||
|
stroke="#64748b"
|
||||||
|
strokeWidth={2}
|
||||||
|
dot={false}
|
||||||
|
strokeDasharray="5 5"
|
||||||
|
/>
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
18
src/components/layout.tsx
Normal file
18
src/components/layout.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import type { PropsWithChildren } from "react";
|
||||||
|
import { Header } from "./header";
|
||||||
|
|
||||||
|
export function Layout({ children }: PropsWithChildren) {
|
||||||
|
return (
|
||||||
|
<div className=" bg-gradient-to-br from-background to-muted">
|
||||||
|
<Header />
|
||||||
|
<main className="min-h-screen container mx-auto px-4 py-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<footer className="border-t backdrop-blur supports-[backdrop-filter]:bg-background/60 py-12">
|
||||||
|
<div className="container mx-auto px-4 text-center text-gray-200">
|
||||||
|
<p>Made with 💗 by RoadsideCoder</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
18
src/components/loading-skeleton.tsx
Normal file
18
src/components/loading-skeleton.tsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import { Skeleton } from "./ui/skeleton";
|
||||||
|
|
||||||
|
function WeatherSkeleton() {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="grid gap-6">
|
||||||
|
<Skeleton className="h-[300px] w-full rounded-lg" />
|
||||||
|
<Skeleton className="h-[300px] w-full rounded-lg" />
|
||||||
|
<div className="grid gap-6 md:grid-cols-2">
|
||||||
|
<Skeleton className="h-[300px] w-full rounded-lg" />
|
||||||
|
<Skeleton className="h-[300px] w-full rounded-lg" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default WeatherSkeleton;
|
||||||
23
src/components/theme-toggle.tsx
Normal file
23
src/components/theme-toggle.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Moon, Sun } from "lucide-react";
|
||||||
|
import { useTheme } from "@/context/theme-provider";
|
||||||
|
|
||||||
|
export function ThemeToggle() {
|
||||||
|
const { theme, setTheme } = useTheme();
|
||||||
|
const isDark = theme === "dark";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={() => setTheme(isDark ? "light" : "dark")}
|
||||||
|
className={`flex items-center cursor-pointer transition-transform duration-500 ${
|
||||||
|
isDark ? "rotate-180" : "rotate-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{isDark ? (
|
||||||
|
<Sun className="h-6 w-6 text-yellow-500 rotate-0 transition-all" />
|
||||||
|
) : (
|
||||||
|
<Moon className="h-6 w-6 text-blue-500 rotate-0 transition-all" />
|
||||||
|
)}
|
||||||
|
<span className="sr-only">Toggle theme</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
59
src/components/ui/alert.tsx
Normal file
59
src/components/ui/alert.tsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const alertVariants = cva(
|
||||||
|
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-background text-foreground",
|
||||||
|
destructive:
|
||||||
|
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const Alert = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
||||||
|
>(({ className, variant, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
role="alert"
|
||||||
|
className={cn(alertVariants({ variant }), className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Alert.displayName = "Alert"
|
||||||
|
|
||||||
|
const AlertTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h5
|
||||||
|
ref={ref}
|
||||||
|
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AlertTitle.displayName = "AlertTitle"
|
||||||
|
|
||||||
|
const AlertDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm [&_p]:leading-relaxed", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
AlertDescription.displayName = "AlertDescription"
|
||||||
|
|
||||||
|
export { Alert, AlertTitle, AlertDescription }
|
||||||
57
src/components/ui/button.tsx
Normal file
57
src/components/ui/button.tsx
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { Slot } from "@radix-ui/react-slot"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default:
|
||||||
|
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||||
|
outline:
|
||||||
|
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||||
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2",
|
||||||
|
sm: "h-8 rounded-md px-3 text-xs",
|
||||||
|
lg: "h-10 rounded-md px-8",
|
||||||
|
icon: "h-9 w-9",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
export interface ButtonProps
|
||||||
|
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||||
|
VariantProps<typeof buttonVariants> {
|
||||||
|
asChild?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||||
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||||
|
const Comp = asChild ? Slot : "button"
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
ref={ref}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
Button.displayName = "Button"
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
76
src/components/ui/card.tsx
Normal file
76
src/components/ui/card.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Card = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"rounded-xl border bg-card text-card-foreground shadow",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Card.displayName = "Card"
|
||||||
|
|
||||||
|
const CardHeader = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardHeader.displayName = "CardHeader"
|
||||||
|
|
||||||
|
const CardTitle = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLHeadingElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<h3
|
||||||
|
ref={ref}
|
||||||
|
className={cn("font-semibold leading-none tracking-tight", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardTitle.displayName = "CardTitle"
|
||||||
|
|
||||||
|
const CardDescription = React.forwardRef<
|
||||||
|
HTMLParagraphElement,
|
||||||
|
React.HTMLAttributes<HTMLParagraphElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<p
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardDescription.displayName = "CardDescription"
|
||||||
|
|
||||||
|
const CardContent = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||||
|
))
|
||||||
|
CardContent.displayName = "CardContent"
|
||||||
|
|
||||||
|
const CardFooter = React.forwardRef<
|
||||||
|
HTMLDivElement,
|
||||||
|
React.HTMLAttributes<HTMLDivElement>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div
|
||||||
|
ref={ref}
|
||||||
|
className={cn("flex items-center p-6 pt-0", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CardFooter.displayName = "CardFooter"
|
||||||
|
|
||||||
|
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
|
||||||
153
src/components/ui/command.tsx
Normal file
153
src/components/ui/command.tsx
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { type DialogProps } from "@radix-ui/react-dialog"
|
||||||
|
import { MagnifyingGlassIcon } from "@radix-ui/react-icons"
|
||||||
|
import { Command as CommandPrimitive } from "cmdk"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
import { Dialog, DialogContent } from "@/components/ui/dialog"
|
||||||
|
|
||||||
|
const Command = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
Command.displayName = CommandPrimitive.displayName
|
||||||
|
|
||||||
|
interface CommandDialogProps extends DialogProps {}
|
||||||
|
|
||||||
|
const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
|
||||||
|
return (
|
||||||
|
<Dialog {...props}>
|
||||||
|
<DialogContent className="overflow-hidden p-0">
|
||||||
|
<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||||
|
{children}
|
||||||
|
</Command>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CommandInput = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Input>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
|
||||||
|
<MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
|
||||||
|
<CommandPrimitive.Input
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))
|
||||||
|
|
||||||
|
CommandInput.displayName = CommandPrimitive.Input.displayName
|
||||||
|
|
||||||
|
const CommandList = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.List>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.List
|
||||||
|
ref={ref}
|
||||||
|
className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
|
||||||
|
CommandList.displayName = CommandPrimitive.List.displayName
|
||||||
|
|
||||||
|
const CommandEmpty = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Empty>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
|
||||||
|
>((props, ref) => (
|
||||||
|
<CommandPrimitive.Empty
|
||||||
|
ref={ref}
|
||||||
|
className="py-6 text-center text-sm"
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
|
||||||
|
CommandEmpty.displayName = CommandPrimitive.Empty.displayName
|
||||||
|
|
||||||
|
const CommandGroup = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Group>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.Group
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
|
||||||
|
CommandGroup.displayName = CommandPrimitive.Group.displayName
|
||||||
|
|
||||||
|
const CommandSeparator = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Separator>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.Separator
|
||||||
|
ref={ref}
|
||||||
|
className={cn("-mx-1 h-px bg-border", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
CommandSeparator.displayName = CommandPrimitive.Separator.displayName
|
||||||
|
|
||||||
|
const CommandItem = React.forwardRef<
|
||||||
|
React.ElementRef<typeof CommandPrimitive.Item>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<CommandPrimitive.Item
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
|
||||||
|
CommandItem.displayName = CommandPrimitive.Item.displayName
|
||||||
|
|
||||||
|
const CommandShortcut = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLSpanElement>) => {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"ml-auto text-xs tracking-widest text-muted-foreground",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
CommandShortcut.displayName = "CommandShortcut"
|
||||||
|
|
||||||
|
export {
|
||||||
|
Command,
|
||||||
|
CommandDialog,
|
||||||
|
CommandInput,
|
||||||
|
CommandList,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandItem,
|
||||||
|
CommandShortcut,
|
||||||
|
CommandSeparator,
|
||||||
|
}
|
||||||
122
src/components/ui/dialog.tsx
Normal file
122
src/components/ui/dialog.tsx
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
"use client"
|
||||||
|
|
||||||
|
import * as React from "react"
|
||||||
|
import * as DialogPrimitive from "@radix-ui/react-dialog"
|
||||||
|
import { Cross2Icon } from "@radix-ui/react-icons"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const Dialog = DialogPrimitive.Root
|
||||||
|
|
||||||
|
const DialogTrigger = DialogPrimitive.Trigger
|
||||||
|
|
||||||
|
const DialogPortal = DialogPrimitive.Portal
|
||||||
|
|
||||||
|
const DialogClose = DialogPrimitive.Close
|
||||||
|
|
||||||
|
const DialogOverlay = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Overlay>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Overlay
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
|
||||||
|
|
||||||
|
const DialogContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<DialogPortal>
|
||||||
|
<DialogOverlay />
|
||||||
|
<DialogPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||||
|
<Cross2Icon className="h-4 w-4" />
|
||||||
|
<span className="sr-only">Close</span>
|
||||||
|
</DialogPrimitive.Close>
|
||||||
|
</DialogPrimitive.Content>
|
||||||
|
</DialogPortal>
|
||||||
|
))
|
||||||
|
DialogContent.displayName = DialogPrimitive.Content.displayName
|
||||||
|
|
||||||
|
const DialogHeader = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col space-y-1.5 text-center sm:text-left",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogHeader.displayName = "DialogHeader"
|
||||||
|
|
||||||
|
const DialogFooter = ({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
DialogFooter.displayName = "DialogFooter"
|
||||||
|
|
||||||
|
const DialogTitle = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Title>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Title
|
||||||
|
ref={ref}
|
||||||
|
className={cn(
|
||||||
|
"text-lg font-semibold leading-none tracking-tight",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogTitle.displayName = DialogPrimitive.Title.displayName
|
||||||
|
|
||||||
|
const DialogDescription = React.forwardRef<
|
||||||
|
React.ElementRef<typeof DialogPrimitive.Description>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
|
||||||
|
>(({ className, ...props }, ref) => (
|
||||||
|
<DialogPrimitive.Description
|
||||||
|
ref={ref}
|
||||||
|
className={cn("text-sm text-muted-foreground", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
DialogDescription.displayName = DialogPrimitive.Description.displayName
|
||||||
|
|
||||||
|
export {
|
||||||
|
Dialog,
|
||||||
|
DialogPortal,
|
||||||
|
DialogOverlay,
|
||||||
|
DialogTrigger,
|
||||||
|
DialogClose,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogFooter,
|
||||||
|
DialogTitle,
|
||||||
|
DialogDescription,
|
||||||
|
}
|
||||||
46
src/components/ui/scroll-area.tsx
Normal file
46
src/components/ui/scroll-area.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const ScrollArea = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
||||||
|
>(({ className, children, ...props }, ref) => (
|
||||||
|
<ScrollAreaPrimitive.Root
|
||||||
|
ref={ref}
|
||||||
|
className={cn("relative overflow-hidden", className)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
||||||
|
{children}
|
||||||
|
</ScrollAreaPrimitive.Viewport>
|
||||||
|
<ScrollBar />
|
||||||
|
<ScrollAreaPrimitive.Corner />
|
||||||
|
</ScrollAreaPrimitive.Root>
|
||||||
|
))
|
||||||
|
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
|
||||||
|
|
||||||
|
const ScrollBar = React.forwardRef<
|
||||||
|
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
>(({ className, orientation = "vertical", ...props }, ref) => (
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
||||||
|
ref={ref}
|
||||||
|
orientation={orientation}
|
||||||
|
className={cn(
|
||||||
|
"flex touch-none select-none transition-colors",
|
||||||
|
orientation === "vertical" &&
|
||||||
|
"h-full w-2.5 border-l border-l-transparent p-[1px]",
|
||||||
|
orientation === "horizontal" &&
|
||||||
|
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
||||||
|
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
||||||
|
))
|
||||||
|
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
|
||||||
|
|
||||||
|
export { ScrollArea, ScrollBar }
|
||||||
15
src/components/ui/skeleton.tsx
Normal file
15
src/components/ui/skeleton.tsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
function Skeleton({
|
||||||
|
className,
|
||||||
|
...props
|
||||||
|
}: React.HTMLAttributes<HTMLDivElement>) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={cn("animate-pulse rounded-md bg-primary/10", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Skeleton }
|
||||||
29
src/components/ui/sonner.tsx
Normal file
29
src/components/ui/sonner.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { useTheme } from "next-themes"
|
||||||
|
import { Toaster as Sonner } from "sonner"
|
||||||
|
|
||||||
|
type ToasterProps = React.ComponentProps<typeof Sonner>
|
||||||
|
|
||||||
|
const Toaster = ({ ...props }: ToasterProps) => {
|
||||||
|
const { theme = "system" } = useTheme()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Sonner
|
||||||
|
theme={theme as ToasterProps["theme"]}
|
||||||
|
className="toaster group"
|
||||||
|
toastOptions={{
|
||||||
|
classNames: {
|
||||||
|
toast:
|
||||||
|
"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
|
||||||
|
description: "group-[.toast]:text-muted-foreground",
|
||||||
|
actionButton:
|
||||||
|
"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
|
||||||
|
cancelButton:
|
||||||
|
"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Toaster }
|
||||||
30
src/components/ui/tooltip.tsx
Normal file
30
src/components/ui/tooltip.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip"
|
||||||
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
|
const TooltipProvider = TooltipPrimitive.Provider
|
||||||
|
|
||||||
|
const Tooltip = TooltipPrimitive.Root
|
||||||
|
|
||||||
|
const TooltipTrigger = TooltipPrimitive.Trigger
|
||||||
|
|
||||||
|
const TooltipContent = React.forwardRef<
|
||||||
|
React.ElementRef<typeof TooltipPrimitive.Content>,
|
||||||
|
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
|
||||||
|
>(({ className, sideOffset = 4, ...props }, ref) => (
|
||||||
|
<TooltipPrimitive.Portal>
|
||||||
|
<TooltipPrimitive.Content
|
||||||
|
ref={ref}
|
||||||
|
sideOffset={sideOffset}
|
||||||
|
className={cn(
|
||||||
|
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
</TooltipPrimitive.Portal>
|
||||||
|
))
|
||||||
|
TooltipContent.displayName = TooltipPrimitive.Content.displayName
|
||||||
|
|
||||||
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
|
||||||
78
src/components/weather-details.tsx
Normal file
78
src/components/weather-details.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
||||||
|
import { Sunrise, Sunset, Compass, Gauge } from "lucide-react";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import type { WeatherData } from "@/api/types";
|
||||||
|
|
||||||
|
interface WeatherDetailsProps {
|
||||||
|
data: WeatherData;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WeatherDetails({ data }: WeatherDetailsProps) {
|
||||||
|
const { wind, main, sys } = data;
|
||||||
|
|
||||||
|
// Format time using date-fns
|
||||||
|
const formatTime = (timestamp: number) => {
|
||||||
|
return format(new Date(timestamp * 1000), "h:mm a");
|
||||||
|
};
|
||||||
|
|
||||||
|
// Convert wind degree to direction
|
||||||
|
const getWindDirection = (degree: number) => {
|
||||||
|
const directions = ["N", "NE", "E", "SE", "S", "SW", "W", "NW"];
|
||||||
|
const index =
|
||||||
|
Math.round(((degree %= 360) < 0 ? degree + 360 : degree) / 45) % 8;
|
||||||
|
return directions[index];
|
||||||
|
};
|
||||||
|
|
||||||
|
const details = [
|
||||||
|
{
|
||||||
|
title: "Sunrise",
|
||||||
|
value: formatTime(sys.sunrise),
|
||||||
|
icon: Sunrise,
|
||||||
|
color: "text-orange-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Sunset",
|
||||||
|
value: formatTime(sys.sunset),
|
||||||
|
icon: Sunset,
|
||||||
|
color: "text-blue-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Wind Direction",
|
||||||
|
value: `${getWindDirection(wind.deg)} (${wind.deg}°)`,
|
||||||
|
icon: Compass,
|
||||||
|
color: "text-green-500",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Pressure",
|
||||||
|
value: `${main.pressure} hPa`,
|
||||||
|
icon: Gauge,
|
||||||
|
color: "text-purple-500",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>Weather Details</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid gap-6 sm:grid-cols-2">
|
||||||
|
{details.map((detail) => (
|
||||||
|
<div
|
||||||
|
key={detail.title}
|
||||||
|
className="flex items-center gap-3 rounded-lg border p-4"
|
||||||
|
>
|
||||||
|
<detail.icon className={`h-5 w-5 ${detail.color}`} />
|
||||||
|
<div>
|
||||||
|
<p className="text-sm font-medium leading-none">
|
||||||
|
{detail.title}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">{detail.value}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
100
src/components/weather-forecast.tsx
Normal file
100
src/components/weather-forecast.tsx
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
|
||||||
|
import { ArrowDown, ArrowUp, Droplets, Wind } from "lucide-react";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import type { ForecastData } from "@/api/types";
|
||||||
|
|
||||||
|
interface WeatherForecastProps {
|
||||||
|
data: ForecastData;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DailyForecast {
|
||||||
|
date: number;
|
||||||
|
temp_min: number;
|
||||||
|
temp_max: number;
|
||||||
|
humidity: number;
|
||||||
|
wind: number;
|
||||||
|
weather: {
|
||||||
|
id: number;
|
||||||
|
main: string;
|
||||||
|
description: string;
|
||||||
|
icon: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function WeatherForecast({ data }: WeatherForecastProps) {
|
||||||
|
// Group forecast by day and get daily min/max
|
||||||
|
const dailyForecasts = data.list.reduce((acc, forecast) => {
|
||||||
|
const date = format(new Date(forecast.dt * 1000), "yyyy-MM-dd");
|
||||||
|
|
||||||
|
if (!acc[date]) {
|
||||||
|
acc[date] = {
|
||||||
|
temp_min: forecast.main.temp_min,
|
||||||
|
temp_max: forecast.main.temp_max,
|
||||||
|
humidity: forecast.main.humidity,
|
||||||
|
wind: forecast.wind.speed,
|
||||||
|
weather: forecast.weather[0],
|
||||||
|
date: forecast.dt,
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
acc[date].temp_min = Math.min(acc[date].temp_min, forecast.main.temp_min);
|
||||||
|
acc[date].temp_max = Math.max(acc[date].temp_max, forecast.main.temp_max);
|
||||||
|
}
|
||||||
|
|
||||||
|
return acc;
|
||||||
|
}, {} as Record<string, DailyForecast>);
|
||||||
|
|
||||||
|
// Get next 5 days
|
||||||
|
const nextDays = Object.values(dailyForecasts).slice(1, 6);
|
||||||
|
|
||||||
|
// Format temperature
|
||||||
|
const formatTemp = (temp: number) => `${Math.round(temp)}°`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>5-Day Forecast</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{nextDays.map((day) => (
|
||||||
|
<div
|
||||||
|
key={day.date}
|
||||||
|
className="grid grid-cols-3 items-center gap-4 rounded-lg border p-4"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium">
|
||||||
|
{format(new Date(day.date * 1000), "EEE, MMM d")}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground capitalize">
|
||||||
|
{day.weather.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
<span className="flex items-center text-blue-500">
|
||||||
|
<ArrowDown className="mr-1 h-4 w-4" />
|
||||||
|
{formatTemp(day.temp_min)}
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center text-red-500">
|
||||||
|
<ArrowUp className="mr-1 h-4 w-4" />
|
||||||
|
{formatTemp(day.temp_max)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end gap-4">
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Droplets className="h-4 w-4 text-blue-500" />
|
||||||
|
<span className="text-sm">{day.humidity}%</span>
|
||||||
|
</span>
|
||||||
|
<span className="flex items-center gap-1">
|
||||||
|
<Wind className="h-4 w-4 text-blue-500" />
|
||||||
|
<span className="text-sm">{day.wind}m/s</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
73
src/context/theme-provider.tsx
Normal file
73
src/context/theme-provider.tsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import { createContext, useContext, useEffect, useState } from "react";
|
||||||
|
|
||||||
|
type Theme = "dark" | "light" | "system";
|
||||||
|
|
||||||
|
type ThemeProviderProps = {
|
||||||
|
children: React.ReactNode;
|
||||||
|
defaultTheme?: Theme;
|
||||||
|
storageKey?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ThemeProviderState = {
|
||||||
|
theme: Theme;
|
||||||
|
setTheme: (theme: Theme) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const initialState: ThemeProviderState = {
|
||||||
|
theme: "system",
|
||||||
|
setTheme: () => null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
|
||||||
|
|
||||||
|
export function ThemeProvider({
|
||||||
|
children,
|
||||||
|
defaultTheme = "system",
|
||||||
|
storageKey = "vite-ui-theme",
|
||||||
|
...props
|
||||||
|
}: ThemeProviderProps) {
|
||||||
|
const [theme, setTheme] = useState<Theme>(
|
||||||
|
() => (localStorage.getItem(storageKey) as Theme) || defaultTheme
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const root = window.document.documentElement;
|
||||||
|
|
||||||
|
root.classList.remove("light", "dark");
|
||||||
|
|
||||||
|
if (theme === "system") {
|
||||||
|
const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
|
||||||
|
.matches
|
||||||
|
? "dark"
|
||||||
|
: "light";
|
||||||
|
|
||||||
|
root.classList.add(systemTheme);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
root.classList.add(theme);
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
const value = {
|
||||||
|
theme,
|
||||||
|
setTheme: (theme: Theme) => {
|
||||||
|
localStorage.setItem(storageKey, theme);
|
||||||
|
setTheme(theme);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProviderContext.Provider {...props} value={value}>
|
||||||
|
{children}
|
||||||
|
</ThemeProviderContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useTheme = () => {
|
||||||
|
const context = useContext(ThemeProviderContext);
|
||||||
|
|
||||||
|
if (context === undefined)
|
||||||
|
throw new Error("useTheme must be used within a ThemeProvider");
|
||||||
|
|
||||||
|
return context;
|
||||||
|
};
|
||||||
70
src/hooks/use-favorite.ts
Normal file
70
src/hooks/use-favorite.ts
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
// src/hooks/use-favorites.ts
|
||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useLocalStorage } from "./use-local-storage";
|
||||||
|
|
||||||
|
export interface FavoriteCity {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
lat: number;
|
||||||
|
lon: number;
|
||||||
|
country: string;
|
||||||
|
state?: string;
|
||||||
|
addedAt: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useFavorites() {
|
||||||
|
const [favorites, setFavorites] = useLocalStorage<FavoriteCity[]>(
|
||||||
|
"favorites",
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const favoritesQuery = useQuery({
|
||||||
|
queryKey: ["favorites"],
|
||||||
|
queryFn: () => favorites,
|
||||||
|
initialData: favorites,
|
||||||
|
staleTime: Infinity, // Since we're managing the data in localStorage
|
||||||
|
});
|
||||||
|
|
||||||
|
const addFavorite = useMutation({
|
||||||
|
mutationFn: async (city: Omit<FavoriteCity, "id" | "addedAt">) => {
|
||||||
|
const newFavorite: FavoriteCity = {
|
||||||
|
...city,
|
||||||
|
id: `${city.lat}-${city.lon}`,
|
||||||
|
addedAt: Date.now(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Prevent duplicates
|
||||||
|
const exists = favorites.some((fav) => fav.id === newFavorite.id);
|
||||||
|
if (exists) return favorites;
|
||||||
|
|
||||||
|
const newFavorites = [...favorites, newFavorite];
|
||||||
|
setFavorites(newFavorites);
|
||||||
|
return newFavorites;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
// Invalidate and refetch
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["favorites"] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const removeFavorite = useMutation({
|
||||||
|
mutationFn: async (cityId: string) => {
|
||||||
|
const newFavorites = favorites.filter((city) => city.id !== cityId);
|
||||||
|
setFavorites(newFavorites);
|
||||||
|
return newFavorites;
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
// Invalidate and refetch
|
||||||
|
queryClient.invalidateQueries({ queryKey: ["favorites"] });
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
favorites: favoritesQuery.data,
|
||||||
|
addFavorite,
|
||||||
|
removeFavorite,
|
||||||
|
isFavorite: (lat: number, lon: number) =>
|
||||||
|
favorites.some((city) => city.lat === lat && city.lon === lon),
|
||||||
|
};
|
||||||
|
}
|
||||||
81
src/hooks/use-geolocation.ts
Normal file
81
src/hooks/use-geolocation.ts
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import type { Coordinates } from "@/api/types";
|
||||||
|
|
||||||
|
interface GeolocationState {
|
||||||
|
coordinates: Coordinates | null;
|
||||||
|
error: string | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useGeolocation() {
|
||||||
|
const [locationData, setLocationData] = useState<GeolocationState>({
|
||||||
|
coordinates: null,
|
||||||
|
error: null,
|
||||||
|
isLoading: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const getLocation = () => {
|
||||||
|
setLocationData((prev) => ({ ...prev, isLoading: true, error: null }));
|
||||||
|
|
||||||
|
if (!navigator.geolocation) {
|
||||||
|
setLocationData({
|
||||||
|
coordinates: null,
|
||||||
|
error: "Geolocation is not supported by your browser",
|
||||||
|
isLoading: false,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
navigator.geolocation.getCurrentPosition(
|
||||||
|
(position) => {
|
||||||
|
setLocationData({
|
||||||
|
coordinates: {
|
||||||
|
lat: position.coords.latitude,
|
||||||
|
lon: position.coords.longitude,
|
||||||
|
},
|
||||||
|
error: null,
|
||||||
|
isLoading: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
(error) => {
|
||||||
|
let errorMessage: string;
|
||||||
|
|
||||||
|
switch (error.code) {
|
||||||
|
case error.PERMISSION_DENIED:
|
||||||
|
errorMessage =
|
||||||
|
"Location permission denied. Please enable location access.";
|
||||||
|
break;
|
||||||
|
case error.POSITION_UNAVAILABLE:
|
||||||
|
errorMessage = "Location information is unavailable.";
|
||||||
|
break;
|
||||||
|
case error.TIMEOUT:
|
||||||
|
errorMessage = "Location request timed out.";
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
errorMessage = "An unknown error occurred.";
|
||||||
|
}
|
||||||
|
|
||||||
|
setLocationData({
|
||||||
|
coordinates: null,
|
||||||
|
error: errorMessage,
|
||||||
|
isLoading: false,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
{
|
||||||
|
enableHighAccuracy: true,
|
||||||
|
timeout: 5000,
|
||||||
|
maximumAge: 0,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Get location on component mount
|
||||||
|
useEffect(() => {
|
||||||
|
getLocation();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
...locationData,
|
||||||
|
getLocation, // Expose method to manually refresh location
|
||||||
|
};
|
||||||
|
}
|
||||||
23
src/hooks/use-local-storage.ts
Normal file
23
src/hooks/use-local-storage.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
|
export function useLocalStorage<T>(key: string, initialValue: T) {
|
||||||
|
const [storedValue, setStoredValue] = useState<T>(() => {
|
||||||
|
try {
|
||||||
|
const item = window.localStorage.getItem(key);
|
||||||
|
return item ? JSON.parse(item) : initialValue;
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
return initialValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(key, JSON.stringify(storedValue));
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
|
}
|
||||||
|
}, [key, storedValue]);
|
||||||
|
|
||||||
|
return [storedValue, setStoredValue] as const;
|
||||||
|
}
|
||||||
67
src/hooks/use-search-history.ts
Normal file
67
src/hooks/use-search-history.ts
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import { useLocalStorage } from "./use-local-storage";
|
||||||
|
|
||||||
|
interface SearchHistoryItem {
|
||||||
|
id: string;
|
||||||
|
query: string;
|
||||||
|
lat: number;
|
||||||
|
lon: number;
|
||||||
|
name: string;
|
||||||
|
country: string;
|
||||||
|
state?: string;
|
||||||
|
searchedAt: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useSearchHistory() {
|
||||||
|
const [history, setHistory] = useLocalStorage<SearchHistoryItem[]>(
|
||||||
|
"search-history",
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const historyQuery = useQuery({
|
||||||
|
queryKey: ["search-history"],
|
||||||
|
queryFn: () => history,
|
||||||
|
initialData: history,
|
||||||
|
});
|
||||||
|
|
||||||
|
const addToHistory = useMutation({
|
||||||
|
mutationFn: async (
|
||||||
|
search: Omit<SearchHistoryItem, "id" | "searchedAt">
|
||||||
|
) => {
|
||||||
|
const newSearch: SearchHistoryItem = {
|
||||||
|
...search,
|
||||||
|
id: `${search.lat}-${search.lon}-${Date.now()}`,
|
||||||
|
searchedAt: Date.now(),
|
||||||
|
};
|
||||||
|
|
||||||
|
// Remove duplicates and keep only last 10 searches
|
||||||
|
const filteredHistory = history.filter(
|
||||||
|
(item) => !(item.lat === search.lat && item.lon === search.lon)
|
||||||
|
);
|
||||||
|
const newHistory = [newSearch, ...filteredHistory].slice(0, 10);
|
||||||
|
|
||||||
|
setHistory(newHistory);
|
||||||
|
return newHistory;
|
||||||
|
},
|
||||||
|
onSuccess: (newHistory) => {
|
||||||
|
queryClient.setQueryData(["search-history"], newHistory);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const clearHistory = useMutation({
|
||||||
|
mutationFn: async () => {
|
||||||
|
setHistory([]);
|
||||||
|
return [];
|
||||||
|
},
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.setQueryData(["search-history"], []);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
history: historyQuery.data ?? [],
|
||||||
|
addToHistory,
|
||||||
|
clearHistory,
|
||||||
|
};
|
||||||
|
}
|
||||||
44
src/hooks/use-weather.ts
Normal file
44
src/hooks/use-weather.ts
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { weatherAPI } from "@/api/weather";
|
||||||
|
import type { Coordinates } from "@/api/types";
|
||||||
|
|
||||||
|
export const WEATHER_KEYS = {
|
||||||
|
weather: (coords: Coordinates) => ["weather", coords] as const,
|
||||||
|
forecast: (coords: Coordinates) => ["forecast", coords] as const,
|
||||||
|
location: (coords: Coordinates) => ["location", coords] as const,
|
||||||
|
search: (query: string) => ["location-search", query] as const,
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export function useWeatherQuery(coordinates: Coordinates | null) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: WEATHER_KEYS.weather(coordinates ?? { lat: 0, lon: 0 }),
|
||||||
|
queryFn: () =>
|
||||||
|
coordinates ? weatherAPI.getCurrentWeather(coordinates) : null,
|
||||||
|
enabled: !!coordinates,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useForecastQuery(coordinates: Coordinates | null) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: WEATHER_KEYS.forecast(coordinates ?? { lat: 0, lon: 0 }),
|
||||||
|
queryFn: () => (coordinates ? weatherAPI.getForecast(coordinates) : null),
|
||||||
|
enabled: !!coordinates,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useReverseGeocodeQuery(coordinates: Coordinates | null) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: WEATHER_KEYS.location(coordinates ?? { lat: 0, lon: 0 }),
|
||||||
|
queryFn: () =>
|
||||||
|
coordinates ? weatherAPI.reverseGeocode(coordinates) : null,
|
||||||
|
enabled: !!coordinates,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useLocationSearch(query: string) {
|
||||||
|
return useQuery({
|
||||||
|
queryKey: WEATHER_KEYS.search(query),
|
||||||
|
queryFn: () => weatherAPI.searchLocations(query),
|
||||||
|
enabled: query.length >= 3,
|
||||||
|
});
|
||||||
|
}
|
||||||
67
src/index.css
Normal file
67
src/index.css
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
:root {
|
||||||
|
--background: 0 0% 100%;
|
||||||
|
--foreground: 0 0% 3.9%;
|
||||||
|
--card: 0 0% 100%;
|
||||||
|
--card-foreground: 0 0% 3.9%;
|
||||||
|
--popover: 0 0% 100%;
|
||||||
|
--popover-foreground: 0 0% 3.9%;
|
||||||
|
--primary: 0 0% 9%;
|
||||||
|
--primary-foreground: 0 0% 98%;
|
||||||
|
--secondary: 0 0% 96.1%;
|
||||||
|
--secondary-foreground: 0 0% 9%;
|
||||||
|
--muted: 0 0% 96.1%;
|
||||||
|
--muted-foreground: 0 0% 45.1%;
|
||||||
|
--accent: 0 0% 96.1%;
|
||||||
|
--accent-foreground: 0 0% 9%;
|
||||||
|
--destructive: 0 84.2% 60.2%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 0 0% 89.8%;
|
||||||
|
--input: 0 0% 89.8%;
|
||||||
|
--ring: 0 0% 3.9%;
|
||||||
|
--chart-1: 12 76% 61%;
|
||||||
|
--chart-2: 173 58% 39%;
|
||||||
|
--chart-3: 197 37% 24%;
|
||||||
|
--chart-4: 43 74% 66%;
|
||||||
|
--chart-5: 27 87% 67%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
.dark {
|
||||||
|
--background: 0 0% 3.9%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
|
--card: 0 0% 3.9%;
|
||||||
|
--card-foreground: 0 0% 98%;
|
||||||
|
--popover: 0 0% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
|
--primary: 0 0% 98%;
|
||||||
|
--primary-foreground: 0 0% 9%;
|
||||||
|
--secondary: 0 0% 14.9%;
|
||||||
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
--muted: 0 0% 14.9%;
|
||||||
|
--muted-foreground: 0 0% 63.9%;
|
||||||
|
--accent: 0 0% 14.9%;
|
||||||
|
--accent-foreground: 0 0% 98%;
|
||||||
|
--destructive: 0 62.8% 30.6%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 0 0% 14.9%;
|
||||||
|
--input: 0 0% 14.9%;
|
||||||
|
--ring: 0 0% 83.1%;
|
||||||
|
--chart-1: 220 70% 50%;
|
||||||
|
--chart-2: 160 60% 45%;
|
||||||
|
--chart-3: 30 80% 55%;
|
||||||
|
--chart-4: 280 65% 60%;
|
||||||
|
--chart-5: 340 75% 55%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
}
|
||||||
|
}
|
||||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
10
src/main.tsx
Normal file
10
src/main.tsx
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
61
src/pages/city-page.tsx
Normal file
61
src/pages/city-page.tsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { useParams, useSearchParams } from "react-router-dom";
|
||||||
|
import { useWeatherQuery, useForecastQuery } from "@/hooks/use-weather";
|
||||||
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||||
|
import { AlertTriangle } from "lucide-react";
|
||||||
|
import { CurrentWeather } from "../components/current-weather";
|
||||||
|
import { HourlyTemperature } from "../components/hourly-temprature";
|
||||||
|
import { WeatherDetails } from "../components/weather-details";
|
||||||
|
import { WeatherForecast } from "../components/weather-forecast";
|
||||||
|
import WeatherSkeleton from "../components/loading-skeleton";
|
||||||
|
import { FavoriteButton } from "@/components/favorite-button";
|
||||||
|
|
||||||
|
export function CityPage() {
|
||||||
|
const [searchParams] = useSearchParams();
|
||||||
|
const params = useParams();
|
||||||
|
const lat = parseFloat(searchParams.get("lat") || "0");
|
||||||
|
const lon = parseFloat(searchParams.get("lon") || "0");
|
||||||
|
|
||||||
|
const coordinates = { lat, lon };
|
||||||
|
|
||||||
|
const weatherQuery = useWeatherQuery(coordinates);
|
||||||
|
const forecastQuery = useForecastQuery(coordinates);
|
||||||
|
|
||||||
|
if (weatherQuery.error || forecastQuery.error) {
|
||||||
|
return (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertTriangle className="h-4 w-4" />
|
||||||
|
<AlertDescription>
|
||||||
|
Failed to load weather data. Please try again.
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!weatherQuery.data || !forecastQuery.data || !params.cityName) {
|
||||||
|
return <WeatherSkeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-3xl font-bold tracking-tight">
|
||||||
|
{params.cityName}, {weatherQuery.data.sys.country}
|
||||||
|
</h1>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<FavoriteButton
|
||||||
|
data={{ ...weatherQuery.data, name: params.cityName }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6">
|
||||||
|
<CurrentWeather data={weatherQuery.data} />
|
||||||
|
<HourlyTemperature data={forecastQuery.data} />
|
||||||
|
<div className="grid gap-6 md:grid-cols-2 items-start">
|
||||||
|
<WeatherDetails data={weatherQuery.data} />
|
||||||
|
<WeatherForecast data={forecastQuery.data} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
132
src/pages/weather-dashboard.tsx
Normal file
132
src/pages/weather-dashboard.tsx
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import {
|
||||||
|
useForecastQuery,
|
||||||
|
useReverseGeocodeQuery,
|
||||||
|
useWeatherQuery,
|
||||||
|
} from "@/hooks/use-weather";
|
||||||
|
import { CurrentWeather } from "../components/current-weather";
|
||||||
|
import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
|
||||||
|
import { Button } from "../components/ui/button";
|
||||||
|
import { MapPin, AlertTriangle, RefreshCw } from "lucide-react";
|
||||||
|
import { useGeolocation } from "@/hooks/use-geolocation";
|
||||||
|
import { WeatherDetails } from "../components/weather-details";
|
||||||
|
import { WeatherForecast } from "../components/weather-forecast";
|
||||||
|
import { HourlyTemperature } from "../components/hourly-temprature";
|
||||||
|
import WeatherSkeleton from "../components/loading-skeleton";
|
||||||
|
import { FavoriteCities } from "@/components/favorite-cities";
|
||||||
|
|
||||||
|
export function WeatherDashboard() {
|
||||||
|
const {
|
||||||
|
coordinates,
|
||||||
|
error: locationError,
|
||||||
|
isLoading: locationLoading,
|
||||||
|
getLocation,
|
||||||
|
} = useGeolocation();
|
||||||
|
|
||||||
|
const weatherQuery = useWeatherQuery(coordinates);
|
||||||
|
const forecastQuery = useForecastQuery(coordinates);
|
||||||
|
const locationQuery = useReverseGeocodeQuery(coordinates);
|
||||||
|
|
||||||
|
// Function to refresh all data
|
||||||
|
const handleRefresh = () => {
|
||||||
|
getLocation();
|
||||||
|
if (coordinates) {
|
||||||
|
weatherQuery.refetch();
|
||||||
|
forecastQuery.refetch();
|
||||||
|
locationQuery.refetch();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (locationLoading) {
|
||||||
|
return <WeatherSkeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (locationError) {
|
||||||
|
return (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertTriangle className="h-4 w-4" />
|
||||||
|
<AlertTitle>Location Error</AlertTitle>
|
||||||
|
<AlertDescription className="flex flex-col gap-4">
|
||||||
|
<p>{locationError}</p>
|
||||||
|
<Button variant="outline" onClick={getLocation} className="w-fit">
|
||||||
|
<MapPin className="mr-2 h-4 w-4" />
|
||||||
|
Enable Location
|
||||||
|
</Button>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!coordinates) {
|
||||||
|
return (
|
||||||
|
<Alert>
|
||||||
|
<MapPin className="h-4 w-4" />
|
||||||
|
<AlertTitle>Location Required</AlertTitle>
|
||||||
|
<AlertDescription className="flex flex-col gap-4">
|
||||||
|
<p>Please enable location access to see your local weather.</p>
|
||||||
|
<Button variant="outline" onClick={getLocation} className="w-fit">
|
||||||
|
<MapPin className="mr-2 h-4 w-4" />
|
||||||
|
Enable Location
|
||||||
|
</Button>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const locationName = locationQuery.data?.[0];
|
||||||
|
|
||||||
|
if (weatherQuery.error || forecastQuery.error) {
|
||||||
|
return (
|
||||||
|
<Alert variant="destructive">
|
||||||
|
<AlertTriangle className="h-4 w-4" />
|
||||||
|
<AlertTitle>Error</AlertTitle>
|
||||||
|
<AlertDescription className="flex flex-col gap-4">
|
||||||
|
<p>Failed to fetch weather data. Please try again.</p>
|
||||||
|
<Button variant="outline" onClick={handleRefresh} className="w-fit">
|
||||||
|
<RefreshCw className="mr-2 h-4 w-4" />
|
||||||
|
Retry
|
||||||
|
</Button>
|
||||||
|
</AlertDescription>
|
||||||
|
</Alert>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!weatherQuery.data || !forecastQuery.data) {
|
||||||
|
return <WeatherSkeleton />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<FavoriteCities />
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h1 className="text-xl font-bold tracking-tight">My Location</h1>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="icon"
|
||||||
|
onClick={handleRefresh}
|
||||||
|
disabled={weatherQuery.isFetching || forecastQuery.isFetching}
|
||||||
|
>
|
||||||
|
<RefreshCw
|
||||||
|
className={`h-4 w-4 ${
|
||||||
|
weatherQuery.isFetching ? "animate-spin" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6">
|
||||||
|
<div className="flex flex-col lg:flex-row gap-4">
|
||||||
|
<CurrentWeather
|
||||||
|
data={weatherQuery.data}
|
||||||
|
locationName={locationName}
|
||||||
|
/>
|
||||||
|
<HourlyTemperature data={forecastQuery.data} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-6 md:grid-cols-2 items-start">
|
||||||
|
<WeatherDetails data={weatherQuery.data} />
|
||||||
|
<WeatherForecast data={forecastQuery.data} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
57
tailwind.config.js
Normal file
57
tailwind.config.js
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
darkMode: ["class"],
|
||||||
|
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
borderRadius: {
|
||||||
|
lg: 'var(--radius)',
|
||||||
|
md: 'calc(var(--radius) - 2px)',
|
||||||
|
sm: 'calc(var(--radius) - 4px)'
|
||||||
|
},
|
||||||
|
colors: {
|
||||||
|
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))'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
plugins: [require("tailwindcss-animate")],
|
||||||
|
};
|
||||||
31
tsconfig.app.json
Normal file
31
tsconfig.app.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
},
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
17
tsconfig.json
Normal file
17
tsconfig.json
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.app.json"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
24
tsconfig.node.json
Normal file
24
tsconfig.node.json
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"noUncheckedSideEffectImports": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
12
vite.config.ts
Normal file
12
vite.config.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import path from "path";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
import { defineConfig } from "vite";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user