From 6da0e6f415e863448cd36246eb16e1f09dcd8a79 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Fri, 4 Oct 2024 21:22:36 +0800
Subject: [PATCH] feat: add ping animation in website realtime visitor

---
 src/client/components/website/WebsiteOnlineCount.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/client/components/website/WebsiteOnlineCount.tsx b/src/client/components/website/WebsiteOnlineCount.tsx
index 54d481ba..23a178b1 100644
--- a/src/client/components/website/WebsiteOnlineCount.tsx
+++ b/src/client/components/website/WebsiteOnlineCount.tsx
@@ -17,7 +17,10 @@ export const WebsiteOnlineCount: React.FC<{
   if (typeof count === 'number' && count > 0) {
     return (
       <div className="flex items-center space-x-2">
-        <div className="h-2.5 w-2.5 flex-shrink-0 rounded-full bg-green-500" />
+        <div className='w-2.5" relative flex h-2.5'>
+          <div className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+          <div className="h-2.5 w-2.5 flex-shrink-0 rounded-full bg-green-500" />
+        </div>
         <span>
           {count} {t('current visitor')}
         </span>