initial

vladkens · Jan 22, 2024 · bb53330 · bb53330
commit bb53330
Show file tree

Hide file tree

Showing 23 changed files with 1,779 additions and 0 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,29 @@
+name: ci
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+
+      - name: Deploy to GH Pages 🚀
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: dist
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+bundlemeta.json
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+!.vscode/settings.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,10 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "semi": false,
+  "trailingComma": "all",
+  "jsxSingleQuote": false,
+  "arrowParens": "always",
+  "plugins": ["prettier-plugin-organize-imports", "prettier-plugin-tailwindcss"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "search.exclude": {},
+  "files.exclude": {
+    "bundlemeta.json": true,
+    "dist": true
+  }
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 vladkens
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
+    <link
+      rel="icon"
+      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⏰</text></svg>"
+    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>w-time</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "time24",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.1.1",
+    "@vvo/tzdb": "^6.125.0",
+    "countries-and-timezones": "^3.6.0",
+    "fuse.js": "^7.0.0",
+    "jotai": "^2.6.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.0",
+    "timezones.json": "^1.7.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "autoprefixer": "^10.4.17",
+    "postcss": "^8.4.33",
+    "prettier": "^3.2.4",
+    "prettier-plugin-organize-imports": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.1",
+    "tw-colors": "^3.3.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.8",
+    "vite-plugin-bundlesize": "^0.0.7"
+  }
+}
diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require("postcss-import"), require("tailwindcss"), require("autoprefixer")],
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1 @@
+Allow: *
diff --git a/src/app.tsx b/src/app.tsx
@@ -0,0 +1,33 @@
+import { Provider, useAtom } from "jotai"
+import { FC } from "react"
+import { SelectPlace } from "./components/SelectPlace"
+import { Timeline } from "./components/Timeline"
+import { TzListState } from "./state"
+import { getPlaceByTzName } from "./utils/places"
+
+const Index: FC = () => {
+  const [tzs, setTzs] = useAtom(TzListState)
+  const places = tzs.map((tz) => getPlaceByTzName(tz))
+
+  return (
+    <div className="flex flex-col gap-2.5 py-2.5">
+      <SelectPlace values={places} onChange={(place) => setTzs((old) => [...old, place.tzName])} />
+
+      <div className="flex flex-col gap-2">
+        {places.map((x, idx) => (
+          <Timeline key={`${idx}-${x.tzAbbr}`} place={x} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export const App: FC = () => {
+  return (
+    <Provider>
+      <div className="mx-auto w-[1020px]">
+        <Index />
+      </div>
+    </Provider>
+  )
+}
diff --git a/src/components/SelectPlace.tsx b/src/components/SelectPlace.tsx
@@ -0,0 +1,51 @@
+import { TimeZone, getTimeZones } from "@vvo/tzdb"
+import Fuse from "fuse.js"
+import { FC, useState } from "react"
+import { Place, tzToPlace } from "../utils/places"
+
+type SelectPlaceProps = {
+  values: Place[]
+  onChange: (place: Place) => void
+}
+
+export const SelectPlace: FC<SelectPlaceProps> = ({ values, onChange }) => {
+  const [value, setValue] = useState("")
+
+  const timezones = getTimeZones()
+  const fuse = new Fuse(timezones, { threshold: 0.1, keys: ["name", "mainCities", "countryName"] })
+
+  const options = (value.length > 0 ? fuse.search(value).map((x) => x.item) : [])
+    .filter((x) => !values.find((y) => y.tzName === x.name))
+    .slice(0, 5)
+
+  const handleSelect = (tz: TimeZone) => {
+    onChange(tzToPlace(tz))
+    setValue("")
+  }
+
+  return (
+    <div className="relative">
+      <div className="relative">
+        <input
+          type="text"
+          placeholder="Place or timezone"
+          value={value}
+          onChange={(e) => setValue(e.target?.value ?? "")}
+          className="h-[32px] rounded border px-1.5"
+        />
+        {/* <button className="absolute right-[20px] text-[20px] font-bold">&times;</button> */}
+      </div>
+      <div className="absolute mt-0.5 rounded-md border bg-white leading-none">
+        {options.map((x, idx) => (
+          <button
+            key={`${idx}-${x.abbreviation}`}
+            onClick={() => handleSelect(x)}
+            className="flex h-[24px] w-full flex-row items-center justify-between gap-2.5 px-1.5 py-1 hover:bg-gray-100"
+          >
+            {x.countryName}, {x.mainCities[0]} <span className="text-xs">({x.abbreviation})</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -0,0 +1,110 @@
+import { useSetAtom } from "jotai"
+import { FC, useEffect, useReducer } from "react"
+import { twJoin } from "tailwind-merge"
+import { TzHomeState, TzListState, useGetHomePlace } from "../state"
+import { Place } from "../utils/places"
+
+const withSign = (x: number) => {
+  return x > 0 ? `+${x}` : `${x}`
+}
+
+const getTimeline = (refPlace: Place, place: Place) => {
+  const dt = (new Date().getTimezoneOffset() - refPlace.tzOffset + place.tzOffset) * 60 * 1000
+  const ts = new Date().setUTCHours(0, 0, 0, 0) + dt
+
+  const items = []
+  for (let i = 0; i < 24; ++i) {
+    const ct = new Date(ts + i * 60 * 60 * 1000)
+    const hh = ct.getHours()
+    items.push({ hour: hh.toString(), isDayStart: hh === 0, isDayEnd: hh === 23 })
+  }
+
+  return items
+}
+
+const useGetTime = (tz: string) => {
+  const [_, tick] = useReducer((x) => x + 1, 0)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      tick()
+    }, 500)
+
+    return () => clearInterval(interval)
+  }, [tz])
+
+  const time = new Date()
+
+  return { time: time.toISOString().split("T")[1].split(".")[0] }
+}
+
+const TzInfo: FC<{ place: Place }> = ({ place }) => {
+  const obj = useGetTime(place.tzName)
+
+  return (
+    <div className="flex grow flex-col">
+      <div className="flex items-center justify-between text-[15px] font-medium">
+        <div>{place.city}</div>
+        <div className="font-mono text-sm">{obj.time}</div>
+      </div>
+      <div className="flex items-center justify-between text-[12px] text-gray-600">
+        <div>{place.country}</div>
+        <div>{""}</div>
+      </div>
+    </div>
+  )
+}
+
+export const Timeline: FC<{ place: Place }> = ({ place }) => {
+  const setTzList = useSetAtom(TzListState)
+  const setTzHome = useSetAtom(TzHomeState)
+  const refPlace = useGetHomePlace()
+  const hours = getTimeline(refPlace, place)
+
+  const isHome = place.tzName === refPlace.tzName
+
+  return (
+    <div className="flex grow items-center justify-between leading-none">
+      <div className="group flex grow flex-row items-center gap-1.5 px-1.5">
+        <button
+          onClick={() => setTzList((old) => old.filter((x) => x !== place.tzName))}
+          className={twJoin(
+            "h-[24px] w-[24px] font-mono text-lg leading-none text-gray-400 hover:text-red-500",
+            "invisible group-hover:visible",
+            isHome && "!invisible",
+          )}
+        >
+          &times;
+        </button>
+
+        <button
+          className={twJoin(
+            "flex h-[32px] w-[32px] select-none items-center justify-center rounded-full border text-xs",
+            isHome && "border-orange-500",
+          )}
+          onClick={() => setTzHome(place.tzName)}
+        >
+          {isHome ? "><" : withSign((place.tzOffset - refPlace.tzOffset) / 60)}
+        </button>
+
+        <TzInfo place={place} />
+      </div>
+
+      <div className="flex shrink-0 select-none flex-row">
+        {hours.map((x, idx) => (
+          <div
+            key={idx}
+            className={twJoin(
+              "flex h-[32px] w-[32px] items-center justify-center",
+              "border-b border-t border-gray-300 hover:bg-gray-200",
+              x.isDayStart && "rounded-l border-l",
+              x.isDayEnd && "rounded-r border-r",
+            )}
+          >
+            {x.hour}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-gray-100;
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -0,0 +1,10 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { App } from "./app"
+import "./index.css"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/src/state.ts b/src/state.ts
@@ -0,0 +1,11 @@
+import { useAtomValue } from "jotai"
+import { atomWithStorageSync } from "./utils/atomWithStorageSync"
+import { getPlaceByTzName } from "./utils/places"
+
+export const TzListState = atomWithStorageSync<string[]>("tzList", [])
+export const TzHomeState = atomWithStorageSync("tzHome", "Europe/London")
+
+export const useGetHomePlace = () => {
+  const ref = useAtomValue(TzHomeState)
+  return getPlaceByTzName(ref)
+}