Cloudcast

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "singleAttributePerLine": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "overrides": [
    {
      "files": "*.html",
      "options": {
        "bracketSameLine": true,
        "singleAttributePerLine": false
      }
    }
  ]
}

config-index.ts

/**
 * @copyright 2025 codewithsadee
 * @license Apache-2.0
 */

/**
 * Types
 */
import type { LngLatLike } from 'mapbox-gl';

export const WEATHER_API = {
  DEFAULTS: {
    LAT: 40.2338211,
    LON: -84.4096729,
    UNIT: 'metric',
    LANG: 'en',
    SEARCH_RESULT_LIMIT: 5,
  },
} as const;

export const MAPBOX = {
  DEFAULTS: {
    CENTER: [WEATHER_API.DEFAULTS.LON, WEATHER_API.DEFAULTS.LAT] as LngLatLike,
    ZOOM: 12.5,
  },
} as const;

export const APP = {
  STORE_KEY: {
    LAT: 'cloudcast-lat',
    LON: 'cloudcast-lon',
    UNIT: 'cloudcast-unit',
  },
  UNIT: {
    TEMP: {
      metric: '°C',
      imperial: '°F',
    },
    WIND: {
      metric: 'm/s',
      imperial: 'mph',
    },
  },
} as const;

favicon.svg

<svg data-logo="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 41">
  <g id="logogram" transform="translate(0, 0) rotate(0) translate(30, 20.5) scale(-1, 1) translate(-30, -20.5)"><path d="M39.3509 32.43C45.9784 32.43 51.3509 27.0574 51.3509 20.43C51.3509 13.8026 45.9784 8.42999 39.3509 8.42999C33.1311 8.42999 28.0165 13.1621 27.4109 19.2224C24.9593 18.1136 22.3106 17.4509 19.5981 17.2765C21.1104 7.72911 29.3783 0.429993 39.3509 0.429993C50.3966 0.429993 59.3509 9.3843 59.3509 20.43C59.3509 31.0728 51.0379 39.774 40.5509 40.3946V40.43H27.3704V38.6845C27.3704 36.417 26.4352 34.2121 24.7214 32.5636C23.0026 30.9103 20.6417 29.9573 18.1509 29.9573C15.6601 29.9573 13.2992 30.9103 11.5804 32.5636C9.86652 34.2121 8.93137 36.417 8.93137 38.6845V40.43H0.150879V38.6418C0.150879 33.9671 2.09092 29.5205 5.48429 26.2697C8.7691 23.123 13.1556 21.3402 17.7219 21.2349C17.8647 21.2316 18.0077 21.23 18.1509 21.23C18.2617 21.23 18.3724 21.231 18.4831 21.233C23.0841 21.3151 27.5095 23.1007 30.8175 26.2698C32.65 28.0253 34.0586 30.1295 34.9668 32.43H39.3509Z" fill="#FF6900"/><path d="M21.8278 35.3544C22.803 36.2025 23.3509 37.3527 23.3509 38.552V40.43H12.9509V38.552C12.9509 37.3527 13.4987 36.2025 14.4739 35.3544C15.4491 34.5064 16.7718 34.03 18.1509 34.03C19.53 34.03 20.8526 34.5064 21.8278 35.3544Z" fill="#FF6900"/><path d="M43.9327 18.4663C42.4867 18.4663 41.3145 17.2941 41.3145 15.8482V15.1936C41.3145 14.1091 40.4354 13.23 39.3509 13.23C38.2664 13.23 37.3873 14.1091 37.3873 15.1936V15.8482C37.3873 17.2941 36.2151 18.4663 34.7691 18.4663H34.1145C33.03 18.4663 32.1509 19.3455 32.1509 20.43C32.1509 21.5145 33.03 22.3936 34.1145 22.3936H34.7691C36.2151 22.3936 37.3873 23.5658 37.3873 25.0118V25.6664C37.3873 26.7508 38.2664 27.63 39.3509 27.63C40.4354 27.63 41.3145 26.7508 41.3145 25.6664V25.0118C41.3145 23.5658 42.4867 22.3936 43.9327 22.3936H44.5872C45.6717 22.3936 46.5509 21.5145 46.5509 20.43C46.5509 19.3455 45.6717 18.4663 44.5872 18.4663H43.9327Z" fill="#FF6900"/><path d="M11.351 3.63004C11.351 5.39732 12.7837 6.82998 14.5509 6.82998H15.3509C16.6764 6.82998 17.7509 7.9045 17.7509 9.22998C17.7509 10.5555 16.6764 11.63 15.3509 11.63H14.5509C12.7837 11.63 11.351 13.0626 11.351 14.8299V15.63C11.351 16.9555 10.2765 18.03 8.95099 18.03C7.62551 18.03 6.55099 16.9555 6.55099 15.63L6.55099 14.83C6.55099 13.0627 5.1183 11.63 3.35099 11.63H2.55088C1.2254 11.63 0.150879 10.5555 0.150879 9.22998C0.150879 7.9045 1.2254 6.82998 2.55088 6.82998H3.351C5.1183 6.82998 6.55099 5.3973 6.55099 3.62999L6.55099 2.82999C6.55099 1.50451 7.62551 0.429993 8.95099 0.429993C10.2765 0.429993 11.351 1.50451 11.351 2.82999V3.63004Z" fill="#FF6900"/></g>
  <g id="logotype" transform="translate(60, 20.5)"></g>
