website done

package.json

@@ -21,6 +21,7 @@
     "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
     "recoil": "^0.7.7"
   },
   "devDependencies": {

src/App.tsx

@@ -1,11 +1,77 @@
+import { Box, Center, Heading, Image, Link, Text, Flex, IconButton  } from '@chakra-ui/react';
+import { useEffect } from 'react';
+import { useRecoilState } from 'recoil';
+import { FaGithub } from "react-icons/fa";
+import { platformLatestData } from './states';
+import { getLatestVersionDataFOrThisPlatform } from './libs/helper';
+import DownloadButton from './components/DownloadButton';
+
 function App() {
+  const [platformLatestDataInfo, setPlatformLatestData] = useRecoilState(platformLatestData);
+
+  useEffect(() => {
+    if(platformLatestDataInfo) return;
+    getLatestVersionDataFOrThisPlatform().then((data) => {
+      setPlatformLatestData(data);
+    })
+  }, [platformLatestDataInfo])
 
   return (
     <div className="">
-      <h1>Google Task Desktop Client </h1>
-      <p>
-        Download Latest Version from
-      </p>
+      <Box w="100%" p={2} h="10vh">
+        <Flex>
+          <Box flexBasis='70%'>
+          </Box>
+          <Box flexBasis='30%' p={2} h="100%">
+            <Center w='100%' h="100%">
+              <Link href="https://github.com/codad5/google-task-tauri" isExternal>
+                <IconButton
+                  variant='outline'
+                  colorScheme='teal'
+                  aria-label='Send email'
+                  icon={<FaGithub />}
+                  />
+              </Link>
+            </Center>
+          </Box>
+        </Flex>
+      </Box>
+      <Box w="100%" p={0} h="90vh" pt="10vh">
+        <Box w="100%" p={0} h="40vh">
+            <Box w="100%" p={0} >
+              <Center w='100%' h="100%">
+                <Heading as="h5">Google Task Desktop Client</Heading>
+              </Center>
+            </Box>
+          <Box w="100%" p={2}>
+            <Center>
+              <Image src="/icon.png" alt="Google Task Desktop Client" width="100px" height="100px" borderRadius="full" />
+            </Center>  
+          </Box>
+          <Box w="100%" p={0} >
+            <Center w='100%' h="100%">
+              <Text>
+                This is an Unofficial Google Task Desktop Client. It is not affiliated with Google. It is built with <Link href="https://tauri.app/" isExternal>Tauri</Link> and <Link href="https://reactjs.org/" isExternal>React</Link>.
+              </Text>
+            </Center>
+          </Box>
+          <Box w="100%" p={5} >
+            <Center w='100%' h="100%">
+              <DownloadButton />
+            </Center>
+          </Box>
+        </Box>
+        <Box w="100%" p={0} h="20vh">
+          <Center w='100%' h="100%">
+            <Text>
+              Google Task Desktop Client By&nbsp;
+              <Link href="https://github.com/codad5" isExternal>
+                  @codad5
+              </Link>
+            </Text>
+          </Center>
+        </Box>
+      </Box>
     </div>
   );
 }

src/components/DownloadButton.tsx

@@ -0,0 +1,42 @@
+import { Button , Text, Link, Spinner} from '@chakra-ui/react';
+import { Icon } from '@chakra-ui/icons';
+import {useRecoilValue} from 'recoil';
+import { platformLatestDataSelector } from '../states';
+import { getOperationSystem } from '../libs/helper';
+import { FaWindows , FaApple , FaLinux, FaDownload  } from "react-icons/fa";
+import { OperationSystem } from '../types';
+
+
+
+export function getPlaformIconUrl(platform?: OperationSystem) {
+    const operationSystem = platform ?? getOperationSystem();
+    switch (operationSystem) {
+        case "windows":
+            return FaWindows ;
+        case "mac":
+            return FaApple ;
+        case "linux":
+            return FaLinux ;
+        default:
+            return FaDownload ;
+    }
+}
+
+export default function DownloadButton() {
+    const platformLatestDataInfo = useRecoilValue(platformLatestDataSelector);
+    return (
+        <Link href={platformLatestDataInfo?.url} download>
+            <Button rightIcon={platformLatestDataInfo ? <Icon as={getPlaformIconUrl()} /> : <Spinner />} colorScheme='teal' variant='solid' size='lg' >
+                {
+                    !platformLatestDataInfo ? 'Loading...' : (
+                        <>
+                            <Text>
+                                Download {platformLatestDataInfo?.version}
+                            </Text>
+                        </>
+                    )
+                }
+            </Button>
+        </Link>
+    );
+}

src/libs/helper.ts

@@ -0,0 +1,69 @@
+import type { OperationSystem, PlatformData, githubLatestReleaseData } from "../types";
+
+
+const API_URL = "https://api.github.com/repos/codad5/google-task-tauri/releases/latest";
+
+
+const OsToPlatform : Record<OperationSystem, string[]> = {
+    "windows": ["exe"],
+    "mac": ["dmg"],
+    "linux": ["AppImage", "deb"],
+    "other": [],
+    "darwin": ["dmg"],
+};
+
+
+
+
+export function getOperationSystem() : OperationSystem {
+    // get operation system from user agent
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.indexOf("win32") >= 0 || userAgent.indexOf("wow32") >= 0) {
+        return "windows";
+    }
+    if (userAgent.indexOf("win64") >= 0 || userAgent.indexOf("wow64") >= 0) {
+        return "windows";
+    }
+    if (userAgent.indexOf("mac") >= 0) {
+        return "mac";
+    }
+    if (userAgent.indexOf("linux") >= 0) {
+        return "linux";
+    }
+    return "other";
+}
+
+export async function getLatestJson(): Promise<githubLatestReleaseData|null> {
+    const latestJson = localStorage.getItem("latestJson");
+    if (latestJson) return JSON.parse(latestJson);
+    return fetch(API_URL).then((response) => {
+        localStorage.setItem("latestJson", JSON.stringify(response.json()));
+        // check response status
+        if (response.status !== 200) return null;
+        return response.json()
+    });
+}
+
+
+export async function getLatestVersionData(operationSystem: OperationSystem) : Promise<PlatformData|null> {
+    const latestJson = await getLatestJson();
+    if (!latestJson || !latestJson.assets) return null;
+    console.log(latestJson);
+    const version = latestJson.tag;
+    const date = latestJson.published_at;
+    const osPlatform = OsToPlatform[operationSystem];
+    const data = latestJson.assets.find((asset) => {
+        return osPlatform.includes(asset.name.split(".").pop() ?? "");
+    }) 
+    return data ? {
+        platform: operationSystem,
+        url: data.browser_download_url,
+        version,
+        date,
+    } : null;
+}
+
+export async function getLatestVersionDataFOrThisPlatform() : Promise<PlatformData|null> {
+    return await getLatestVersionData(getOperationSystem());
+}
+

