chore: initial commit

ABGEO · Apr 7, 2022 · f1b02b2 · f1b02b2
commit f1b02b2
Show file tree

Hide file tree

Showing 17 changed files with 2,872 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,26 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react",
+    "@typescript-eslint"
+  ],
+  "rules": {
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 81,
+  "endOfLine": "lf"
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="shortcut icon" href="/public/favicon.ico" type="image/vnd.microsoft.icon" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/public/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/public/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/public/favicon-16x16.png">
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Omedia Salary Countdown</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "salary",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "dependencies": {
+    "@chakra-ui/react": "^1.8.7",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@fontsource/open-sans": "^4.5.8",
+    "@fontsource/poppins": "^4.5.5",
+    "@fontsource/raleway": "^4.5.5",
+    "date-fns": "^2.28.0",
+    "framer-motion": "^6",
+    "react": "^17.0.2",
+    "react-countdown": "^2.3.2",
+    "react-countdown-circle-timer": "^3.0.9",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "@vitejs/plugin-react": "^1.0.7",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "prettier": "^2.6.2",
+    "vite": "^2.9.0"
+  }
+}
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/App.jsx b/src/App.jsx
@@ -0,0 +1,73 @@
+import Layout from "./layout";
+import { Box, Center, Text, useTheme } from "@chakra-ui/react";
+import { CountdownCircleTimer } from "react-countdown-circle-timer";
+import { format } from "date-fns";
+import "@fontsource/poppins";
+import { DAY_SECONDS, getComponentData, getTimeDays } from "./lib";
+
+export default function App() {
+  const theme = useTheme();
+
+  const today = new Date();
+  let salaryDay = 15;
+  if (today.getDate() > 15 && today.getDate() <= 22) {
+    salaryDay = 22;
+  }
+
+  const { duration, nextSalary, remainingTime } = getComponentData(salaryDay);
+
+  if (remainingTime === 0) {
+    return (
+      <Layout>
+        <Center height="60vh" textAlign={"center"}>
+          <Text fontFamily={"poppins"} mt="12" fontSize={"4xl"} as="h1">
+            Today is a salary day! 🎉
+          </Text>
+        </Center>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <Center height="60vh">
+        <Box
+          bg="white"
+          boxShadow="2xl"
+          rounded="lg"
+          w="400"
+          h="400"
+          display={"flex"}
+          justifyContent={"center"}
+          alignItems={"center"}
+          p="4"
+        >
+          <CountdownCircleTimer
+            updateInterval={DAY_SECONDS}
+            isPlaying="true"
+            size="300"
+            strokeWidth="15"
+            colors={theme.colors.brand[100]}
+            duration={duration}
+            initialRemainingTime={remainingTime}
+          >
+            {({ elapsedTime, color }) => {
+              const days = getTimeDays(duration - elapsedTime);
+              return (
+                <Text fontFamily={"poppins"} fontSize={"4xl"} style={{ color }}>
+                  {days} day{days > 1 && "s"}
+                </Text>
+              );
+            }}
+          </CountdownCircleTimer>
+        </Box>
+      </Center>
+
+      <Center mt="5">
+        <Text fontSize={"2xl"}>
+          {format(nextSalary, "MMMM do yyyy")}
+        </Text>
+      </Center>
+    </Layout>
+  );
+}
diff --git a/src/layout/index.jsx b/src/layout/index.jsx
@@ -0,0 +1,26 @@
+import { Box, Center, Container, Heading, Link, Text } from "@chakra-ui/react";
+import React from "react";
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Center as="header" bg="brand.100" p="4" color="white">
+        <Heading as="h1" size="lg">Omedia Salary Countdown</Heading>
+      </Center>
+
+      <Box p="4" justifyContent="center" alignItems="center">
+        <Container>
+          {children}
+        </Container>
+      </Box>
+
+      <Box as="footer" py="10">
+        <Text pt="6" fontSize="sm" textAlign="center">
+          Create with ♥ By<Link href="https://abgeo.dev" isExternal>ABGEO</Link>
+        </Text>
+      </Box>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/lib/date.js b/src/lib/date.js
@@ -0,0 +1,54 @@
+const DAY_SECONDS = 86400;
+
+function fixSalaryDay(date) {
+  if (date.getDay() === 6) {
+    date.setDate(date.getDate() - 1);
+  } else if (date.getDay() === 0) {
+    date.setDate(date.getDate() - 2);
+  }
+}
+
+function getLastSalaryDate(salaryDay = 15) {
+  const date = new Date();
+
+  if (date.getDate() <= salaryDay) {
+    date.setMonth(date.getMonth() - 1);
+  }
+  date.setDate(salaryDay);
+  fixSalaryDay(date);
+
+  return date;
+}
+
+function getNextSalaryDate(salaryDay = 15) {
+  const date = new Date();
+
+  if (date.getDate() > salaryDay) {
+    date.setMonth(date.getMonth() + 1);
+  }
+  date.setDate(salaryDay);
+  fixSalaryDay(date);
+
+  return date;
+}
+
+function getComponentData(salaryDay = 15) {
+  const today = new Date();
+  const lastSalary = getLastSalaryDate(salaryDay);
+  const nextSalary = getNextSalaryDate(salaryDay);
+
+  const remainingTime = ((nextSalary.getTime() - today.getTime()) / 1000);
+  const duration = (nextSalary.getTime() - lastSalary.getTime()) / 1000;
+
+  return {
+    duration, remainingTime, nextSalary
+  };
+}
+
+const getTimeDays = (time) => (time / DAY_SECONDS) | 0;
+
+export {
+  DAY_SECONDS,
+  getComponentData,
+  getTimeDays
+};
diff --git a/src/lib/index.js b/src/lib/index.js
@@ -0,0 +1 @@
+export * from "./date";
diff --git a/src/main.jsx b/src/main.jsx
@@ -0,0 +1,14 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { ChakraProvider } from "@chakra-ui/react";
+import theme from "./theme";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <ChakraProvider theme={theme}>
+      <App />
+    </ChakraProvider>
+  </React.StrictMode>,
+  document.getElementById("root")
+);
diff --git a/src/theme/index.jsx b/src/theme/index.jsx
@@ -0,0 +1,16 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const theme = extendTheme({
+  fonts: {
+    heading: "Open Sans, sans-serif",
+    body: "Raleway, sans-serif",
+    poppins: "Poppins, sans-serif",
+  },
+  colors: {
+    brand: {
+      100: "#f5322d"
+    }
+  }
+});
+
+export default theme;
diff --git a/vite.config.js b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})