diff --git a/app/page.tsx b/app/page.tsx index e28609f..3e13543 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -3,20 +3,25 @@ import Projects from '@/components/projects'; import Works from '@/components/works'; import Blogs from '@/components/blogs'; import Songs from '@/components/songs'; +import DiscordStatus from '@/components/discord-status'; import { Suspense } from 'react'; import { LuLoader } from 'react-icons/lu'; export default function Page() { return (
-
-

- Gökhan Bulut -

+
+
+

+ Gökhan Bulut +

+ + + Full-stack Developer + +
- - Full-stack Developer - +
diff --git a/components/discord-status.tsx b/components/discord-status.tsx new file mode 100644 index 0000000..40546dd --- /dev/null +++ b/components/discord-status.tsx @@ -0,0 +1,58 @@ +'use client'; + +import cn from '@/utils/cn'; +import { useEffect, useState } from 'react'; +import Tooltip from '@/components/tooltip'; +import Link from 'next/link'; + +type DiscordStatusProps = { + userId: string; +} + +export default function DiscordStatus({ userId }: DiscordStatusProps) { + type Status = 'online' | 'offline' | 'loading' | 'error'; + + const [status, setStatus] = useState('loading'); + + useEffect(() => { + async function getStatus() { + try { + const response = await fetch(`https://lantern.rest/api/v1/users/${userId}`); + if (!response.ok) throw new Error('Failed to fetch status'); + + const data = await response.json(); + + setStatus(data.status === 'offline' ? 'offline' : 'online'); + } catch (error) { + console.error(`Something went wrong: ${error}`); + setStatus('error'); + } + } + + getStatus(); + }, [userId]); + + return ( + + +
span]:bg-quaternary', + status === 'online' && 'bg-green-500 [&>span]:bg-green-500' + )} + > + +
+ + {status === 'loading' || status === 'error' || status === 'offline' ? 'Offline' : 'Online'} + +
+ ); +} \ No newline at end of file