src/states.ts

@@ -0,0 +1,24 @@
+import { atom, selector } from 'recoil';
+import { PlatformData } from './types';
+
+export const platformLatestData = atom<PlatformData | null>({
+    key: 'platformLatestData',
+    default: null,
+});
+
+
+export const platformLatestDataSelector = selector<PlatformData | null>({
+    key: 'platformLatestDataSelector',
+    get: ({ get }) => {
+        const platformData = get(platformLatestData);
+        return platformData;
+    },
+});
+
+export const lastestVersion = selector<string | null>({
+    key: 'lastestVersionSelector',
+    get: ({ get }) => {
+        const platformData = get(platformLatestData);
+        return platformData?.version ?? null;
+    },
+});

src/types.ts

@@ -0,0 +1,28 @@
+export type OperationSystem = "windows" | "mac" | "linux" | "other" | "darwin"  
+
+export type PlatformData = {
+    platform: string;
+    url: string;
+    version: string;
+    date: string;
+
+};
+
+export type githubPlaformData = {
+    url: string;
+    name: string;
+    browser_download_url: string;
+    download_count: number;
+    size: number;
+};
+
+export type githubPlaformsData =  githubPlaformData[]
+
+export type githubLatestReleaseData = {
+    name: string;
+    published_at: string;
+    body: string;
+    assets: githubPlaformsData;
+    tag: string;
+    draft: boolean;
+};