From 7b2381b3b2413a14fd184e25dcbf0382e5416cde Mon Sep 17 00:00:00 2001
From: Zai Santillan <zaisantillan14@gmail.com>
Date: Thu, 28 Mar 2024 20:51:38 +0800
Subject: [PATCH] feat(social-links): add badge shine

---
 src/components/social-links.tsx | 2 +-
 tailwind.config.ts              | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/social-links.tsx b/src/components/social-links.tsx
index c6e5bce..b5e677c 100644
--- a/src/components/social-links.tsx
+++ b/src/components/social-links.tsx
@@ -9,7 +9,7 @@ export default async function SocialLinks({ socials }: { socials: ConnectedAccou
       {socials.map(({ type, id, name, href }) => (
         <p
           key={id}
-          className='text-sm border font-light border-white/[0.2] cursor-pointer rounded-full mt-4 text-white px-2 py-0.5'
+          className='text-sm border font-light border-white/[0.2] cursor-pointer rounded-full mt-4 text-white px-2 py-0.5 animate-shine transition-colors bg-[linear-gradient(110deg,#000103,45%,#7877C640,55%,#000103)] bg-[length:200%_100%]'
         >
           <Link href={href}>{type === 'domain' ? name : type}</Link>
         </p>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f9f7221..7301375 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -10,6 +10,7 @@ const config: Config = {
     extend: {
       animation: {
         spotlight: 'spotlight 2s ease .75s 1 forwards',
+        shine: 'shine 2s linear infinite',
       },
       keyframes: {
         spotlight: {
@@ -22,6 +23,14 @@ const config: Config = {
             transform: 'translate(-50%,-40%) scale(1)',
           },
         },
+        shine: {
+          from: {
+            backgroundPosition: '0 0',
+          },
+          to: {
+            backgroundPosition: '-200% 0',
+          },
+        },
       },
     },
   },