</svg>

HourlyWeatherTabs.tsx

/**
 * Types
 */
type Tab =
  | 'overview'
  | 'precipitation'
  | 'wind'
  | 'humidity'
  | 'cloudCover'
  | 'pressure'
  | 'uv'
  | 'visibility'
  | 'feelsLike';

/**
 * Constants
 */
const TABS_LIST = [
  {
    title: 'Overview',
    value: 'overview',
  },
  {
    title: 'Precipitation',
    value: 'precipitation',
  },
  {
    title: 'Wind',
    value: 'wind',
  },
  {
    title: 'Humidity',
    value: 'humidity',
  },
  {
    title: 'Cloud cover',
    value: 'cloudCover',
  },
  {
    title: 'Pressure',
    value: 'pressure',
  },
  {
    title: 'UV',
    value: 'uv',
  },
  {
    title: 'Visibility',
    value: 'visibility',
  },
  {
    title: 'Feels like',
    value: 'feelsLike',
  },
];

index.css

@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --font-sans: 'Inter', sans-serif;
}

:root {
  --radius: 0.65rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.646 0.222 41.116);
  --primary-foreground: oklch(0.98 0.016 73.684);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.75 0.183 55.934);
  --chart-1: oklch(0.837 0.128 66.29);
  --chart-2: oklch(0.705 0.213 47.604);
  --chart-3: oklch(0.646 0.222 41.116);
  --chart-4: oklch(0.553 0.195 38.402);
  --chart-5: oklch(0.47 0.157 37.304);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.141 0.005 285.823);
  --sidebar-primary: oklch(0.646 0.222 41.116);
  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
  --sidebar-accent: oklch(0.967 0.001 286.375);
  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
  --sidebar-border: oklch(0.92 0.004 286.32);
  --sidebar-ring: oklch(0.75 0.183 55.934);

  /* Weather chart color */
  --temp-high: oklch(0.58 0.22 27);
  --temp-mid: oklch(0.77 0.16 70);
  --temp-low: oklch(0.7 0.15 162);
  --rain: oklch(0.49 0.22 264);
  --snow: oklch(0.75 0.14 233);
  --wind-speed: oklch(0.68 0.15 237);
  --wind-gust: oklch(0.68 0.15 237);
  --humidity: oklch(0.68 0.15 237);
  --dew-point: oklch(0.7 0.12 183);
  --pressure: oklch(0.51 0.23 277);
  --visibility: oklch(0.6 0.13 163);
  --clouds: oklch(0.57 0.15 231);
  --uv: oklch(0.68 0.12 79.2);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.705 0.213 47.604);
  --primary-foreground: oklch(0.98 0.016 73.684);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.408 0.123 38.172);
  --chart-1: oklch(0.837 0.128 66.29);
  --chart-2: oklch(0.705 0.213 47.604);
  --chart-3: oklch(0.646 0.222 41.116);
  --chart-4: oklch(0.553 0.195 38.402);
  --chart-5: oklch(0.47 0.157 37.304);
  --sidebar: oklch(0.21 0.006 285.885);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.705 0.213 47.604);
  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
  --sidebar-accent: oklch(0.274 0.006 286.033);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.408 0.123 38.172);

  /* Weather chart color */
  --color-temp-high: oklch(0.72 0.17 13);
  --color-temp-mid: oklch(0.84 0.12 66);
  --color-temp-low: oklch(0.91 0.17 98);
  --wind-speed: oklch(0.83 0.1 230);
  --wind-gust: oklch(0.83 0.1 230);
  --humidity: oklch(0.83 0.1 230);
  --dew-point: oklch(0.85 0.13 181);
  --pressure: oklch(0.68 0.16 277);
  --visibility: oklch(0.77 0.15 163);
  --clouds: oklch(0.57 0.15 231);
  --uv: oklch(0.68 0.12 79.2);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  button {
    @apply cursor-pointer;
  }
}

