repository tab

package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-rpc",
-  "version": "v0.0.1",
+  "version": "v0.0.2",
   "description": "Discord Rich Presence extension for your adobe apps!",
   "main": "./client-src/src/index.js",
   "scripts": {

src/client-src/components/NavItem.jsx

@@ -1,13 +1,38 @@
-import React from "react"
-export default function NavItem({ href, icon, text, onClick, }) {
+/*
+ * File: NavItem.jsx
+ * Project: discord-rpc
+ * File Created: Sunday, 2nd July 2023 1:46:25 pm
+ * Author: Tee ([email protected])
+ * Github: https://github.com/teeteeteeteetee
+ * Discord: Tee#0001
+ *
+ * Last Modified: Saturday, 25th November 2023 2:43:30 pm
+ * Modified By: Tee ([email protected])
+ *
+ * Copyright (c) 2023 Tee, Demon Cat
+ */
+import React from "react";
+export default function NavItem({ href, icon, text, onClick, update = false }) {
     return (
-        <a href={href} onClick={onClick} className="grow mt-0 inline-block hover:brightness-75 hover:shadow-lg focus:brightness-75 focus:shadow-lg focus:outline-none focus:ring-0 active:brightness-50 active:shadow-lg transition duration-150 ease-in-out">
+        <a
+            href={href}
+            onClick={onClick}
+            className="grow mt-0 inline-block hover:brightness-75 hover:shadow-lg focus:brightness-75 focus:shadow-lg focus:outline-none focus:ring-0 active:brightness-50 active:shadow-lg transition duration-150 ease-in-out"
+        >
+
             <div className="flex-col text-center">
                 <div className="h-auto w-auto self-center">
+                    {update && (
+                        <span className="relative flex h-3 w-3 float-right">
+                            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
+                            <span className="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
+                        </span>
+                    )}
+
                     {icon}
                 </div>
                 <p className="text-gray-200 ml-2 mr-2">{text}</p>
             </div>
         </a>
-    )
-}
+    );
+}

src/client-src/components/Navigator.jsx

@@ -6,25 +6,38 @@
  * Github: https://github.com/lolitee
  * Discord: Tee#0001
  * 
- * Last Modified: Saturday, 25th November 2023 12:06:22 pm
+ * Last Modified: Saturday, 25th November 2023 1:52:40 pm
  * Modified By: Tee ([email protected])
  * 
  * Copyright (c) 2023 Tee, Stainless Love
  */
-import React from "react";
+import React, { useEffect, useState } from "react";
 import NavItem from "./NavItem";
 import { FaDiscord, FaCog, FaGithub } from 'react-icons/fa'
 import { VscDebugConsole } from 'react-icons/vsc'
+import property from "../../../package.json"
 import { openUrlInDefaultBrowser } from "..";
 export default function Navigator({setState}) {
 
+    const [update, setUpdate] = useState(false)
+
+    useEffect(() => {
+        fetch("https://api.github.com/repos/teeteeteeteetee/adobe-discord-rpc/releases/latest")
+        .then(response => response.json())
+        .then(latest => {
+            if(latest["tag_name"] != property.version){
+                setUpdate(true)
+            }
+        })
+    }, [])
+
     return (
         <nav className="flex items-center justify-between flex-wrap bg-secondary p-6">
             <div className="w-full flex items-center divide-x hover:bg-blend-lighten">
                 <NavItem onClick={() => setState("Preview")} href={"#"} text={"Preview"} icon={<FaDiscord className="text-gray-200 m-auto" />} />
                 <NavItem onClick={() => setState("Config")} href={"#"} text={"Config"} icon={<FaCog className="text-gray-200 m-auto" />} />
                 <NavItem onClick={() => setState("Debug")} href={"#"} text={"Debug"} icon={<VscDebugConsole className="text-gray-200 m-auto" />} />
-                <NavItem onClick={() => setState("Repository")} href={"#"} text={"Repository"} icon={<FaGithub className="text-gray-200 m-auto" />} />
+                <NavItem update={update} onClick={() => setState("Repository")} href={"#"} text={"Repository"} icon={<FaGithub className="text-gray-200 m-auto" />} />
             </div>
         </nav>
     );

src/client-src/index.js

@@ -6,7 +6,7 @@
  * Github: https://github.com/lolitee
  * Discord: Tee#0001
  * 
- * Last Modified: Saturday, 25th November 2023 12:58:36 pm
+ * Last Modified: Saturday, 25th November 2023 2:40:52 pm
  * Modified By: Tee ([email protected])
  * 
  * Copyright (c) 2023 Tee, Stainless Love

src/client-src/page/Repository.jsx

@@ -6,26 +6,55 @@
  * Github: https://github.com/teeteeteeteetee
  * Discord: Tee#0001
  * 
- * Last Modified: Saturday, 25th November 2023 1:12:55 pm
+ * Last Modified: Saturday, 25th November 2023 2:47:33 pm
  * Modified By: Tee ([email protected])
  * 
  * Copyright (c) 2023 Tee, Demon Cat
  */
 import React, { useEffect, useState } from 'react';
-export default function Repository(){
+import property from "../../../package.json"
+import { FaDiscord, FaGithub } from 'react-icons/fa'
+import { openURLInDefaultBrowser } from '..';
 
-    useEffect(() => {
+// TODO: Click to update
+
+
+export default function Repository() {
 
+    const [update, setUpdate] = useState(false)
+    const [latest, setLatest] = useState(property.version)
+
+    useEffect(() => {
+        fetch("https://api.github.com/repos/teeteeteeteetee/adobe-discord-rpc/releases/latest")
+            .then(response => response.json())
+            .then(latest => {
+                if (latest["tag_name"] != property.version) {
+                    setUpdate(true)
+                    setLatest(latest["tag_name"])
+                }
+            })
     }, [])
 
     return (
-        <div className='container mx-auto'>
-            <p>Repository: </p>
-            <p>Discord: </p>
-            <br/>
-            // TODO: Click to update
-            <p>Version: </p>
-            <p>Latest version: </p>
+        <div className='w-screen'>
+            <div className='flex flex-col h-max'>
+                <div className='flex items-center flex-col justify-center text-lg text-white gap-1 pt-4 mb-auto'>
+                    <FaGithub className='cursor-pointer' size={64} onClick={() => openURLInDefaultBrowser("https://github.com/teeteeteeteetee/adobe-discord-rpc")} />
+                    <FaDiscord className='cursor-pointer' size={64} onClick={() => openURLInDefaultBrowser("https://discord.com/invite/RGtxbuFtzb")} />
+                    <br />
+                    <p>Version: {property.version}</p>
+                    <p>Latest version: {latest}</p>
+                    <a className='text-sm text-gray-400 cursor-pointer inline-flex items-center hover:underline' onClick={() => openURLInDefaultBrowser(`https://github.com/teeteeteeteetee/adobe-discord-rpc/releases/tag/${latest}`)}>
+                        New version is ready!
+                        <svg className="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
+                            <path stroke="currentColor" strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" />
+                        </svg>
+                    </a>
+                </div>
+                <footer>
+                    <p className='text-xs text-gray-600 pl-2'>made by tee</p>
+                </footer>
+            </div>
         </div>
     )
 }

src/rpc_client-src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-rpc-client",
-  "version": "v0.0.1",
+  "version": "v0.0.2",
   "description": "Discord Rich Presence extension for your adobe apps!",
   "main": "index.js",
   "scripts": {