feat(app): add favicon.ico and remove city.json

Added a new favicon.ico to the src/app directory and deleted the city.json file from the configs folder. This change updates the application icon and removes unnecessary configuration.
docs: simplify README instructions and description
2024-09-27 11:59:48 +02:00 · 2024-09-27 11:58:42 +02:00 · 2024-09-27 11:58:28 +02:00 · 2024-09-27 11:58:10 +02:00 · 2024-09-27 11:57:39 +02:00 · 2024-09-27 11:56:58 +02:00
119 changed files with 7448 additions and 13787 deletions
--- a/.env.example
+++ b/.env.example
@ -1,2 +0,0 @@
-OPENWEATHER_API_KEY=lngstr20
-CONFIG_URL=https://git.yidhra.fr/Mathis/forecast/raw/branch/dev/configs/city.json
--- a/.eslintrc
+++ b/.eslintrc
@ -1,3 +0,0 @@
-{
-  "extends": ["next", "next/core-web-vitals"]
-}
--- a/.gitignore
+++ b/.gitignore
@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz

 # testing
 /coverage
@ -25,12 +26,11 @@ yarn-debug.log*
 yarn-error.log*

 # local env files
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
+.env*.local

 # vercel
 .vercel

-.env
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,4 +0,0 @@
-{
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
-}
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # Weather App

-Check the current weather on any city on the planet. Switch between metric and imperial units.
+Check the current weather of the city.


 ## Features
@ -15,14 +15,6 @@ Currently being redesigned

 3. `pnpm install` || `yarn install`