@layer utilities {
  .container {
    @apply mx-auto px-4;
  }
}

Logo.tsx

/**
 * @copyright 2025 codewithsadee
 * @license Apache-2.0
 */

/**
 * Types
 */
type Props = {
  variant?: 'default' | 'icon';
  size?: number;
};

export const Logo = ({ variant = 'default', size = 28 }: Props) => {
  if (variant === 'default') {
    return (
      <svg
        data-logo='logo'
        xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 232 43'
        height={size}
      >
        <g
          id='logogram'
          transform='translate(0, 1) rotate(0) translate(30, 20.5) scale(-1, 1) translate(-30, -20.5)'
        >
          <path
            d='M39.3509 32.43C45.9784 32.43 51.3509 27.0574 51.3509 20.43C51.3509 13.8026 45.9784 8.42999 39.3509 8.42999C33.1311 8.42999 28.0165 13.1621 27.4109 19.2224C24.9593 18.1136 22.3106 17.4509 19.5981 17.2765C21.1104 7.72911 29.3783 0.429993 39.3509 0.429993C50.3966 0.429993 59.3509 9.3843 59.3509 20.43C59.3509 31.0728 51.0379 39.774 40.5509 40.3946V40.43H27.3704V38.6845C27.3704 36.417 26.4352 34.2121 24.7214 32.5636C23.0026 30.9103 20.6417 29.9573 18.1509 29.9573C15.6601 29.9573 13.2992 30.9103 11.5804 32.5636C9.86652 34.2121 8.93137 36.417 8.93137 38.6845V40.43H0.150879V38.6418C0.150879 33.9671 2.09092 29.5205 5.48429 26.2697C8.7691 23.123 13.1556 21.3402 17.7219 21.2349C17.8647 21.2316 18.0077 21.23 18.1509 21.23C18.2617 21.23 18.3724 21.231 18.4831 21.233C23.0841 21.3151 27.5095 23.1007 30.8175 26.2698C32.65 28.0253 34.0586 30.1295 34.9668 32.43H39.3509Z'
            fill='var(--primary)'
          />
          <path
            d='M21.8278 35.3544C22.803 36.2025 23.3509 37.3527 23.3509 38.552V40.43H12.9509V38.552C12.9509 37.3527 13.4987 36.2025 14.4739 35.3544C15.4491 34.5064 16.7718 34.03 18.1509 34.03C19.53 34.03 20.8526 34.5064 21.8278 35.3544Z'
            fill='var(--primary)'
          />
          <path
            d='M43.9327 18.4663C42.4867 18.4663 41.3145 17.2941 41.3145 15.8482V15.1936C41.3145 14.1091 40.4354 13.23 39.3509 13.23C38.2664 13.23 37.3873 14.1091 37.3873 15.1936V15.8482C37.3873 17.2941 36.2151 18.4663 34.7691 18.4663H34.1145C33.03 18.4663 32.1509 19.3455 32.1509 20.43C32.1509 21.5145 33.03 22.3936 34.1145 22.3936H34.7691C36.2151 22.3936 37.3873 23.5658 37.3873 25.0118V25.6664C37.3873 26.7508 38.2664 27.63 39.3509 27.63C40.4354 27.63 41.3145 26.7508 41.3145 25.6664V25.0118C41.3145 23.5658 42.4867 22.3936 43.9327 22.3936H44.5872C45.6717 22.3936 46.5509 21.5145 46.5509 20.43C46.5509 19.3455 45.6717 18.4663 44.5872 18.4663H43.9327Z'
            fill='var(--primary)'
          />
          <path
            d='M11.351 3.63004C11.351 5.39732 12.7837 6.82998 14.5509 6.82998H15.3509C16.6764 6.82998 17.7509 7.9045 17.7509 9.22998C17.7509 10.5555 16.6764 11.63 15.3509 11.63H14.5509C12.7837 11.63 11.351 13.0626 11.351 14.8299V15.63C11.351 16.9555 10.2765 18.03 8.95099 18.03C7.62551 18.03 6.55099 16.9555 6.55099 15.63L6.55099 14.83C6.55099 13.0627 5.1183 11.63 3.35099 11.63H2.55088C1.2254 11.63 0.150879 10.5555 0.150879 9.22998C0.150879 7.9045 1.2254 6.82998 2.55088 6.82998H3.351C5.1183 6.82998 6.55099 5.3973 6.55099 3.62999L6.55099 2.82999C6.55099 1.50451 7.62551 0.429993 8.95099 0.429993C10.2765 0.429993 11.351 1.50451 11.351 2.82999V3.63004Z'
            fill='var(--primary)'
          />
        </g>
        <g
          id='logotype'
          transform='translate(66, 8.5)'
        >
          <path
            fill='var(--foreground)'
            d='M19.43 26.34L19.43 26.34Q16.05 26.34 13.37 24.80Q10.70 23.27 9.15 20.34Q7.61 17.42 7.61 13.29L7.61 13.29Q7.61 9.13 9.16 6.20Q10.72 3.27 13.40 1.73Q16.08 0.19 19.43 0.19L19.43 0.19Q21.60 0.19 23.47 0.80Q25.35 1.41 26.80 2.57Q28.25 3.73 29.17 5.42Q30.10 7.10 30.39 9.25L30.39 9.25L25.11 9.25Q24.94 8.19 24.45 7.38Q23.96 6.57 23.24 6.00Q22.51 5.42 21.57 5.12Q20.63 4.83 19.54 4.83L19.54 4.83Q17.55 4.83 16.06 5.82Q14.56 6.81 13.73 8.70Q12.90 10.58 12.90 13.29L12.90 13.29Q12.90 16.04 13.74 17.92Q14.58 19.80 16.07 20.75Q17.55 21.71 19.52 21.71L19.52 21.71Q20.61 21.71 21.54 21.41Q22.47 21.11 23.22 20.54Q23.96 19.97 24.45 19.15Q24.94 18.33 25.12 17.28L25.12 17.28L30.40 17.28Q30.20 19.06 29.35 20.69Q28.51 22.31 27.11 23.59Q25.70 24.87 23.77 25.61Q21.84 26.34 19.43 26.34ZM32.33 0.54L37.46 0.54L37.46 26L32.33 26L32.33 0.54ZM48.61 26.38L48.61 26.38Q45.74 26.38 43.64 25.14Q41.53 23.90 40.40 21.68Q39.26 19.47 39.26 16.53L39.26 16.53Q39.26 13.56 40.40 11.35Q41.53 9.13 43.64 7.89Q45.74 6.65 48.61 6.65L48.61 6.65Q51.50 6.65 53.59 7.89Q55.68 9.13 56.82 11.35Q57.96 13.56 57.96 16.53L57.96 16.53Q57.96 19.47 56.82 21.68Q55.68 23.90 53.59 25.14Q51.50 26.38 48.61 26.38ZM48.61 22.34L48.61 22.34Q49.98 22.34 50.90 21.58Q51.82 20.82 52.28 19.50Q52.74 18.17 52.74 16.52L52.74 16.52Q52.74 14.82 52.28 13.51Q51.82 12.19 50.90 11.44Q49.98 10.69 48.61 10.69L48.61 10.69Q47.24 10.69 46.33 11.44Q45.41 12.19 44.95 13.51Q44.49 14.82 44.49 16.52L44.49 16.52Q44.49 18.17 44.95 19.50Q45.41 20.82 46.33 21.58Q47.24 22.34 48.61 22.34ZM66.36 26.24L66.36 26.24Q64.38 26.24 62.89 25.38Q61.40 24.51 60.59 22.90Q59.78 21.28 59.78 19.04L59.78 19.04L59.78 6.89L64.91 6.89L64.91 18.16Q64.91 19.93 65.83 20.94Q66.75 21.95 68.36 21.95L68.36 21.95Q69.45 21.95 70.29 21.48Q71.13 21.01 71.60 20.11Q72.07 19.22 72.07 17.95L72.07 17.95L72.07 6.89L77.21 6.89L77.21 26L72.36 26L72.29 21.23L72.58 21.23Q71.83 23.64 70.28 24.94Q68.73 26.24 66.36 26.24ZM86.79 26.32L86.79 26.32Q84.60 26.32 82.83 25.19Q81.07 24.05 80.04 21.86Q79.01 19.66 79.01 16.48L79.01 16.48Q79.01 13.22 80.07 11.03Q81.13 8.84 82.89 7.75Q84.65 6.65 86.77 6.65L86.77 6.65Q88.40 6.65 89.47 7.20Q90.55 7.75 91.22 8.55Q91.88 9.35 92.21 10.11L92.21 10.11L92.38 10.11L92.38 0.54L97.51 0.54L97.51 26L92.46 26L92.46 22.94L92.21 22.94Q91.87 23.71 91.19 24.49Q90.52 25.27 89.44 25.79Q88.36 26.32 86.79 26.32ZM88.38 22.21L88.38 22.21Q89.68 22.21 90.60 21.49Q91.52 20.77 92.00 19.48Q92.48 18.19 92.48 16.46L92.48 16.46Q92.48 14.72 92.01 13.45Q91.54 12.17 90.62 11.47Q89.70 10.76 88.38 10.76L88.38 10.76Q87.03 10.76 86.12 11.49Q85.20 12.23 84.74 13.51Q84.28 14.79 84.28 16.46L84.28 16.46Q84.28 18.14 84.75 19.44Q85.22 20.74 86.13 21.47Q87.05 22.21 88.38 22.21ZM108.68 26.38L108.68 26.38Q105.79 26.38 103.69 25.14Q101.60 23.90 100.46 21.68Q99.33 19.47 99.33 16.53L99.33 16.53Q99.33 13.56 100.46 11.35Q101.60 9.13 103.69 7.89Q105.79 6.65 108.68 6.65L108.68 6.65Q110.37 6.65 111.80 7.10Q113.24 7.54 114.35 8.36Q115.46 9.18 116.18 10.36Q116.90 11.54 117.17 13.01L117.17 13.01L112.40 13.90Q112.25 13.15 111.92 12.56Q111.60 11.97 111.14 11.55Q110.68 11.13 110.07 10.91Q109.46 10.69 108.73 10.69L108.73 10.69Q107.36 10.69 106.43 11.42Q105.50 12.16 105.03 13.47Q104.56 14.79 104.56 16.52L104.56 16.52Q104.56 18.21 105.03 19.52Q105.50 20.84 106.43 21.59Q107.36 22.34 108.73 22.34L108.73 22.34Q109.46 22.34 110.08 22.11Q110.69 21.88 111.17 21.45Q111.65 21.01 111.97 20.39Q112.30 19.78 112.44 19.01L112.44 19.01L117.20 19.88Q116.93 21.40 116.21 22.59Q115.49 23.78 114.38 24.63Q113.27 25.49 111.83 25.93Q110.38 26.38 108.68 26.38ZM124.31 26.38L124.31 26.38Q122.49 26.38 121.05 25.74Q119.61 25.09 118.78 23.82Q117.95 22.55 117.95 20.65L117.95 20.65Q117.95 19.06 118.54 17.98Q119.13 16.91 120.14 16.26Q121.16 15.61 122.45 15.27Q123.74 14.93 125.16 14.79L125.16 14.79Q126.82 14.62 127.84 14.47Q128.85 14.33 129.32 14.01Q129.79 13.70 129.79 13.08L129.79 13.08L129.79 12.99Q129.79 12.17 129.45 11.61Q129.11 11.05 128.43 10.75Q127.76 10.45 126.80 10.45L126.80 10.45Q125.81 10.45 125.08 10.75Q124.34 11.05 123.88 11.54Q123.42 12.04 123.20 12.65L123.20 12.65L118.50 11.88Q118.99 10.21 120.14 9.05Q121.28 7.88 122.98 7.27Q124.68 6.65 126.82 6.65L126.82 6.65Q128.36 6.65 129.81 7.02Q131.26 7.39 132.42 8.16Q133.57 8.93 134.24 10.17Q134.92 11.41 134.92 13.13L134.92 13.13L134.92 26L130.07 26L130.07 23.35L129.89 23.35Q129.43 24.24 128.66 24.91Q127.90 25.59 126.81 25.98Q125.72 26.38 124.31 26.38ZM125.76 22.77L125.76 22.77Q126.97 22.77 127.89 22.29Q128.80 21.81 129.31 20.99Q129.83 20.17 129.83 19.16L129.83 19.16L129.83 17.10Q129.60 17.27 129.14 17.40Q128.68 17.54 128.12 17.64Q127.55 17.75 127.01 17.83Q126.46 17.92 126.03 17.97L126.03 17.97Q125.09 18.10 124.37 18.41Q123.66 18.72 123.26 19.22Q122.87 19.73 122.87 20.51L122.87 20.51Q122.87 21.25 123.25 21.75Q123.62 22.26 124.27 22.51Q124.92 22.77 125.76 22.77ZM145.13 26.38L145.13 26.38Q142.82 26.38 141.05 25.72Q139.27 25.06 138.14 23.80Q137.01 22.55 136.69 20.77L136.69 20.77L141.46 19.95Q141.83 21.28 142.77 21.95Q143.71 22.62 145.29 22.62L145.29 22.62Q146.76 22.62 147.60 22.06Q148.45 21.51 148.45 20.65L148.45 20.65Q148.45 19.90 147.84 19.42Q147.23 18.94 145.99 18.69L145.99 18.69L142.69 18.00Q139.92 17.44 138.55 16.08Q137.19 14.72 137.19 12.58L137.19 12.58Q137.19 10.74 138.19 9.41Q139.20 8.09 141.00 7.37Q142.79 6.65 145.22 6.65L145.22 6.65Q147.47 6.65 149.13 7.28Q150.79 7.90 151.81 9.05Q152.84 10.19 153.18 11.75L153.18 11.75L148.64 12.55Q148.34 11.58 147.52 10.95Q146.69 10.33 145.29 10.33L145.29 10.33Q144.02 10.33 143.17 10.86Q142.31 11.39 142.31 12.28L142.31 12.28Q142.31 12.99 142.87 13.49Q143.42 13.99 144.77 14.26L144.77 14.26L148.21 14.94Q150.98 15.51 152.33 16.78Q153.68 18.05 153.68 20.10L153.68 20.10Q153.68 21.98 152.58 23.39Q151.49 24.80 149.57 25.59Q147.64 26.38 145.13 26.38ZM153.55 6.89L164.88 6.89L164.88 10.81L153.55 10.81L153.55 6.89ZM156.18 20.86L156.18 2.35L161.31 2.35L161.31 20.41Q161.31 21.32 161.71 21.75Q162.11 22.19 163.05 22.19L163.05 22.19Q163.34 22.19 163.87 22.11Q164.40 22.04 164.68 21.97L164.68 21.97L165.41 25.81Q164.56 26.07 163.71 26.17Q162.86 26.27 162.10 26.27L162.10 26.27Q159.22 26.27 157.70 24.87Q156.18 23.47 156.18 20.86L156.18 20.86Z'
          />
        </g>
      </svg>
    );
  } else {
    return (
      <svg
        data-logo='logo'
        xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 60 41'
        height={size}
      >
        <g
          id='logogram'
          transform='translate(0, 0) rotate(0) translate(30, 20.5) scale(-1, 1) translate(-30, -20.5)'
        >
          <path
            d='M39.3509 32.43C45.9784 32.43 51.3509 27.0574 51.3509 20.43C51.3509 13.8026 45.9784 8.42999 39.3509 8.42999C33.1311 8.42999 28.0165 13.1621 27.4109 19.2224C24.9593 18.1136 22.3106 17.4509 19.5981 17.2765C21.1104 7.72911 29.3783 0.429993 39.3509 0.429993C50.3966 0.429993 59.3509 9.3843 59.3509 20.43C59.3509 31.0728 51.0379 39.774 40.5509 40.3946V40.43H27.3704V38.6845C27.3704 36.417 26.4352 34.2121 24.7214 32.5636C23.0026 30.9103 20.6417 29.9573 18.1509 29.9573C15.6601 29.9573 13.2992 30.9103 11.5804 32.5636C9.86652 34.2121 8.93137 36.417 8.93137 38.6845V40.43H0.150879V38.6418C0.150879 33.9671 2.09092 29.5205 5.48429 26.2697C8.7691 23.123 13.1556 21.3402 17.7219 21.2349C17.8647 21.2316 18.0077 21.23 18.1509 21.23C18.2617 21.23 18.3724 21.231 18.4831 21.233C23.0841 21.3151 27.5095 23.1007 30.8175 26.2698C32.65 28.0253 34.0586 30.1295 34.9668 32.43H39.3509Z'
            fill='var(--primary'
          />
          <path
            d='M21.8278 35.3544C22.803 36.2025 23.3509 37.3527 23.3509 38.552V40.43H12.9509V38.552C12.9509 37.3527 13.4987 36.2025 14.4739 35.3544C15.4491 34.5064 16.7718 34.03 18.1509 34.03C19.53 34.03 20.8526 34.5064 21.8278 35.3544Z'
            fill='var(--primary'
          />
          <path
            d='M43.9327 18.4663C42.4867 18.4663 41.3145 17.2941 41.3145 15.8482V15.1936C41.3145 14.1091 40.4354 13.23 39.3509 13.23C38.2664 13.23 37.3873 14.1091 37.3873 15.1936V15.8482C37.3873 17.2941 36.2151 18.4663 34.7691 18.4663H34.1145C33.03 18.4663 32.1509 19.3455 32.1509 20.43C32.1509 21.5145 33.03 22.3936 34.1145 22.3936H34.7691C36.2151 22.3936 37.3873 23.5658 37.3873 25.0118V25.6664C37.3873 26.7508 38.2664 27.63 39.3509 27.63C40.4354 27.63 41.3145 26.7508 41.3145 25.6664V25.0118C41.3145 23.5658 42.4867 22.3936 43.9327 22.3936H44.5872C45.6717 22.3936 46.5509 21.5145 46.5509 20.43C46.5509 19.3455 45.6717 18.4663 44.5872 18.4663H43.9327Z'
            fill='var(--primary'
          />
          <path
            d='M11.351 3.63004C11.351 5.39732 12.7837 6.82998 14.5509 6.82998H15.3509C16.6764 6.82998 17.7509 7.9045 17.7509 9.22998C17.7509 10.5555 16.6764 11.63 15.3509 11.63H14.5509C12.7837 11.63 11.351 13.0626 11.351 14.8299V15.63C11.351 16.9555 10.2765 18.03 8.95099 18.03C7.62551 18.03 6.55099 16.9555 6.55099 15.63L6.55099 14.83C6.55099 13.0627 5.1183 11.63 3.35099 11.63H2.55088C1.2254 11.63 0.150879 10.5555 0.150879 9.22998C0.150879 7.9045 1.2254 6.82998 2.55088 6.82998H3.351C5.1183 6.82998 6.55099 5.3973 6.55099 3.62999L6.55099 2.82999C6.55099 1.50451 7.62551 0.429993 8.95099 0.429993C10.2765 0.429993 11.351 1.50451 11.351 2.82999V3.63004Z'
            fill='var(--primary'
          />
        </g>
        <g
          id='logotype'
          transform='translate(60, 20.5)'
        ></g>
      </svg>
    );
  }
};

