feat: lanyard status ping

dromzeh · Sep 16, 2024 · 82ff510 · 82ff510
1 parent 3bdf928
commit 82ff510
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/app/posts/[id]/page.tsx b/src/app/posts/[id]/page.tsx
@@ -49,7 +49,7 @@ async function PostPage({ params: { id } }: Props) {
     return (
         <div className="min-h-screen max-w-xl mx-auto flex items-center justify-center">
             <div className="py-24 px-6 text-sm">
-                <div className="flex flex-col space-y-6">
+                <div className="flex flex-col space-y-8">
                     <div className="flex flex-row space-x-2 items-center justify-between group">
                         <span className="text-neutral-500">
                             <Link

diff --git a/src/components/main/lanyard.tsx b/src/components/main/lanyard.tsx
@@ -57,8 +57,16 @@ export function LanyardProfile() {
                     alt="discord avatar"
                     width={64}
                     height={64}
-                    className="rounded-full"
+                    className="rounded-lg"
                 />
+                <span className="absolute bottom-0 right-0 translate-y-2 translate-x-2">
+                    <span
+                        className={`animate-ping absolute inline-flex size-4 rounded-full ${statusColorMap[status.discord_status]} opacity-75`}
+                    />
+                    <span
+                        className={`relative inline-flex rounded-full ${statusColorMap[status.discord_status]} size-4`}
+                    />
+                </span>
             </div>
             <div className="flex flex-col space-y-2">
                 <p className="text-foreground">