-4. Log-in to [Openweathermap.com](https://openweathermap.org/)
-
-5. Create an API key
-
-6. `cp .env.example .env.local`
-
-7. Paste API key for `OPENWEATHER_API_KEY`
-
 8. `pnpm dev` || `yarn run dev`

 ## Contributions
--- a/components.json
+++ b/components.json
@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "stone",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
--- a/components/ContentBox.js
+++ b/components/ContentBox.js
@ -1,5 +0,0 @@
-import styles from "./ContentBox.module.css";
-
-export const ContentBox = ({ children }) => {
-  return <div className={styles.wrapper}>{children}</div>;
-};
--- a/components/ContentBox.module.css
+++ b/components/ContentBox.module.css
@ -1,4 +0,0 @@
-.wrapper {
-  background-color: rgb(247, 247, 247);
-  padding: 30px;
-}
--- a/components/DateAndTime.js
+++ b/components/DateAndTime.js
@ -1,16 +0,0 @@
-import { getWeekDay, getTime, getAMPM } from "../services/helpers";
-import styles from "./DateAndTime.module.css";
-
-export const DateAndTime = ({ weatherData, unitSystem }) => {
-  return (
-    <div className={styles.wrapper}>
-      <h2>
-        {`${getWeekDay(weatherData)}, ${getTime(
-          unitSystem,
-          weatherData.dt,
-          weatherData.timezone
-        )} ${getAMPM(unitSystem, weatherData.dt, weatherData.timezone)}`}
-      </h2>
-    </div>
-  );
-};
--- a/components/DateAndTime.module.css
+++ b/components/DateAndTime.module.css
@ -1,4 +0,0 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-}
--- a/components/ErrorScreen.js
+++ b/components/ErrorScreen.js
@ -1,10 +0,0 @@
-import styles from "./ErrorScreen.module.css";
-
-export const ErrorScreen = ({ errorMessage, children }) => {
-  return (
-    <div className={styles.wrapper}>
-      <h1 className={styles.message}>{errorMessage}</h1>
-      {children}
-    </div>
-  );
-};
--- a/components/ErrorScreen.module.css
+++ b/components/ErrorScreen.module.css
@ -1,8 +0,0 @@
-.wrapper {
-  max-width: 260px;
-  text-align: center;
-}
-
-.message {
-  margin-bottom: 30px;
-}
--- a/components/Header.js
+++ b/components/Header.js
@ -1,5 +0,0 @@
-import styles from "./Header.module.css";
-
-export const Header = ({ children }) => {
-  return <div className={styles.wrapper}>{children}</div>;
-};
--- a/components/Header.module.css
+++ b/components/Header.module.css
@ -1,13 +0,0 @@
-.wrapper {
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-@media only screen and (max-width: 520px) {
-  .wrapper {
-    grid-template-columns: 1fr;
-    place-items: center;
-  }
-}
--- a/components/LoadingScreen.js
+++ b/components/LoadingScreen.js
@ -1 +0,0 @@
-export const LoadingScreen = ({ loadingMessage }) => <h1>{loadingMessage}</h1>;
--- a/components/MainCard.js
+++ b/components/MainCard.js
@ -1,40 +0,0 @@
-import Image from "next/image";
-import { ctoF } from "../services/converters";
-import styles from "./MainCard.module.css";
-
-export const MainCard = ({
-  city,
-  country,
-  description,
-  iconName,
-  unitSystem,
-  weatherData,
-}) => {
-  return (
-    <div className={styles.wrapper}>
-      <h1 className={styles.location}>
-        {city}, {country}
-      </h1>
-      <p className={styles.description}>{description}</p>
-      <Image
-        width="300px"
-        height="300px"
-        src={`/icons/${iconName}.svg`}
-        alt="weatherIcon"
-      />
-      <h1 className={styles.temperature}>
-        {unitSystem == "metric"
-          ? Math.round(weatherData.main.temp)
-          : Math.round(ctoF(weatherData.main.temp))}
-        °{unitSystem == "metric" ? "C" : "F"}
-      </h1>
-      <p>
-        Feels like{" "}
-        {unitSystem == "metric"
-          ? Math.round(weatherData.main.feels_like)
-          : Math.round(ctoF(weatherData.main.feels_like))}
-        °{unitSystem == "metric" ? "C" : "F"}
-      </p>
-    </div>
-  );
-};
--- a/components/MainCard.module.css
+++ b/components/MainCard.module.css
@ -1,18 +0,0 @@
-.wrapper {
-  text-align: center;
-  padding: 30px;
-}
-
-.location {
-  font-size: 38px;
-  margin-bottom: 10px;
-}
-
-.description {
-  font-size: 24px;
-  margin-bottom: 20px;
-}
-
-.temperature {
-  font-size: 84px;
-}
--- a/components/MetricsBox.js
+++ b/components/MetricsBox.js
@ -1,63 +0,0 @@
-import { degToCompass } from "../services/converters";
-import {
-  getTime,
-  getAMPM,
-  getVisibility,
-  getWindSpeed,
-} from "../services/helpers";
-import { MetricsCard } from "./MetricsCard";
-import styles from "./MetricsBox.module.css";
-
-export const MetricsBox = ({ weatherData, unitSystem }) => {
-  return (
-    <div className={styles.wrapper}>
-      <MetricsCard
-        title={"Humidity"}
-        iconSrc={"/icons/humidity.png"}
-        metric={weatherData.main.humidity}
-        unit={"%"}
-      />
-      <MetricsCard
-        title={"Wind speed"}
-        iconSrc={"/icons/wind.png"}
-        metric={getWindSpeed(unitSystem, weatherData.wind.speed)}
-        unit={unitSystem == "metric" ? "m/s" : "m/h"}
-      />
-      <MetricsCard
-        title={"Wind direction"}
-        iconSrc={"/icons/compass.png"}
-        metric={degToCompass(weatherData.wind.deg)}
-      />
-      <MetricsCard
-        title={"Visibility"}
-        iconSrc={"/icons/binocular.png"}
-        metric={getVisibility(unitSystem, weatherData.visibility)}
-        unit={unitSystem == "metric" ? "km" : "miles"}
-      />
-      <MetricsCard
-        title={"Sunrise"}
-        iconSrc={"/icons/sunrise.png"}
-        metric={getTime(
-          unitSystem,
-          weatherData.sys.sunrise,
-          weatherData.timezone
-        )}
-        unit={getAMPM(
-          unitSystem,
-          weatherData.sys.sunrise,
-          weatherData.timezone
-        )}
-      />
-      <MetricsCard
-        title={"Sunset"}
-        iconSrc={"/icons/sunset.png"}
-        metric={getTime(
-          unitSystem,
-          weatherData.sys.sunset,
-          weatherData.timezone
-        )}
-        unit={getAMPM(unitSystem, weatherData.sys.sunset, weatherData.timezone)}
-      />
-    </div>
-  );
-};
--- a/components/MetricsBox.module.css
+++ b/components/MetricsBox.module.css
@ -1,18 +0,0 @@
-.wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 20px;
-  margin-bottom: 20px;
-}
-
-@media only screen and (max-width: 600px) {
-  .wrapper {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-@media only screen and (max-width: 475px) {
-  .wrapper {
-    grid-template-columns: 1fr;
-  }
-}
--- a/components/MetricsCard.js
+++ b/components/MetricsCard.js
@ -1,17 +0,0 @@
-import Image from "next/image";
-import styles from "./MetricsCard.module.css";
-
-export const MetricsCard = ({ title, iconSrc, metric, unit }) => {
-  return (
-    <div className={styles.wrapper}>
-      <p>{title}</p>
-      <div className={styles.content}>
-        <Image width="100px" height="100px" src={iconSrc} alt="weatherIcon" />
-        <div>
-          <h1>{metric}</h1>
-          <p>{unit}</p>
-        </div>
-      </div>
-    </div>
-  );
-};
--- a/components/MetricsCard.module.css
+++ b/components/MetricsCard.module.css
@ -1,17 +0,0 @@
-.wrapper {
-  background: rgba(255, 255, 255, 0.95);
-  padding: 20px;
-  text-align: right;
-  border-radius: 20px;
-}
-
-.content {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-@media only screen and (max-width: 475px) {
-  .content {
-    grid-template-columns: 1fr 2fr;
-  }
-}
--- a/components/Search.js
+++ b/components/Search.js
@ -1,21 +0,0 @@
-import styles from "./Search.module.css";
-
-export const Search = ({
-  placeHolder,
-  value,
-  onFocus,
-  onChange,
-  onKeyDown,
-}) => {
-  return (
-    <input
-      className={styles.search}
-      type="text"
-      placeholder={placeHolder}
-      value={value}
-      onFocus={onFocus}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-    />
-  );
-};
--- a/components/Search.module.css
+++ b/components/Search.module.css
@ -1,17 +0,0 @@
-.search {
-  height: 40px;
-  font-size: 18px;
-  font-family: "Varela Round", sans-serif;
-  color: #303030;
-  text-align: right;
-  padding: 0 10px;
-  border: none;
-  border-radius: 10px;
-}
-
-@media only screen and (max-width: 520px) {
-  .search {
-    width: 100%;
-    text-align: center;
-  }
-}
--- a/components/UnitSwitch.js
+++ b/components/UnitSwitch.js
@ -1,24 +0,0 @@
-import styles from "./UnitSwitch.module.css";
-
-export const UnitSwitch = ({ onClick, unitSystem }) => {
-  return (
-    <div className={styles.wrapper}>
-      <p
-        className={`${styles.switch} ${
-          unitSystem == "metric" ? styles.active : styles.inactive
-        }`}
-        onClick={onClick}
-      >
-        Metric System
-      </p>
-      <p
-        className={`${styles.switch} ${
-          unitSystem == "metric" ? styles.inactive : styles.active
-        }`}
-        onClick={onClick}
-      >
-        Imperial System
-      </p>
-    </div>
-  );
-};
--- a/components/UnitSwitch.module.css
+++ b/components/UnitSwitch.module.css
@ -1,34 +0,0 @@
-.wrapper {
-  text-align: right;
-}
-
-.switch {
-  display: inline;
-  margin: 0 10px;
-  cursor: pointer;
-}
-
-.active {
-  color: green;
-}
-
-.inactive {
-  color: black;
-}
-
-@media only screen and (max-width: 475px) {
-  .wrapper {
-    text-align: center;
-  }
-}
-
-@media only screen and (max-width: 335px) {
-  .wrapper {
-    display: grid;
-    grid-template-columns: 1fr;
-  }
-
-  .switch {
-    margin: 10px 0;
-  }
-}
--- a/configs/city.json
+++ b/configs/city.json
@ -1,3 +0,0 @@
-{
-  "cityName": "Chambéry"
-}
--- a/next.config.mjs
+++ b/next.config.mjs
@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-  "name": "weather-app",
+  "name": "weather",
  "version": "0.1.0",
  "private": true,
  "scripts": {
@ -9,16 +9,62 @@
    "lint": "next lint"
  },
  "dependencies": {
-    "axios": "^1.7.7",
-    "next": "11.0.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-collapsible": "^1.1.0",
+    "@radix-ui/react-context-menu": "^2.2.1",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-hover-card": "^1.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-popover": "^1.1.1",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "1.0.0",
+    "date-fns": "^4.1.0",
+    "embla-carousel-react": "^8.3.0",
+    "input-otp": "^1.2.4",
+    "lucide-react": "^0.446.0",
+    "next": "14.2.13",
+    "next-themes": "^0.3.0",
+    "react": "^18",
+    "react-day-picker": "8.10.1",
+    "react-dom": "^18",
+    "react-hook-form": "^7.53.0",
+    "react-resizable-panels": "^2.1.3",
+    "recharts": "^2.12.7",
+    "sonner": "^1.5.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.0.0",
+    "zod": "^3.23.8"
  },
  "devDependencies": {
-    "@biomejs/biome": "^1.9.2",
-    "@types/node": "^22.7.3",
-    "eslint": "7.30.0",
-    "eslint-config-next": "11.0.1",
-    "taze": "^0.17.1"
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
  }
 }
--- a/pages/_app.js
+++ b/pages/_app.js
@ -1,7 +0,0 @@
-import "../styles/globals.css";
-
-function MyApp({ Component, pageProps }) {
-  return <Component {...pageProps} />;
-}
-
-export default MyApp;
--- a/pages/api/data.ts
+++ b/pages/api/data.ts
@ -1,11 +0,0 @@
-import _config from "../../configs/city.json"
-import * as process from "node:process";
-
-export default async function handler(req, res) {
-  const targetedCity = await fetch(process.env.CONFIG_URL as string) as unknown as typeof _config
-  const getWeatherData = await fetch(
-    `https://api.openweathermap.org/data/2.5/weather?q=${targetedCity.cityName}&units=metric&appid=${process.env.OPENWEATHER_API_KEY}`
-  );
-  const data = await getWeatherData.json();
-  res.status(200).json(data);
-}
--- a/pages/index.js
+++ b/pages/index.js
@ -1,84 +0,0 @@
-import { useState, useEffect } from "react";
-
-import { MainCard } from "../components/MainCard";
-import { ContentBox } from "../components/ContentBox";
-import { Header } from "../components/Header";
-import { DateAndTime } from "../components/DateAndTime";
-import { Search } from "../components/Search";
-import { MetricsBox } from "../components/MetricsBox";
-import { UnitSwitch } from "../components/UnitSwitch";
-import { LoadingScreen } from "../components/LoadingScreen";
-import { ErrorScreen } from "../components/ErrorScreen";
-
-import styles from "../styles/Home.module.css";
-
-export const App = () => {
-  const [cityInput, setCityInput] = useState("Riga");
-  const [triggerFetch, setTriggerFetch] = useState(true);
-  const [weatherData, setWeatherData] = useState();
-  const [unitSystem, setUnitSystem] = useState("metric");
-
-  useEffect(() => {
-    const getData = async () => {
-      const res = await fetch("api/data", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ cityInput }),
-      });
-      const data = await res.json();
-      setWeatherData({ ...data });
-      setCityInput("");
-    };
-    getData();
-  }, [triggerFetch]);
-
-  const changeSystem = () =>
-    unitSystem == "metric"
-      ? setUnitSystem("imperial")
-      : setUnitSystem("metric");
-
-  return weatherData && !weatherData.message ? (
-    <div className={styles.wrapper}>
-      <MainCard
-        city={weatherData.name}
-        country={weatherData.sys.country}
-        description={weatherData.weather[0].description}
-        iconName={weatherData.weather[0].icon}
-        unitSystem={unitSystem}
-        weatherData={weatherData}
-      />
-      <ContentBox>
-        <Header>
-          <DateAndTime weatherData={weatherData} unitSystem={unitSystem} />
-          <Search
-            placeHolder="Search a city..."
-            value={cityInput}
-            onFocus={(e) => {
-              e.target.value = "";
-              e.target.placeholder = "";
-            }}
-            onChange={(e) => setCityInput(e.target.value)}
-            onKeyDown={(e) => {
-              e.keyCode === 13 && setTriggerFetch(!triggerFetch);
-              e.target.placeholder = "Search a city...";
-            }}
-          />
-        </Header>
-        <MetricsBox weatherData={weatherData} unitSystem={unitSystem} />
-        <UnitSwitch onClick={changeSystem} unitSystem={unitSystem} />
-      </ContentBox>
-    </div>
-  ) : weatherData && weatherData.message ? (
-    <ErrorScreen errorMessage="City not found, try again!">
-      <Search
-        onFocus={(e) => (e.target.value = "")}
-        onChange={(e) => setCityInput(e.target.value)}
-        onKeyDown={(e) => e.keyCode === 13 && setTriggerFetch(!triggerFetch)}
-      />
-    </ErrorScreen>
-  ) : (
-    <LoadingScreen loadingMessage="Loading data..." />
-  );
-};
-
-export default App;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
--- a/public/icons/01d.svg
+++ b/public/icons/01d.svg
@ -1 +0,0 @@
-<svg height="511.99986pt" viewBox="0 0 511.99986 511.99986" width="511.99986pt" xmlns="http://www.w3.org/2000/svg"><path d="m477.449219 256c0-21.75 39.410156-48.386719 34.050781-68.449219-5.550781-20.757812-53.15625-24.101562-63.671875-42.277343-10.667969-18.433594 10.125-61.304688-4.835937-76.265626-14.960938-14.960937-57.832032 5.828126-76.269532-4.835937-18.171875-10.515625-21.515625-58.121094-42.273437-63.671875-20.0625-5.359375-46.699219 34.050781-68.449219 34.050781s-48.386719-39.410156-68.449219-34.050781c-20.757812 5.550781-24.101562 53.15625-42.277343 63.671875-18.433594 10.667969-61.304688-10.125-76.265626 4.835937-14.960937 14.960938 5.828126 57.832032-4.835937 76.269532-10.515625 18.171875-58.121094 21.515625-63.671875 42.273437-5.359375 20.0625 34.050781 46.699219 34.050781 68.449219s-39.410156 48.386719-34.050781 68.449219c5.550781 20.757812 53.15625 24.101562 63.671875 42.277343 10.667969 18.433594-10.125 61.304688 4.835937 76.265626 14.960938 14.960937 57.832032-5.828126 76.269532 4.835937 18.171875 10.515625 21.515625 58.121094 42.273437 63.671875 20.0625 5.359375 46.699219-34.050781 68.449219-34.050781s48.386719 39.410156 68.449219 34.050781c20.757812-5.550781 24.101562-53.15625 42.277343-63.671875 18.433594-10.667969 61.304688 10.125 76.265626-4.835937 14.960937-14.960938-5.828126-57.832032 4.835937-76.269532 10.515625-18.171875 58.121094-21.515625 63.671875-42.273437 5.359375-20.0625-34.050781-46.699219-34.050781-68.449219zm0 0" fill="#ffee8c"/><path d="m426.957031 256c0 86.347656-64.019531 157.746094-147.191406 169.3125-7.765625 1.089844-15.695313 1.640625-23.761719 1.640625-94.417968 0-170.96875-76.539063-170.96875-170.953125 0-94.417969 76.550782-170.957031 170.96875-170.957031 8.066406 0 15.996094.554687 23.761719 1.640625 83.171875 11.566406 147.191406 82.964844 147.191406 169.316406zm0 0" fill="#f28f44"/><path d="m426.957031 256c0 86.347656-64.019531 157.746094-147.191406 169.3125-83.175781-11.566406-147.195313-82.964844-147.195313-169.3125 0-86.351562 64.019532-157.75 147.195313-169.316406 83.171875 11.566406 147.191406 82.964844 147.191406 169.316406zm0 0" fill="#ffd073"/><g fill="#cc9236"><path d="m155.875 229.488281c-2.003906 0-4.011719-.765625-5.539062-2.296875-3.0625-3.0625-3.0625-8.023437 0-11.082031 17.53125-17.53125 46.054687-17.53125 63.582031 0 3.0625 3.058594 3.0625 8.019531 0 11.082031-3.058594 3.058594-8.019531 3.058594-11.082031 0-11.417969-11.421875-29.996094-11.421875-41.417969 0-1.53125 1.53125-3.535157 2.296875-5.542969 2.296875zm0 0"/><path d="m356.125 229.488281c-2.007812 0-4.011719-.765625-5.542969-2.296875-11.417969-11.421875-30-11.417968-41.417969 0-3.0625 3.058594-8.023437 3.058594-11.082031 0-3.0625-3.0625-3.0625-8.023437 0-11.082031 17.527344-17.53125 46.054688-17.53125 63.585938 0 3.058593 3.058594 3.058593 8.023437 0 11.082031-1.53125 1.53125-3.539063 2.296875-5.542969 2.296875zm0 0"/><path d="m256 310.582031c-17.015625 0-33.015625-6.628906-45.046875-18.660156-3.058594-3.0625-3.058594-8.023437 0-11.082031 3.0625-3.0625 8.023437-3.0625 11.082031 0 9.074219 9.070312 21.132813 14.066406 33.964844 14.066406s24.890625-4.996094 33.964844-14.066406c3.058594-3.0625 8.023437-3.0625 11.082031 0 3.058594 3.058594 3.058594 8.019531 0 11.082031-12.03125 12.03125-28.03125 18.660156-45.046875 18.660156zm0 0"/></g></svg>
--- a/public/icons/01n.svg
+++ b/public/icons/01n.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 0 512 512.00001" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m509.53125 291.945312c-79.9375 79.933594-209.539062 79.933594-289.472656 0-79.9375-79.9375-79.9375-209.539062 0-289.476562.835937-.835938 1.683594-1.648438 2.53125-2.46875-53.863282 7.269531-105.867188 31.585938-147.265625 72.984375-100.429688 100.429687-100.429688 263.261719 0 363.691406 100.429687 100.429688 263.261719 100.429688 363.691406 0 41.398437-41.398437 65.714844-93.402343 72.984375-147.265625-.820312.847656-1.632812 1.695313-2.46875 2.535156zm0 0" fill="#ffd073"/><path d="m368.015625 486.964844c-95.585937 45.640625-213.523437 28.875-292.691406-50.289063-100.433594-100.433593-100.433594-263.257812 0-363.691406 38.574219-38.574219 86.367187-62.328125 136.277343-71.25-25.664062 12.238281-49.722656 29.003906-70.976562 50.257813-100.433594 100.433593-100.433594 263.257812 0 363.691406 61.847656 61.84375 147.363281 85.609375 227.390625 71.28125zm0 0" fill="#f28f44"/><path d="m355.84375 117.804688 28.492188-5.566407c12.484374-2.441406 12.484374-20.300781 0-22.738281l-28.492188-5.570312c-16.21875-3.167969-28.898438-15.847657-32.066406-32.066407l-5.570313-28.492187c-2.4375-12.484375-20.300781-12.484375-22.738281 0l-5.570312 28.492187c-3.167969 16.21875-15.847657 28.898438-32.0625 32.066407l-28.496094 5.570312c-12.484375 2.4375-12.484375 20.296875 0 22.738281l28.496094 5.566407c16.214843 3.167968 28.894531 15.847656 32.0625 32.066406l5.570312 28.496094c2.4375 12.484374 20.300781 12.484374 22.738281 0l5.570313-28.496094c3.167968-16.214844 15.847656-28.898438 32.066406-32.066406zm0 0" fill="#ffee8c"/><path d="m424.875 251.722656 18.40625-3.597656c8.066406-1.574219 8.066406-13.113281 0-14.6875l-18.40625-3.597656c-10.476562-2.046875-18.667969-10.238282-20.714844-20.714844l-3.597656-18.40625c-1.574219-8.066406-13.113281-8.066406-14.6875 0l-3.597656 18.40625c-2.046875 10.476562-10.238282 18.667969-20.714844 20.714844l-18.40625 3.597656c-8.066406 1.574219-8.066406 13.113281 0 14.6875l18.40625 3.597656c10.476562 2.046875 18.667969 10.238282 20.714844 20.714844l3.597656 18.40625c1.574219 8.066406 13.113281 8.066406 14.6875 0l3.597656-18.40625c2.046875-10.476562 10.238282-18.664062 20.714844-20.714844zm0 0" fill="#ffee8c"/><g fill="#cc9236"><path d="m80.242188 257.46875c-3.292969 0-6.363282-2.078125-7.464844-5.375l-2.980469-8.90625c-1.378906-4.121094.84375-8.582031 4.964844-9.964844 4.125-1.378906 8.585937.84375 9.964843 4.96875l2.980469 8.90625c1.378907 4.121094-.84375 8.582032-4.964843 9.964844-.828126.277344-1.671876.40625-2.5.40625zm0 0"/><path d="m123.632812 242.949219c-3.292968 0-6.363281-2.082031-7.464843-5.378907l-2.980469-8.90625c-1.378906-4.121093.84375-8.582031 4.964844-9.964843 4.125-1.378907 8.585937.847656 9.964844 4.96875l2.980468 8.90625c1.378906 4.121093-.84375 8.582031-4.964844 9.964843-.828124.277344-1.671874.410157-2.5.410157zm0 0"/><path d="m105.152344 300.09375c-9.335938 0-18.613282-2.167969-27.214844-6.453125-3.890625-1.9375-5.472656-6.664063-3.535156-10.558594 1.941406-3.890625 6.667968-5.472656 10.558594-3.53125 22.402343 11.164063 49.707031 2.023438 60.875-20.375 1.9375-3.894531 6.667968-5.476562 10.554687-3.535156 3.894531 1.9375 5.476563 6.664063 3.535156 10.558594-7.285156 14.613281-19.824219 25.515625-35.308593 30.699219-6.375 2.132812-12.933594 3.195312-19.464844 3.195312zm0 0"/></g></svg>
--- a/public/icons/02d.svg
+++ b/public/icons/02d.svg
--- a/public/icons/02n.svg
+++ b/public/icons/02n.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 -10 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m483.324219 151.332031c-36.757813 36.757813-96.347657 36.757813-133.105469 0-36.757812-36.757812-36.757812-96.347656 0-133.105469.382812-.382812.773438-.757812 1.164062-1.132812-24.765624 3.339844-48.679687 14.519531-67.714843 33.558594-46.179688 46.179687-46.179688 121.050781 0 167.230468 46.179687 46.179688 121.050781 46.179688 167.230469 0 19.039062-19.035156 30.21875-42.949218 33.5625-67.714843-.378907.390625-.753907.78125-1.136719 1.164062zm0 0" fill="#ffd073"/><path d="m418.253906 241.007812c-43.953125 20.984376-98.183594 13.277344-134.585937-23.125-46.179688-46.183593-46.179688-121.050781 0-167.230468 17.738281-17.738282 39.714843-28.660156 62.664062-32.761719-11.800781 5.625-22.863281 13.335937-32.636719 23.109375-46.179687 46.179688-46.179687 121.046875 0 167.230469 28.4375 28.4375 67.757813 39.363281 104.558594 32.777343zm0 0" fill="#f28f44"/><path d="m119.625 66.523438 18.261719-3.566407c8-1.5625 8-13.011719 0-14.574219l-18.261719-3.570312c-10.394531-2.03125-18.519531-10.15625-20.550781-20.550781l-3.566407-18.261719c-1.5625-8-13.011718-8-14.574218 0l-3.570313 18.261719c-2.03125 10.394531-10.15625 18.519531-20.550781 20.550781l-18.261719 3.570312c-8 1.5625-8 13.007813 0 14.574219l18.261719 3.566407c10.394531 2.03125 18.519531 10.160156 20.550781 20.550781l3.570313 18.261719c1.5625 8.003906 13.011718 8.003906 14.574218 0l3.570313-18.261719c2.027344-10.390625 10.152344-18.519531 20.546875-20.550781zm0 0" fill="#ffee8c"/><path d="m408.09375 304.191406c0 37.882813-30.710938 68.59375-68.609375 68.59375h-248.265625c-50.371094 0-91.21875-40.832031-91.21875-91.21875 0-50.375 40.847656-91.21875 91.21875-91.21875 4.519531 0 8.964844.347656 13.316406.976563 20.601563-40.910157 62.964844-68.980469 111.910156-68.980469 59.222657 0 108.835938 41.117188 121.867188 96.355469 1.300781 5.511719 2.238281 11.164062 2.78125 16.921875v.011718c37.136719.851563 67 31.214844 67 68.558594zm0 0" fill="#84abc1"/><path d="m259.96875 130.125c-13.558594-5.035156-28.226562-7.777344-43.523438-7.777344-48.945312 0-91.296874 28.070313-111.910156 68.96875v.011719c-4.355468-.632813-8.796875-.980469-13.316406-.980469-50.386719.003906-91.21875 40.847656-91.21875 91.222656 0 50.386719 40.832031 91.21875 91.21875 91.21875h44.089844c-45.402344 0-82.191406-36.800781-82.191406-82.191406 0-40.277344 28.972656-73.796875 67.230468-80.828125 3.785156-.707031 7.660156-1.144531 11.613282-1.300781 1.105468-.039062 2.226562-.066406 3.347656-.066406 14.757812 0 28.613281 3.890625 40.574218 10.714844-1.660156-11.578126-13.632812-22.425782-31.28125-31.167969 9.691407-32.777344 42.675782-63.175781 115.367188-57.824219zm0 0" fill="#4d87a1"/><path d="m512 436.441406c0 30.636719-24.835938 55.472656-55.484375 55.472656h-200.785156c-40.738281 0-73.769531-33.019531-73.769531-73.769531 0-40.742187 33.03125-73.773437 73.769531-73.773437 3.65625 0 7.25.28125 10.769531.789062 16.664062-33.082031 50.925781-55.785156 90.507812-55.785156 47.894532 0 88.019532 33.25 98.558594 77.925781 1.050782 4.457031 1.8125 9.03125 2.25 13.683594v.011719c30.035156.6875 54.183594 25.242187 54.183594 55.445312zm0 0" fill="#d3ddea"/><path d="m392.207031 295.667969c-10.964843-4.074219-22.828125-6.289063-35.199219-6.289063-39.582031 0-73.835937 22.699219-90.507812 55.777344v.007812c-3.519531-.507812-7.113281-.789062-10.769531-.789062-40.75 0-73.769531 33.03125-73.769531 73.769531 0 40.75 33.019531 73.773438 73.769531 73.773438h35.660156c-36.71875 0-66.472656-29.761719-66.472656-66.472657 0-32.574218 23.429687-59.679687 54.371093-65.367187 3.0625-.574219 6.195313-.925781 9.394532-1.050781.894531-.03125 1.800781-.054688 2.707031-.054688 11.933594 0 23.140625 3.144532 32.8125 8.664063-1.34375-9.363281-11.023437-18.136719-25.300781-25.207031 7.839844-26.507813 34.515625-51.089844 93.304687-46.761719zm0 0" fill="#84abc1"/></svg>
--- a/public/icons/03d.svg
+++ b/public/icons/03d.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 -99 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m512 228.148438c0 47.527343-38.53125 86.058593-86.078125 86.058593h-311.476563c-63.199218 0-114.44140575-51.226562-114.44140575-114.445312 0-63.199219 51.24218775-114.445313 114.44140575-114.445313 5.671876 0 11.246094.4375 16.707032 1.226563 25.847656-51.324219 79-86.542969 140.40625-86.542969 74.296875 0 136.546875 51.585938 152.894531 120.890625 1.632813 6.914063 2.8125 14.007813 3.492187 21.230469v.015625c46.589844 1.066406 84.054688 39.160156 84.054688 86.011719zm0 0" fill="#d3ddea"/><path d="m326.164062 9.765625c-17.011718-6.316406-35.414062-9.7578125-54.605468-9.7578125-61.40625 0-114.542969 35.2187495-140.410156 86.5273435v.015625c-5.457032-.792969-11.03125-1.226562-16.703126-1.226562-63.214843 0-114.445312 51.246093-114.445312 114.445312 0 63.214844 51.230469 114.445313 114.445312 114.445313h55.316407c-56.964844 0-103.121094-46.171875-103.121094-103.121094 0-50.535156 36.351563-92.585938 84.347656-101.40625 4.75-.886719 9.613281-1.4375 14.570313-1.632812 1.390625-.046876 2.796875-.082032 4.203125-.082032 18.511719 0 35.894531 4.878906 50.90625 13.445313-2.085938-14.53125-17.105469-28.140625-39.25-39.105469 12.160156-41.125 53.542969-79.265625 144.746093-72.546875zm0 0" fill="#84abc1"/></svg>
--- a/public/icons/03n.svg
+++ b/public/icons/03n.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 -99 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m512 228.148438c0 47.527343-38.53125 86.058593-86.078125 86.058593h-311.476563c-63.199218 0-114.44140575-51.226562-114.44140575-114.445312 0-63.199219 51.24218775-114.445313 114.44140575-114.445313 5.671876 0 11.246094.4375 16.707032 1.226563 25.847656-51.324219 79-86.542969 140.40625-86.542969 74.296875 0 136.546875 51.585938 152.894531 120.890625 1.632813 6.914063 2.8125 14.007813 3.492187 21.230469v.015625c46.589844 1.066406 84.054688 39.160156 84.054688 86.011719zm0 0" fill="#d3ddea"/><path d="m326.164062 9.765625c-17.011718-6.316406-35.414062-9.7578125-54.605468-9.7578125-61.40625 0-114.542969 35.2187495-140.410156 86.5273435v.015625c-5.457032-.792969-11.03125-1.226562-16.703126-1.226562-63.214843 0-114.445312 51.246093-114.445312 114.445312 0 63.214844 51.230469 114.445313 114.445312 114.445313h55.316407c-56.964844 0-103.121094-46.171875-103.121094-103.121094 0-50.535156 36.351563-92.585938 84.347656-101.40625 4.75-.886719 9.613281-1.4375 14.570313-1.632812 1.390625-.046876 2.796875-.082032 4.203125-.082032 18.511719 0 35.894531 4.878906 50.90625 13.445313-2.085938-14.53125-17.105469-28.140625-39.25-39.105469 12.160156-41.125 53.542969-79.265625 144.746093-72.546875zm0 0" fill="#84abc1"/></svg>
--- a/public/icons/04d.svg
+++ b/public/icons/04d.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 -71 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m408.09375 181.847656c0 37.882813-30.710938 68.59375-68.609375 68.59375h-248.265625c-50.371094 0-91.21875-40.832031-91.21875-91.21875 0-50.375 40.847656-91.21875 91.21875-91.21875 4.519531 0 8.964844.347656 13.316406.976563 20.601563-40.910157 62.964844-68.980469 111.910156-68.980469 59.222657 0 108.835938 41.117188 121.867188 96.355469 1.300781 5.511719 2.238281 11.164062 2.78125 16.921875v.011718c37.136719.851563 67 31.214844 67 68.558594zm0 0" fill="#84abc1"/><path d="m259.96875 7.78125c-13.558594-5.035156-28.226562-7.77734375-43.523438-7.77734375-48.945312 0-91.296874 28.07421875-111.910156 68.96874975v.011719c-4.355468-.628906-8.796875-.976563-13.316406-.976563-50.386719 0-91.21875 40.84375-91.21875 91.21875 0 50.386719 40.832031 91.21875 91.21875 91.21875h44.089844c-45.402344 0-82.191406-36.800781-82.191406-82.191406 0-40.28125 28.972656-73.796875 67.230468-80.828125 3.785156-.707031 7.660156-1.144531 11.613282-1.300781 1.105468-.039062 2.226562-.066406 3.347656-.066406 14.757812 0 28.613281 3.890625 40.574218 10.714844-1.660156-11.578126-13.632812-22.425782-31.28125-31.167969 9.691407-32.777344 42.675782-63.175781 115.367188-57.824219zm0 0" fill="#4d87a1"/><path d="m264.3125 245.925781c.496094.085938.789062.085938.835938.085938h-3.796876c.992188 0 1.976563-.03125 2.960938-.085938zm0 0" fill="#84abc1"/><path d="m512 314.097656c0 30.636719-24.835938 55.476563-55.484375 55.476563h-200.785156c-40.738281 0-73.769531-33.023438-73.769531-73.773438 0-40.738281 33.03125-73.773437 73.769531-73.773437 3.65625 0 7.25.28125 10.769531.792968 16.664062-33.085937 50.925781-55.789062 90.507812-55.789062 47.894532 0 88.019532 33.25 98.558594 77.929688 1.050782 4.457031 1.8125 9.027343 2.25 13.683593v.007813c30.035156.6875 54.183594 25.246094 54.183594 55.445312zm0 0" fill="#d3ddea"/><path d="m392.207031 173.324219c-10.964843-4.070313-22.828125-6.289063-35.199219-6.289063-39.582031 0-73.835937 22.703125-90.507812 55.777344v.007812c-3.519531-.507812-7.113281-.789062-10.769531-.789062-40.75 0-73.769531 33.03125-73.769531 73.773438 0 40.75 33.019531 73.769531 73.769531 73.769531h35.660156c-36.71875 0-66.472656-29.761719-66.472656-66.46875 0-32.578125 23.429687-59.683594 54.371093-65.371094 3.0625-.570313 6.195313-.925781 9.394532-1.050781.894531-.03125 1.800781-.050782 2.707031-.050782 11.933594 0 23.140625 3.144532 32.8125 8.664063-1.34375-9.367187-11.023437-18.140625-25.300781-25.210937 7.839844-26.507813 34.515625-51.089844 93.304687-46.761719zm0 0" fill="#84abc1"/></svg>
--- a/public/icons/04n.svg
+++ b/public/icons/04n.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 -71 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m408.09375 181.847656c0 37.882813-30.710938 68.59375-68.609375 68.59375h-248.265625c-50.371094 0-91.21875-40.832031-91.21875-91.21875 0-50.375 40.847656-91.21875 91.21875-91.21875 4.519531 0 8.964844.347656 13.316406.976563 20.601563-40.910157 62.964844-68.980469 111.910156-68.980469 59.222657 0 108.835938 41.117188 121.867188 96.355469 1.300781 5.511719 2.238281 11.164062 2.78125 16.921875v.011718c37.136719.851563 67 31.214844 67 68.558594zm0 0" fill="#84abc1"/><path d="m259.96875 7.78125c-13.558594-5.035156-28.226562-7.77734375-43.523438-7.77734375-48.945312 0-91.296874 28.07421875-111.910156 68.96874975v.011719c-4.355468-.628906-8.796875-.976563-13.316406-.976563-50.386719 0-91.21875 40.84375-91.21875 91.21875 0 50.386719 40.832031 91.21875 91.21875 91.21875h44.089844c-45.402344 0-82.191406-36.800781-82.191406-82.191406 0-40.28125 28.972656-73.796875 67.230468-80.828125 3.785156-.707031 7.660156-1.144531 11.613282-1.300781 1.105468-.039062 2.226562-.066406 3.347656-.066406 14.757812 0 28.613281 3.890625 40.574218 10.714844-1.660156-11.578126-13.632812-22.425782-31.28125-31.167969 9.691407-32.777344 42.675782-63.175781 115.367188-57.824219zm0 0" fill="#4d87a1"/><path d="m264.3125 245.925781c.496094.085938.789062.085938.835938.085938h-3.796876c.992188 0 1.976563-.03125 2.960938-.085938zm0 0" fill="#84abc1"/><path d="m512 314.097656c0 30.636719-24.835938 55.476563-55.484375 55.476563h-200.785156c-40.738281 0-73.769531-33.023438-73.769531-73.773438 0-40.738281 33.03125-73.773437 73.769531-73.773437 3.65625 0 7.25.28125 10.769531.792968 16.664062-33.085937 50.925781-55.789062 90.507812-55.789062 47.894532 0 88.019532 33.25 98.558594 77.929688 1.050782 4.457031 1.8125 9.027343 2.25 13.683593v.007813c30.035156.6875 54.183594 25.246094 54.183594 55.445312zm0 0" fill="#d3ddea"/><path d="m392.207031 173.324219c-10.964843-4.070313-22.828125-6.289063-35.199219-6.289063-39.582031 0-73.835937 22.703125-90.507812 55.777344v.007812c-3.519531-.507812-7.113281-.789062-10.769531-.789062-40.75 0-73.769531 33.03125-73.769531 73.773438 0 40.75 33.019531 73.769531 73.769531 73.769531h35.660156c-36.71875 0-66.472656-29.761719-66.472656-66.46875 0-32.578125 23.429687-59.683594 54.371093-65.371094 3.0625-.570313 6.195313-.925781 9.394532-1.050781.894531-.03125 1.800781-.050782 2.707031-.050782 11.933594 0 23.140625 3.144532 32.8125 8.664063-1.34375-9.367187-11.023437-18.140625-25.300781-25.210937 7.839844-26.507813 34.515625-51.089844 93.304687-46.761719zm0 0" fill="#84abc1"/></svg>
--- a/public/icons/09d.svg
+++ b/public/icons/09d.svg
--- a/public/icons/09n.svg
+++ b/public/icons/09n.svg
--- a/public/icons/10d.svg
+++ b/public/icons/10d.svg
--- a/public/icons/10n.svg
+++ b/public/icons/10n.svg
--- a/public/icons/11d.svg
+++ b/public/icons/11d.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m511.433594 227.894531c0 47.476563-38.488282 85.964844-85.980469 85.964844h-311.132813c-63.128906 0-114.320312-51.171875-114.320312-114.316406 0-63.132813 51.191406-114.320313 114.320312-114.320313 5.664063 0 11.230469.433594 16.6875 1.226563 25.820313-51.269531 78.910157-86.449219 140.25-86.449219 74.21875 0 136.398438 51.527344 152.726563 120.757812 1.632813 6.90625 2.808594 13.992188 3.488281 21.207032v.015625c46.539063 1.0625 83.960938 39.117187 83.960938 85.914062zm0 0" fill="#84abc1"/><path d="m325.800781 9.753906c-16.992187-6.3125-35.371093-9.74999975-54.542969-9.74999975-61.339843 0-114.414062 35.18359375-140.253906 86.43359375v.015625c-5.453125-.789063-11.019531-1.226563-16.683594-1.226563-63.148437 0-114.320312 51.191407-114.320312 114.320313 0 63.148437 51.171875 114.320313 114.320312 114.320313h55.253907c-56.902344 0-103.007813-46.121094-103.007813-103.007813 0-50.476563 36.3125-92.484375 84.253906-101.292969 4.746094-.886718 9.601563-1.4375 14.558594-1.632812 1.386719-.046875 2.789063-.078125 4.195313-.078125 18.492187 0 35.855469 4.871093 50.851562 13.425781-2.085937-14.511719-17.085937-28.105469-39.207031-39.0625 12.144531-41.078125 53.484375-79.175781 144.582031-72.464844zm0 0" fill="#4d87a1"/><path d="m357.722656 139.523438-194.324218 174.421874h48.257812l-70.503906 81.363282h50.609375l-80.035157 116.691406 191.855469-133.492188h-52.96875l84.746094-95.222656h-52.964844z" fill="#ffee8c"/></svg>
--- a/public/icons/11n.svg
+++ b/public/icons/11n.svg
@ -1 +0,0 @@
-<svg height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m511.433594 227.894531c0 47.476563-38.488282 85.964844-85.980469 85.964844h-311.132813c-63.128906 0-114.320312-51.171875-114.320312-114.316406 0-63.132813 51.191406-114.320313 114.320312-114.320313 5.664063 0 11.230469.433594 16.6875 1.226563 25.820313-51.269531 78.910157-86.449219 140.25-86.449219 74.21875 0 136.398438 51.527344 152.726563 120.757812 1.632813 6.90625 2.808594 13.992188 3.488281 21.207032v.015625c46.539063 1.0625 83.960938 39.117187 83.960938 85.914062zm0 0" fill="#84abc1"/><path d="m325.800781 9.753906c-16.992187-6.3125-35.371093-9.74999975-54.542969-9.74999975-61.339843 0-114.414062 35.18359375-140.253906 86.43359375v.015625c-5.453125-.789063-11.019531-1.226563-16.683594-1.226563-63.148437 0-114.320312 51.191407-114.320312 114.320313 0 63.148437 51.171875 114.320313 114.320312 114.320313h55.253907c-56.902344 0-103.007813-46.121094-103.007813-103.007813 0-50.476563 36.3125-92.484375 84.253906-101.292969 4.746094-.886718 9.601563-1.4375 14.558594-1.632812 1.386719-.046875 2.789063-.078125 4.195313-.078125 18.492187 0 35.855469 4.871093 50.851562 13.425781-2.085937-14.511719-17.085937-28.105469-39.207031-39.0625 12.144531-41.078125 53.484375-79.175781 144.582031-72.464844zm0 0" fill="#4d87a1"/><path d="m357.722656 139.523438-194.324218 174.421874h48.257812l-70.503906 81.363282h50.609375l-80.035157 116.691406 191.855469-133.492188h-52.96875l84.746094-95.222656h-52.964844z" fill="#ffee8c"/></svg>
--- a/public/icons/13d.svg
+++ b/public/icons/13d.svg
--- a/public/icons/13n.svg
+++ b/public/icons/13n.svg
--- a/public/icons/50d.svg
+++ b/public/icons/50d.svg
--- a/public/icons/50n.svg
+++ b/public/icons/50n.svg
--- a/public/icons/binocular.png
+++ b/public/icons/binocular.png
--- a/public/icons/compass.png
+++ b/public/icons/compass.png
--- a/public/icons/humidity.png
+++ b/public/icons/humidity.png
--- a/public/icons/sunrise.png
+++ b/public/icons/sunrise.png
--- a/public/icons/sunset.png
+++ b/public/icons/sunset.png
--- a/public/icons/wind.png
+++ b/public/icons/wind.png
--- a/services/converters.js
+++ b/services/converters.js
@ -1,41 +0,0 @@
-export const ctoF = (c) => (c * 9) / 5 + 32;
-
-export const mpsToMph = (mps) => (mps * 2.236936).toFixed(2);
-
-export const kmToMiles = (km) => (km / 1.609).toFixed(1);
-
-export const timeTo12HourFormat = (time) => {
-  let [hours, minutes] = time.split(":");
-  return `${(hours %= 12) ? hours : 12}:${minutes}`;
-};
-
-export const degToCompass = (num) => {
-  var val = Math.round(num / 22.5);
-  var arr = [
-    "N",
-    "NNE",
-    "NE",
-    "ENE",
-    "E",
-    "ESE",
-    "SE",
-    "SSE",
-    "S",
-    "SSW",
-    "SW",
-    "WSW",
-    "W",
-    "WNW",
-    "NW",
-    "NNW",
-  ];
-  return arr[val % 16];
-};
-
-export const unixToLocalTime = (unixSeconds, timezone) => {
-  let time = new Date((unixSeconds + timezone) * 1000)
-    .toISOString()
-    .match(/(\d{2}:\d{2})/)[0];
-
-  return time.startsWith("0") ? time.substring(1) : time;
-};
--- a/services/helpers.js
+++ b/services/helpers.js
@ -1,41 +0,0 @@
-import {
-  unixToLocalTime,
-  kmToMiles,
-  mpsToMph,
-  timeTo12HourFormat,
-} from "./converters";
-
-export const getWindSpeed = (unitSystem, windInMps) =>
-  unitSystem == "metric" ? windInMps : mpsToMph(windInMps);
-
-export const getVisibility = (unitSystem, visibilityInMeters) =>
-  unitSystem == "metric"
-    ? (visibilityInMeters / 1000).toFixed(1)
-    : kmToMiles(visibilityInMeters / 1000);
-
-export const getTime = (unitSystem, currentTime, timezone) =>
-  unitSystem == "metric"
-    ? unixToLocalTime(currentTime, timezone)
-    : timeTo12HourFormat(unixToLocalTime(currentTime, timezone));
-
-export const getAMPM = (unitSystem, currentTime, timezone) =>
-  unitSystem === "imperial"
-    ? unixToLocalTime(currentTime, timezone).split(":")[0] >= 12
-      ? "PM"
-      : "AM"
-    : "";
-
-export const getWeekDay = (weatherData) => {
-  const weekday = [
-    "Sunday",
-    "Monday",
-    "Tuesday",
-    "Wednesday",
-    "Thursday",
-    "Friday",
-    "Saturday",
-  ];
-  return weekday[
-    new Date((weatherData.dt + weatherData.timezone) * 1000).getUTCDay()
-  ];
-};
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/fonts/GeistMonoVF.woff
+++ b/src/app/fonts/GeistMonoVF.woff
--- a/src/app/fonts/GeistVF.woff
+++ b/src/app/fonts/GeistVF.woff
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -0,0 +1,70 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 87.18%;
+    --foreground: 0 0% 12.94%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 26 83.33% 14.12%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 12.94%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 12.94%;
+    --border: 20 0% 52.31%;
+    --input: 20 21.42% 41.39%;
+    --primary: 47.9 100% 48.08%;
+    --primary-foreground: 26 83.3% 14.1%;
+    --secondary: 26 49.13% 43.5%;
+    --secondary-foreground: 0 0% 92.55%;
+    --accent: 60 0% 93.08%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --ring: 20 14.3% 4.1%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 0 0% 92.55%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 0 0% 92.55%;
+    --border: 12 6.19% 17.63%;
+    --input: 12 6.5% 15.1%;
+    --primary: 60 96.56% 44.61%;
+    --primary-foreground: 26 90.03% 12.55%;
+    --secondary: 12 26.8% 16.18%;
+    --secondary-foreground: 0 0% 92.55%;
+    --accent: 12 5.7% 26.68%;
+    --accent-foreground: 0 0% 92.55%;
+    --destructive: 0 76.12% 38%;
+    --destructive-foreground: 0 0% 92.55%;
+    --ring: 47.95 95.82% 53.14%;
+  }
+}
+
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "./globals.css";
+
+const geistSans = localFont({
+  src: "./fonts/GeistVF.woff",
+  variable: "--font-geist-sans",
+  weight: "100 900",
+});
+const geistMono = localFont({
+  src: "./fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@ -0,0 +1,101 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
+      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
+        <Image
+          className="dark:invert"
+          src="https://nextjs.org/icons/next.svg"
+          alt="Next.js logo"
+          width={180}
+          height={38}
+          priority
+        />
+        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
+          <li className="mb-2">
+            Get started by editing{" "}
+            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
+              src/app/page.tsx
+            </code>
+            .
+          </li>
+          <li>Save and see your changes instantly.</li>
+        </ol>
+
+        <div className="flex gap-4 items-center flex-col sm:flex-row">
+          <a
+            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="https://nextjs.org/icons/vercel.svg"
+              alt="Vercel logomark"
+              width={20}
+              height={20}
+            />
+            Deploy now
+          </a>
+          <a
+            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Read our docs
+          </a>
+        </div>
+      </main>
+      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="https://nextjs.org/icons/file.svg"
+            alt="File icon"
+            width={16}
+            height={16}
+          />
+          Learn
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="https://nextjs.org/icons/window.svg"
+            alt="Window icon"
+            width={16}
+            height={16}
+          />
+          Examples
+        </a>
+        <a
+          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
+          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Image
+            aria-hidden
+            src="https://nextjs.org/icons/globe.svg"
+            alt="Globe icon"
+            width={16}
+            height={16}
+          />
+          Go to nextjs.org →
+        </a>
+      </footer>
+    </div>
+  );
+}
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@ -0,0 +1,57 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@ -0,0 +1,141 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+const AlertDialog = AlertDialogPrimitive.Root
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    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}
+    ref={ref}
+  />
+))
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.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}
+    />
+  </AlertDialogPortal>
+))
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogHeader.displayName = "AlertDialogHeader"
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+))
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+))
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+))
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@ -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 }
--- a/src/components/ui/aspect-ratio.tsx
+++ b/src/components/ui/aspect-ratio.tsx
@ -0,0 +1,7 @@
+"use client"
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }
--- a/src/components/ui/avatar.tsx
+++ b/src/components/ui/avatar.tsx
@ -0,0 +1,50 @@
+"use client"
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("aspect-square h-full w-full", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }
--- a/src/components/ui/badge.tsx
+++ b/src/components/ui/badge.tsx
@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/src/components/ui/breadcrumb.tsx
+++ b/src/components/ui/breadcrumb.tsx
@ -0,0 +1,115 @@
+import * as React from "react"
+import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils"
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className
+    )}
+    {...props}
+  />
+))
+BreadcrumbList.displayName = "BreadcrumbList"
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+))
+BreadcrumbItem.displayName = "BreadcrumbItem"
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  )
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+))
+BreadcrumbPage.displayName = "BreadcrumbPage"
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <ChevronRightIcon />}
+  </li>
+)
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+)
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -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 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",
+  {
+    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 }
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@ -0,0 +1,72 @@
+"use client"
+
+import * as React from "react"
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"
+import { DayPicker } from "react-day-picker"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: cn(
+          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+          props.mode === "range"
+            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+            : "[&:has([aria-selected])]:rounded-md"
+        ),
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = "Calendar"
+
+export { Calendar }
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@ -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 }
--- a/src/components/ui/carousel.tsx
+++ b/src/components/ui/carousel.tsx
@ -0,0 +1,262 @@
+"use client"
+
+import * as React from "react"
+import { ArrowLeftIcon, ArrowRightIcon } from "@radix-ui/react-icons"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    )
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return
+      }
+
+      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollNext(api.canScrollNext())
+    }, [])
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev()
+    }, [api])
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext()
+    }, [api])
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault()
+          scrollPrev()
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault()
+          scrollNext()
+        }
+      },
+      [scrollPrev, scrollNext]
+    )
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return
+      }
+
+      setApi(api)
+    }, [api, setApi])
+
+    React.useEffect(() => {
+      if (!api) {
+        return
+      }
+
+      onSelect(api)
+      api.on("reInit", onSelect)
+      api.on("select", onSelect)
+
+      return () => {
+        api?.off("select", onSelect)
+      }
+    }, [api, onSelect])
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    )
+  }
+)
+Carousel.displayName = "Carousel"
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+})
+CarouselContent.displayName = "CarouselContent"
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+})
+CarouselItem.displayName = "CarouselItem"
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeftIcon className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+})
+CarouselPrevious.displayName = "CarouselPrevious"
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRightIcon className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+})
+CarouselNext.displayName = "CarouselNext"
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}
--- a/src/components/ui/chart.tsx
+++ b/src/components/ui/chart.tsx
@ -0,0 +1,370 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+import {
+  NameType,
+  Payload,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"]
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+})
+ChartContainer.displayName = "Chart"
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean
+      hideIndicator?: boolean
+      indicator?: "line" | "dot" | "dashed"
+      nameKey?: string
+      labelKey?: string
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null
+      }
+
+      const [item] = payload
+      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        )
+      }
+
+      if (!value) {
+        return null
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ])
+
+    if (!active || !payload?.length) {
+      return null
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot"
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color || item.payload.fill || item.color
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label || item.name}
+                        </span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+)
+ChartTooltipContent.displayName = "ChartTooltip"
+
+const ChartLegend = RechartsPrimitive.Legend
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean
+      nameKey?: string
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart()
+
+    if (!payload?.length) {
+      return null
+    }
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}
+      >
+        {payload.map((item) => {
+          const key = `${nameKey || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+      </div>
+    )
+  }
+)
+ChartLegendContent.displayName = "ChartLegend"
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@ -0,0 +1,30 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }
--- a/src/components/ui/collapsible.tsx
+++ b/src/components/ui/collapsible.tsx
@ -0,0 +1,11 @@
+"use client"
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+const Collapsible = CollapsiblePrimitive.Root
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@ -0,0 +1,155 @@
+"use client"
+
+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 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",
+      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,
+}
--- a/src/components/ui/context-menu.tsx
+++ b/src/components/ui/context-menu.tsx
@ -0,0 +1,204 @@
+"use client"
+
+import * as React from "react"
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const ContextMenu = ContextMenuPrimitive.Root
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
+
+const ContextMenuGroup = ContextMenuPrimitive.Group
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal
+
+const ContextMenuSub = ContextMenuPrimitive.Sub
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+))
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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}
+  />
+))
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[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}
+    />
+  </ContextMenuPrimitive.Portal>
+))
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+))
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+))
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+}
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@ -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,
+}
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@ -0,0 +1,205 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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}
+  />
+))
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "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-[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}
+    />
+  </DropdownMenuPrimitive.Portal>
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+))
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+))
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  )
+}
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+}
--- a/src/components/ui/form.tsx
+++ b/src/components/ui/form.tsx
@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { Slot } from "@radix-ui/react-slot"
+import {
+  Controller,
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  FormProvider,
+  useFormContext,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState, formState } = useFormContext()
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
+    </FormItemContext.Provider>
+  )
+})
+FormItem.displayName = "FormItem"
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+})
+FormLabel.displayName = "FormLabel"
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+})
+FormControl.displayName = "FormControl"
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  )
+})
+FormDescription.displayName = "FormDescription"
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message) : children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+})
+FormMessage.displayName = "FormMessage"
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}
--- a/src/components/ui/hover-card.tsx
+++ b/src/components/ui/hover-card.tsx
@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
+
+import { cn } from "@/lib/utils"
+
+const HoverCard = HoverCardPrimitive.Root
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[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}
+  />
+))
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
+
+export { HoverCard, HoverCardTrigger, HoverCardContent }
--- a/src/components/ui/input-otp.tsx
+++ b/src/components/ui/input-otp.tsx
@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { DashIcon } from "@radix-ui/react-icons"
+import { OTPInput, OTPInputContext } from "input-otp"
+
+import { cn } from "@/lib/utils"
+
+const InputOTP = React.forwardRef<
+  React.ElementRef<typeof OTPInput>,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
+>(({ className, containerClassName, ...props }, ref) => (
+  <OTPInput
+    ref={ref}
+    containerClassName={cn(
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
+      containerClassName
+    )}
+    className={cn("disabled:cursor-not-allowed", className)}
+    {...props}
+  />
+))
+InputOTP.displayName = "InputOTP"
+
+const InputOTPGroup = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
+))
+InputOTPGroup.displayName = "InputOTPGroup"
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+})
+InputOTPSlot.displayName = "InputOTPSlot"
+
+const InputOTPSeparator = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <DashIcon />
+  </div>
+))
+InputOTPSeparator.displayName = "InputOTPSeparator"
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }
--- a/src/components/ui/menubar.tsx
+++ b/src/components/ui/menubar.tsx
@ -0,0 +1,240 @@
+"use client"
+
+import * as React from "react"
+import {
+  CheckIcon,
+  ChevronRightIcon,
+  DotFilledIcon,
+} from "@radix-ui/react-icons"
+import * as MenubarPrimitive from "@radix-ui/react-menubar"
+
+import { cn } from "@/lib/utils"
+
+const MenubarMenu = MenubarPrimitive.Menu
+
+const MenubarGroup = MenubarPrimitive.Group
+
+const MenubarPortal = MenubarPrimitive.Portal
+
+const MenubarSub = MenubarPrimitive.Sub
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRightIcon className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+))
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[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}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <DotFilledIcon className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+MenubarShortcut.displayname = "MenubarShortcut"
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+}
--- a/src/components/ui/navigation-menu.tsx
+++ b/src/components/ui/navigation-menu.tsx
@ -0,0 +1,128 @@
+import * as React from "react"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
--- a/src/components/ui/pagination.tsx
+++ b/src/components/ui/pagination.tsx
@ -0,0 +1,121 @@
+import * as React from "react"
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DotsHorizontalIcon,
+} from "@radix-ui/react-icons"
+
+import { cn } from "@/lib/utils"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+)
+Pagination.displayName = "Pagination"
+
+const PaginationContent = React.forwardRef<
+  HTMLUListElement,
+  React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+  <ul
+    ref={ref}
+    className={cn("flex flex-row items-center gap-1", className)}
+    {...props}
+  />
+))
+PaginationContent.displayName = "PaginationContent"
+
+const PaginationItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
+
+type PaginationLinkProps = {
+  isActive?: boolean
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">
+
+const PaginationLink = ({
+  className,
+  isActive,
+  size = "icon",
+  ...props
+}: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className
+    )}
+    {...props}
+  />
+)
+PaginationLink.displayName = "PaginationLink"
+
+const PaginationPrevious = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to previous page"
+    size="default"
+    className={cn("gap-1 pl-2.5", className)}
+    {...props}
+  >
+    <ChevronLeftIcon className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+)
+PaginationPrevious.displayName = "PaginationPrevious"
+
+const PaginationNext = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink
+    aria-label="Go to next page"
+    size="default"
+    className={cn("gap-1 pr-2.5", className)}
+    {...props}
+  >
+    <span>Next</span>
+    <ChevronRightIcon className="h-4 w-4" />
+  </PaginationLink>
+)
+PaginationNext.displayName = "PaginationNext"
+
+const PaginationEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    aria-hidden
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <DotsHorizontalIcon className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+)
+PaginationEllipsis.displayName = "PaginationEllipsis"
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationLink,
+  PaginationItem,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+}
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[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}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
--- a/src/components/ui/progress.tsx
+++ b/src/components/ui/progress.tsx
@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }
--- a/src/components/ui/radio-group.tsx
+++ b/src/components/ui/radio-group.tsx
@ -0,0 +1,44 @@
+"use client"
+
+import * as React from "react"
+import { CheckIcon } from "@radix-ui/react-icons"
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
+
+import { cn } from "@/lib/utils"
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  )
+})
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <CheckIcon className="h-3.5 w-3.5 fill-primary" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  )
+})
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
+
+export { RadioGroup, RadioGroupItem }
--- a/src/components/ui/resizable.tsx
+++ b/src/components/ui/resizable.tsx
@ -0,0 +1,45 @@
+"use client"
+
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "@/lib/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
--- a/src/components/ui/scroll-area.tsx
+++ b/src/components/ui/scroll-area.tsx
@ -0,0 +1,48 @@
+"use client"
+
+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 }
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import {
+  CaretSortIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@radix-ui/react-icons"
+import * as SelectPrimitive from "@radix-ui/react-select"
+
+import { cn } from "@/lib/utils"
+
+const Select = SelectPrimitive.Root
+
+const SelectGroup = SelectPrimitive.Group
+
+const SelectValue = SelectPrimitive.Value
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <CaretSortIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+))
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[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",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+))
+SelectContent.displayName = SelectPrimitive.Content.displayName
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+))
+SelectLabel.displayName = SelectPrimitive.Label.displayName
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+))
+SelectItem.displayName = SelectPrimitive.Item.displayName
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+}
--- a/src/components/ui/separator.tsx
+++ b/src/components/ui/separator.tsx
@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Mathis	11f472646d	feat(app): add favicon.ico and remove city.json Added a new favicon.ico to the src/app directory and deleted the city.json file from the configs folder. This change updates the application icon and removes unnecessary configuration.	2024-09-27 11:59:48 +02:00
Mathis	ff3821e777	docs: simplify README instructions and description Streamlined the description of weather checking capabilities in the README. Removed detailed setup steps about API key creation and environment variable configuration to focus on essential installation commands.	2024-09-27 11:58:42 +02:00
Mathis	ed37351c49	feat(fonts): add Geist font files Introduce GeistMonoVF.woff and GeistVF.woff to the project. This enhances the typography options available for the application.	2024-09-27 11:58:28 +02:00
Mathis	cbf1047244	feat(app): add base layout and home page Introduced global CSS styling and created the initial structure for the Home page and Root layout. The Home page includes a logo, instructions, and helpful links, while the layout sets up metadata and font usage.	2024-09-27 11:58:10 +02:00
Mathis	1d93fd9aec	chore(build): configure Next.js with TypeScript and TailwindCSS Removed VSCode settings and set up essential configuration files. Added Next.js, PostCSS, and TailwindCSS configurations for improved development workflow. Updated tsconfig.json and .gitignore for TypeScript support.	2024-09-27 11:57:39 +02:00
Mathis	2997df14e0	build: update pnpm-lock.yaml dependencies Updated multiple dependencies in pnpm-lock.yaml, removing outdated ones like axios and adding new ones such as @radix-ui/react components, react 18.x, and others. This includes upgrading Next.js to version 14.2.13 and adjusting devDependencies accordingly.	2024-09-27 11:56:58 +02:00
Mathis	9b2a86d887	feat(utils): add utility function for class merging Introduced `cn` function leveraging `clsx` and `twMerge` to merge class names. This utility simplifies handling of conditional class names with Tailwind CSS.	2024-09-27 11:56:34 +02:00
Mathis	f982d076a7	feat(hooks): add use-toast hook for toast notifications Introduce a new use-toast hook inspired by the react-hot-toast library. This hook manages toast notifications with actions such as ADD_TOAST, UPDATE_TOAST, DISMISS_TOAST, and REMOVE_TOAST.	2024-09-27 11:56:13 +02:00
Mathis	45562d875c	feat(components): add new UI components for checkbox, chart, command, collapsible, dialog, and context-menu Introduce various UI components including Checkbox, Chart, Command, Collapsible, Dialog, and ContextMenu. These components leverage Radix UI and Recharts to enhance the UI toolkit.	2024-09-27 11:55:48 +02:00
Mathis	c7bf608462	feat: remove obsolete and outdated components and assets Deleted unused components and icon assets for codebase cleanup. This includes various UI components, CSS modules, and image assets no longer needed for the project.	2024-09-27 11:55:23 +02:00
				`@ -1 +0,0 @@`
				`export const LoadingScreen = ({ loadingMessage }) => <h1>{loadingMessage}</h1>;`
				`@ -1 +0,0 @@`
				<svg height="511.99986pt" viewBox="0 0 511.99986 511.99986" width="511.99986pt" xmlns="http://www.w3.org/2000/svg"><path d="m477.449219 256c0-21.75 39.410156-48.386719 34.050781-68.449219-5.550781-20.757812-53.15625-24.101562-63.671875-42.277343-10.667969-18.433594 10.125-61.304688-4.835937-76.265626-14.960938-14.960937-57.832032 5.828126-76.269532-4.835937-18.171875-10.515625-21.515625-58.121094-42.273437-63.671875-20.0625-5.359375-46.699219 34.050781-68.449219 34.050781s-48.386719-39.410156-68.449219-34.050781c-20.757812 5.550781-24.101562 53.15625-42.277343 63.671875-18.433594 10.667969-61.304688-10.125-76.265626 4.835937-14.960937 14.960938 5.828126 57.832032-4.835937 76.269532-10.515625 18.171875-58.121094 21.515625-63.671875 42.273437-5.359375 20.0625 34.050781 46.699219 34.050781 68.449219s-39.410156 48.386719-34.050781 68.449219c5.550781 20.757812 53.15625 24.101562 63.671875 42.277343 10.667969 18.433594-10.125 61.304688 4.835937 76.265626 14.960938 14.960937 57.832032-5.828126 76.269532 4.835937 18.171875 10.515625 21.515625 58.121094 42.273437 63.671875 20.0625 5.359375 46.699219-34.050781 68.449219-34.050781s48.386719 39.410156 68.449219 34.050781c20.757812-5.550781 24.101562-53.15625 42.277343-63.671875 18.433594-10.667969 61.304688 10.125 76.265626-4.835937 14.960937-14.960938-5.828126-57.832032 4.835937-76.269532 10.515625-18.171875 58.121094-21.515625 63.671875-42.273437 5.359375-20.0625-34.050781-46.699219-34.050781-68.449219zm0 0" fill="#ffee8c"/><path d="m426.957031 256c0 86.347656-64.019531 157.746094-147.191406 169.3125-7.765625 1.089844-15.695313 1.640625-23.761719 1.640625-94.417968 0-170.96875-76.539063-170.96875-170.953125 0-94.417969 76.550782-170.957031 170.96875-170.957031 8.066406 0 15.996094.554687 23.761719 1.640625 83.171875 11.566406 147.191406 82.964844 147.191406 169.316406zm0 0" fill="#f28f44"/><path d="m426.957031 256c0 86.347656-64.019531 157.746094-147.191406 169.3125-83.175781-11.566406-147.195313-82.964844-147.195313-169.3125 0-86.351562 64.019532-157.75 147.195313-169.316406 83.171875 11.566406 147.191406 82.964844 147.191406 169.316406zm0 0" fill="#ffd073"/><g fill="#cc9236"><path d="m155.875 229.488281c-2.003906 0-4.011719-.765625-5.539062-2.296875-3.0625-3.0625-3.0625-8.023437 0-11.082031 17.53125-17.53125 46.054687-17.53125 63.582031 0 3.0625 3.058594 3.0625 8.019531 0 11.082031-3.058594 3.058594-8.019531 3.058594-11.082031 0-11.417969-11.421875-29.996094-11.421875-41.417969 0-1.53125 1.53125-3.535157 2.296875-5.542969 2.296875zm0 0"/><path d="m356.125 229.488281c-2.007812 0-4.011719-.765625-5.542969-2.296875-11.417969-11.421875-30-11.417968-41.417969 0-3.0625 3.058594-8.023437 3.058594-11.082031 0-3.0625-3.0625-3.0625-8.023437 0-11.082031 17.527344-17.53125 46.054688-17.53125 63.585938 0 3.058593 3.058594 3.058593 8.023437 0 11.082031-1.53125 1.53125-3.539063 2.296875-5.542969 2.296875zm0 0"/><path d="m256 310.582031c-17.015625 0-33.015625-6.628906-45.046875-18.660156-3.058594-3.0625-3.058594-8.023437 0-11.082031 3.0625-3.0625 8.023437-3.0625 11.082031 0 9.074219 9.070312 21.132813 14.066406 33.964844 14.066406s24.890625-4.996094 33.964844-14.066406c3.058594-3.0625 8.023437-3.0625 11.082031 0 3.058594 3.058594 3.058594 8.019531 0 11.082031-12.03125 12.03125-28.03125 18.660156-45.046875 18.660156zm0 0"/></g></svg>
				`@ -1 +0,0 @@`
				<svg height="512pt" viewBox="0 0 512 512.00001" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m509.53125 291.945312c-79.9375 79.933594-209.539062 79.933594-289.472656 0-79.9375-79.9375-79.9375-209.539062 0-289.476562.835937-.835938 1.683594-1.648438 2.53125-2.46875-53.863282 7.269531-105.867188 31.585938-147.265625 72.984375-100.429688 100.429687-100.429688 263.261719 0 363.691406 100.429687 100.429688 263.261719 100.429688 363.691406 0 41.398437-41.398437 65.714844-93.402343 72.984375-147.265625-.820312.847656-1.632812 1.695313-2.46875 2.535156zm0 0" fill="#ffd073"/><path d="m368.015625 486.964844c-95.585937 45.640625-213.523437 28.875-292.691406-50.289063-100.433594-100.433593-100.433594-263.257812 0-363.691406 38.574219-38.574219 86.367187-62.328125 136.277343-71.25-25.664062 12.238281-49.722656 29.003906-70.976562 50.257813-100.433594 100.433593-100.433594 263.257812 0 363.691406 61.847656 61.84375 147.363281 85.609375 227.390625 71.28125zm0 0" fill="#f28f44"/><path d="m355.84375 117.804688 28.492188-5.566407c12.484374-2.441406 12.484374-20.300781 0-22.738281l-28.492188-5.570312c-16.21875-3.167969-28.898438-15.847657-32.066406-32.066407l-5.570313-28.492187c-2.4375-12.484375-20.300781-12.484375-22.738281 0l-5.570312 28.492187c-3.167969 16.21875-15.847657 28.898438-32.0625 32.066407l-28.496094 5.570312c-12.484375 2.4375-12.484375 20.296875 0 22.738281l28.496094 5.566407c16.214843 3.167968 28.894531 15.847656 32.0625 32.066406l5.570312 28.496094c2.4375 12.484374 20.300781 12.484374 22.738281 0l5.570313-28.496094c3.167968-16.214844 15.847656-28.898438 32.066406-32.066406zm0 0" fill="#ffee8c"/><path d="m424.875 251.722656 18.40625-3.597656c8.066406-1.574219 8.066406-13.113281 0-14.6875l-18.40625-3.597656c-10.476562-2.046875-18.667969-10.238282-20.714844-20.714844l-3.597656-18.40625c-1.574219-8.066406-13.113281-8.066406-14.6875 0l-3.597656 18.40625c-2.046875 10.476562-10.238282 18.667969-20.714844 20.714844l-18.40625 3.597656c-8.066406 1.574219-8.066406 13.113281 0 14.6875l18.40625 3.597656c10.476562 2.046875 18.667969 10.238282 20.714844 20.714844l3.597656 18.40625c1.574219 8.066406 13.113281 8.066406 14.6875 0l3.597656-18.40625c2.046875-10.476562 10.238282-18.664062 20.714844-20.714844zm0 0" fill="#ffee8c"/><g fill="#cc9236"><path d="m80.242188 257.46875c-3.292969 0-6.363282-2.078125-7.464844-5.375l-2.980469-8.90625c-1.378906-4.121094.84375-8.582031 4.964844-9.964844 4.125-1.378906 8.585937.84375 9.964843 4.96875l2.980469 8.90625c1.378907 4.121094-.84375 8.582032-4.964843 9.964844-.828126.277344-1.671876.40625-2.5.40625zm0 0"/><path d="m123.632812 242.949219c-3.292968 0-6.363281-2.082031-7.464843-5.378907l-2.980469-8.90625c-1.378906-4.121093.84375-8.582031 4.964844-9.964843 4.125-1.378907 8.585937.847656 9.964844 4.96875l2.980468 8.90625c1.378906 4.121093-.84375 8.582031-4.964844 9.964843-.828124.277344-1.671874.410157-2.5.410157zm0 0"/><path d="m105.152344 300.09375c-9.335938 0-18.613282-2.167969-27.214844-6.453125-3.890625-1.9375-5.472656-6.664063-3.535156-10.558594 1.941406-3.890625 6.667968-5.472656 10.558594-3.53125 22.402343 11.164063 49.707031 2.023438 60.875-20.375 1.9375-3.894531 6.667968-5.476562 10.554687-3.535156 3.894531 1.9375 5.476563 6.664063 3.535156 10.558594-7.285156 14.613281-19.824219 25.515625-35.308593 30.699219-6.375 2.132812-12.933594 3.195312-19.464844 3.195312zm0 0"/></g></svg>
				`@ -1 +0,0 @@`
				<svg height="512pt" viewBox="0 -10 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m483.324219 151.332031c-36.757813 36.757813-96.347657 36.757813-133.105469 0-36.757812-36.757812-36.757812-96.347656 0-133.105469.382812-.382812.773438-.757812 1.164062-1.132812-24.765624 3.339844-48.679687 14.519531-67.714843 33.558594-46.179688 46.179687-46.179688 121.050781 0 167.230468 46.179687 46.179688 121.050781 46.179688 167.230469 0 19.039062-19.035156 30.21875-42.949218 33.5625-67.714843-.378907.390625-.753907.78125-1.136719 1.164062zm0 0" fill="#ffd073"/><path d="m418.253906 241.007812c-43.953125 20.984376-98.183594 13.277344-134.585937-23.125-46.179688-46.183593-46.179688-121.050781 0-167.230468 17.738281-17.738282 39.714843-28.660156 62.664062-32.761719-11.800781 5.625-22.863281 13.335937-32.636719 23.109375-46.179687 46.179688-46.179687 121.046875 0 167.230469 28.4375 28.4375 67.757813 39.363281 104.558594 32.777343zm0 0" fill="#f28f44"/><path d="m119.625 66.523438 18.261719-3.566407c8-1.5625 8-13.011719 0-14.574219l-18.261719-3.570312c-10.394531-2.03125-18.519531-10.15625-20.550781-20.550781l-3.566407-18.261719c-1.5625-8-13.011718-8-14.574218 0l-3.570313 18.261719c-2.03125 10.394531-10.15625 18.519531-20.550781 20.550781l-18.261719 3.570312c-8 1.5625-8 13.007813 0 14.574219l18.261719 3.566407c10.394531 2.03125 18.519531 10.160156 20.550781 20.550781l3.570313 18.261719c1.5625 8.003906 13.011718 8.003906 14.574218 0l3.570313-18.261719c2.027344-10.390625 10.152344-18.519531 20.546875-20.550781zm0 0" fill="#ffee8c"/><path d="m408.09375 304.191406c0 37.882813-30.710938 68.59375-68.609375 68.59375h-248.265625c-50.371094 0-91.21875-40.832031-91.21875-91.21875 0-50.375 40.847656-91.21875 91.21875-91.21875 4.519531 0 8.964844.347656 13.316406.976563 20.601563-40.910157 62.964844-68.980469 111.910156-68.980469 59.222657 0 108.835938 41.117188 121.867188 96.355469 1.300781 5.511719 2.238281 11.164062 2.78125 16.921875v.011718c37.136719.851563 67 31.214844 67 68.558594zm0 0" fill="#84abc1"/><path d="m259.96875 130.125c-13.558594-5.035156-28.226562-7.777344-43.523438-7.777344-48.945312 0-91.296874 28.070313-111.910156 68.96875v.011719c-4.355468-.632813-8.796875-.980469-13.316406-.980469-50.386719.003906-91.21875 40.847656-91.21875 91.222656 0 50.386719 40.832031 91.21875 91.21875 91.21875h44.089844c-45.402344 0-82.191406-36.800781-82.191406-82.191406 0-40.277344 28.972656-73.796875 67.230468-80.828125 3.785156-.707031 7.660156-1.144531 11.613282-1.300781 1.105468-.039062 2.226562-.066406 3.347656-.066406 14.757812 0 28.613281 3.890625 40.574218 10.714844-1.660156-11.578126-13.632812-22.425782-31.28125-31.167969 9.691407-32.777344 42.675782-63.175781 115.367188-57.824219zm0 0" fill="#4d87a1"/><path d="m512 436.441406c0 30.636719-24.835938 55.472656-55.484375 55.472656h-200.785156c-40.738281 0-73.769531-33.019531-73.769531-73.769531 0-40.742187 33.03125-73.773437 73.769531-73.773437 3.65625 0 7.25.28125 10.769531.789062 16.664062-33.082031 50.925781-55.785156 90.507812-55.785156 47.894532 0 88.019532 33.25 98.558594 77.925781 1.050782 4.457031 1.8125 9.03125 2.25 13.683594v.011719c30.035156.6875 54.183594 25.242187 54.183594 55.445312zm0 0" fill="#d3ddea"/><path d="m392.207031 295.667969c-10.964843-4.074219-22.828125-6.289063-35.199219-6.289063-39.582031 0-73.835937 22.699219-90.507812 55.777344v.007812c-3.519531-.507812-7.113281-.789062-10.769531-.789062-40.75 0-73.769531 33.03125-73.769531 73.769531 0 40.75 33.019531 73.773438 73.769531 73.773438h35.660156c-36.71875 0-66.472656-29.761719-66.472656-66.472657 0-32.574218 23.429687-59.679687 54.371093-65.367187 3.0625-.574219 6.195313-.925781 9.394532-1.050781.894531-.03125 1.800781-.054688 2.707031-.054688 11.933594 0 23.140625 3.144532 32.8125 8.664063-1.34375-9.363281-11.023437-18.136719-25.300781-25.207031 7.839844-26.507813 34.515625-51.089844 93.304687-46.761719zm0 0" fill="#84abc1"/></svg>
				`@ -1 +0,0 @@`
				<svg height="512pt" viewBox="0 -99 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m512 228.148438c0 47.527343-38.53125 86.058593-86.078125 86.058593h-311.476563c-63.199218 0-114.44140575-51.226562-114.44140575-114.445312 0-63.199219 51.24218775-114.445313 114.44140575-114.445313 5.671876 0 11.246094.4375 16.707032 1.226563 25.847656-51.324219 79-86.542969 140.40625-86.542969 74.296875 0 136.546875 51.585938 152.894531 120.890625 1.632813 6.914063 2.8125 14.007813 3.492187 21.230469v.015625c46.589844 1.066406 84.054688 39.160156 84.054688 86.011719zm0 0" fill="#d3ddea"/><path d="m326.164062 9.765625c-17.011718-6.316406-35.414062-9.7578125-54.605468-9.7578125-61.40625 0-114.542969 35.2187495-140.410156 86.5273435v.015625c-5.457032-.792969-11.03125-1.226562-16.703126-1.226562-63.214843 0-114.445312 51.246093-114.445312 114.445312 0 63.214844 51.230469 114.445313 114.445312 114.445313h55.316407c-56.964844 0-103.121094-46.171875-103.121094-103.121094 0-50.535156 36.351563-92.585938 84.347656-101.40625 4.75-.886719 9.613281-1.4375 14.570313-1.632812 1.390625-.046876 2.796875-.082032 4.203125-.082032 18.511719 0 35.894531 4.878906 50.90625 13.445313-2.085938-14.53125-17.105469-28.140625-39.25-39.105469 12.160156-41.125 53.542969-79.265625 144.746093-72.546875zm0 0" fill="#84abc1"/></svg>
				`@ -1 +0,0 @@`
				<svg height="512pt" viewBox="0 -71 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg"><path d="m408.09375 181.847656c0 37.882813-30.710938 68.59375-68.609375 68.59375h-248.265625c-50.371094 0-91.21875-40.832031-91.21875-91.21875 0-50.375 40.847656-91.21875 91.21875-91.21875 4.519531 0 8.964844.347656 13.316406.976563 20.601563-40.910157 62.964844-68.980469 111.910156-68.980469 59.222657 0 108.835938 41.117188 121.867188 96.355469 1.300781 5.511719 2.238281 11.164062 2.78125 16.921875v.011718c37.136719.851563 67 31.214844 67 68.558594zm0 0" fill="#84abc1"/><path d="m259.96875 7.78125c-13.558594-5.035156-28.226562-7.77734375-43.523438-7.77734375-48.945312 0-91.296874 28.07421875-111.910156 68.96874975v.011719c-4.355468-.628906-8.796875-.976563-13.316406-.976563-50.386719 0-91.21875 40.84375-91.21875 91.21875 0 50.386719 40.832031 91.21875 91.21875 91.21875h44.089844c-45.402344 0-82.191406-36.800781-82.191406-82.191406 0-40.28125 28.972656-73.796875 67.230468-80.828125 3.785156-.707031 7.660156-1.144531 11.613282-1.300781 1.105468-.039062 2.226562-.066406 3.347656-.066406 14.757812 0 28.613281 3.890625 40.574218 10.714844-1.660156-11.578126-13.632812-22.425782-31.28125-31.167969 9.691407-32.777344 42.675782-63.175781 115.367188-57.824219zm0 0" fill="#4d87a1"/><path d="m264.3125 245.925781c.496094.085938.789062.085938.835938.085938h-3.796876c.992188 0 1.976563-.03125 2.960938-.085938zm0 0" fill="#84abc1"/><path d="m512 314.097656c0 30.636719-24.835938 55.476563-55.484375 55.476563h-200.785156c-40.738281 0-73.769531-33.023438-73.769531-73.773438 0-40.738281 33.03125-73.773437 73.769531-73.773437 3.65625 0 7.25.28125 10.769531.792968 16.664062-33.085937 50.925781-55.789062 90.507812-55.789062 47.894532 0 88.019532 33.25 98.558594 77.929688 1.050782 4.457031 1.8125 9.027343 2.25 13.683593v.007813c30.035156.6875 54.183594 25.246094 54.183594 55.445312zm0 0" fill="#d3ddea"/><path d="m392.207031 173.324219c-10.964843-4.070313-22.828125-6.289063-35.199219-6.289063-39.582031 0-73.835937 22.703125-90.507812 55.777344v.007812c-3.519531-.507812-7.113281-.789062-10.769531-.789062-40.75 0-73.769531 33.03125-73.769531 73.773438 0 40.75 33.019531 73.769531 73.769531 73.769531h35.660156c-36.71875 0-66.472656-29.761719-66.472656-66.46875 0-32.578125 23.429687-59.683594 54.371093-65.371094 3.0625-.570313 6.195313-.925781 9.394532-1.050781.894531-.03125 1.800781-.050782 2.707031-.050782 11.933594 0 23.140625 3.144532 32.8125 8.664063-1.34375-9.367187-11.023437-18.140625-25.300781-25.210937 7.839844-26.507813 34.515625-51.089844 93.304687-46.761719zm0 0" fill="#84abc1"/></svg>