ThemeProvider.tsx

/**
 * Types
 */
type Theme = 'dark' | 'light' | 'system';

type ThemeProviderProps = {
  children: React.ReactNode;
  defaultTheme?: Theme;
  storageKey?: string;
};

type ThemeProviderState = {
  theme: Theme;
  setTheme: (theme: Theme) => void;
};

types-index.ts

/**
 * @copyright 2025 codewithsadee
 * @license Apache-2.0
 */

type WeatherConditionCode =
  | 200
  | 201
  | 202
  | 210
  | 211
  | 212
  | 221
  | 230
  | 231
  | 232
  | 300
  | 301
  | 302
  | 310
  | 311
  | 312
  | 313
  | 314
  | 321
  | 500
  | 501
  | 502
  | 503
  | 504
  | 511
  | 520
  | 521
  | 522
  | 531
  | 600
  | 601
  | 602
  | 611
  | 612
  | 613
  | 615
  | 616
  | 620
  | 621
  | 622
  | 701
  | 711
  | 721
  | 731
  | 741
  | 751
  | 761
  | 762
  | 771
  | 781
  | 800
  | 801
  | 802
  | 803
  | 804;

type WeatherConditionMain =
  | 'Thunderstorm'
  | 'Drizzle'
  | 'Rain'
  | 'Snow'
  | 'Mist'
  | 'Smoke'
  | 'Haze'
  | 'Dust'
  | 'Fog'
  | 'Sand'
  | 'Ash'
  | 'Squall'
  | 'Tornado'
  | 'Clear'
  | 'Clouds';

