diff --git a/package-lock.json b/package-lock.json index ab0e168..0bdb8b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,11 +1,11 @@ { - "name": "orgexplorer", + "name": "OrgExplorer", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "orgexplorer", + "name": "OrgExplorer", "version": "0.0.0", "dependencies": { "react": "^19.2.0", diff --git a/src/App.tsx b/src/App.tsx index 0a3deb1..6aea7e1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,16 @@ import './App.css' +import RateLimitIndicator from "./RateLimitIndicator"; function App() { return ( <>

Hello, OrgExplorer!

+ + + ) } -export default App +export default App \ No newline at end of file diff --git a/src/RateLimitIndicator.tsx b/src/RateLimitIndicator.tsx new file mode 100644 index 0000000..ac906f0 --- /dev/null +++ b/src/RateLimitIndicator.tsx @@ -0,0 +1,53 @@ +import { useEffect, useState } from "react"; + +interface RateLimitData { + limit: number; + remaining: number; + reset: number; +} + +export default function RateLimitIndicator() { + const [rateLimit, setRateLimit] = useState(null); + + useEffect(() => { + async function fetchRateLimit() { + try { + const response = await fetch("https://api.github.com/rate_limit"); + const data = await response.json(); + + setRateLimit({ + limit: data.rate.limit, + remaining: data.rate.remaining, + reset: data.rate.reset, + }); + } catch (error) { + console.error("Error fetching rate limit:", error); + } + } + + fetchRateLimit(); + }, []); + + if (!rateLimit) return

Loading API status...

; + + const resetTime = new Date(rateLimit.reset * 1000).toLocaleTimeString(); + + return ( +
+ GitHub API Status +

Remaining: {rateLimit.remaining} / {rateLimit.limit}

+

Reset: {resetTime}

+
+ ); +} \ No newline at end of file