type WeatherConditionDescription =
  | 'thunderstorm with light rain'
  | 'thunderstorm with rain'
  | 'thunderstorm with heavy rain'
  | 'light thunderstorm'
  | 'thunderstorm'
  | 'heavy thunderstorm'
  | 'ragged thunderstorm'
  | 'thunderstorm with light drizzle'
  | 'thunderstorm with drizzle'
  | 'thunderstorm with heavy drizzle'
  | 'light intensity drizzle'
  | 'drizzle'
  | 'heavy intensity drizzle'
  | 'light intensity drizzle rain'
  | 'drizzle rain'
  | 'heavy intensity drizzle rain'
  | 'shower rain and drizzle'
  | 'heavy shower rain and drizzle'
  | 'shower drizzle'
  | 'light rain'
  | 'moderate rain'
  | 'heavy intensity rain'
  | 'very heavy rain'
  | 'extreme rain'
  | 'freezing rain'
  | 'light intensity shower rain'
  | 'shower rain'
  | 'heavy intensity shower rain'
  | 'ragged shower rain'
  | 'light snow'
  | 'snow'
  | 'heavy snow'
  | 'sleet'
  | 'light shower sleet'
  | 'shower sleet'
  | 'light rain and snow'
  | 'rain and snow'
  | 'light shower snow'
  | 'shower snow'
  | 'heavy shower snow'
  | 'mist'
  | 'smoke'
  | 'haze'
  | 'sand/dust whirls'
  | 'fog'
  | 'sand'
  | 'dust'
  | 'volcanic ash'
  | 'squalls'
  | 'tornado'
  | 'clear sky'
  | 'few clouds: 11-25%'
  | 'scattered clouds: 25-50%'
  | 'broken clouds: 51-84%'
  | 'overcast clouds: 85-100%';

type WeatherConditionIcon =
  | '01d'
  | '02d'
  | '03d'
  | '04d'
  | '09d'
  | '10d'
  | '11d'
  | '13d'
  | '50d'
  | '01n'
  | '02n'
  | '03n'
  | '04n'
  | '09n'
  | '10n'
  | '11n'
  | '13n'
  | '50n';

export interface WeatherCondition {
  id: WeatherConditionCode;
  main: WeatherConditionMain;
  description: WeatherConditionDescription;
  icon: WeatherConditionIcon;
}

export interface CurrentWeather {
  dt: number;
  sunrise: number;
  sunset: number;
  temp: number;
  feels_like: number;
  pressure: number;
  humidity: number;
  dew_point: number;
  uvi: number;
  clouds: number;
  visibility: number;
  wind_speed: number;
  wind_deg: number;
  wind_gust: number;
  weather: [WeatherCondition];
}

export interface MinutelyForecast {
  dt: number;
  precipitation: number;
}

export interface HourlyForecast
  extends Omit<CurrentWeather, 'sunrise' | 'sunset'> {
  pop: number;
  rain?: {
    '1h': number;
  };
  snow?: {
    '1h': number;
  };
}

export interface DailyForecast {
  dt: number;
  sunrise: number;
  sunset: number;
  moonrise: number;
  moonset: number;
  moon_phase: number;
  summary: string;
  temp: {
    day: number;
    min: number;
    max: number;
    night: number;
    eve: number;
    morn: number;
  };
  feels_like: {
    day: number;
    night: number;
    eve: number;
    morn: number;
  };
  pressure: number;
  humidity: number;
  dew_point: number;
  wind_speed: number;
  wind_deg: number;
  wind_gust: number;
  weather: [WeatherCondition];
}

export interface Alert {
  sender_name: string;
  event: string;
  start: number;
  end: number;
  description: string;
  tags: string[];
}

export interface OneCallWeatherRes {
  lat: number;
  lon: number;
  timezone: string;
  timezone_offset: number;
  current: CurrentWeather;
  minutely: MinutelyForecast[];
  hourly: HourlyForecast[];
  daily: DailyForecast[];
  alerts?: Alert[];
}

export type WeatherTimezone = {
  timezone: string;
  offset: number;
};

export interface Geocoding {
  name: string;
  lat: number;
  lon: number;
  country: string;
  state?: string;
}

WeatherProvider.tsx

type Weather = {
  current: CurrentWeather;
  minutely: MinutelyForecast[];
  hourly: HourlyForecast[];
  daily: DailyForecast[];
  alerts?: Alert[];
  location: Geocoding;
  timezone: WeatherTimezone;
};

export type WeatherUnitType = 'metric' | 'imperial';

type WeatherStateParam = {
  lat?: number;
  lon?: number;
  unit?: WeatherUnitType;
};

type WeatherProviderState = {
  weather: Weather | null;
  setWeather: (weather: WeatherStateParam) => void;
};