From c924fc5f6cf3615f1b9d511e1e7f3f4f910fbd56 Mon Sep 17 00:00:00 2001
From: shinya <kobayashi_shinya@outlook.com>
Date: Sat, 5 Jul 2025 01:47:44 +0800
Subject: [PATCH] feat: card hover style

---
 src/components/AggregateCard.tsx |  77 ++++++++++++++++++--
 src/components/DemoCard.tsx      | 119 ++++++++++++++++++++++++++-----
 src/components/VideoCard.tsx     |  78 +++++++++++++++++---
 3 files changed, 242 insertions(+), 32 deletions(-)

diff --git a/src/components/AggregateCard.tsx b/src/components/AggregateCard.tsx
index ca5730f..f9bb1c7 100644
--- a/src/components/AggregateCard.tsx
+++ b/src/components/AggregateCard.tsx
@@ -1,8 +1,10 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
 import { LinkIcon } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { ImagePlaceholder } from '@/components/ImagePlaceholder';
 
@@ -69,6 +71,55 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
   const [isLoaded, setIsLoaded] = useState(false);
   const router = useRouter();
 
+  // 视差位置偏移
+  const [parallax, setParallax] = useState({ x: 0, y: 0 });
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  // 图片视差效果
+  useEffect(() => {
+    let requestId: number | null = null;
+    let lastX = 0;
+    let lastY = 0;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!cardRef.current) return;
+
+      const rect = cardRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      if (Math.abs(x - lastX) > 5 || Math.abs(y - lastY) > 5) {
+        lastX = x;
+        lastY = y;
+
+        if (requestId) cancelAnimationFrame(requestId);
+        requestId = requestAnimationFrame(() => {
+          const xParallax = (x / rect.width - 0.5) * 10;
+          const yParallax = (y / rect.height - 0.5) * 10;
+          setParallax({ x: xParallax, y: yParallax });
+        });
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (requestId) cancelAnimationFrame(requestId);
+      setParallax({ x: 0, y: 0 });
+    };
+
+    if (cardRef.current) {
+      cardRef.current.addEventListener('mousemove', handleMouseMove);
+      cardRef.current.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return () => {
+      if (cardRef.current) {
+        cardRef.current.removeEventListener('mousemove', handleMouseMove);
+        cardRef.current.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      if (requestId) cancelAnimationFrame(requestId);
+    };
+  }, []);
+
   // 统计 items 中出现次数最多的（非 0） douban_id，用于跳转豆瓣页面
   const mostFrequentDoubanId = useMemo(() => {
     const countMap = new Map<number, number>();
@@ -124,7 +175,10 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
         year ? `&year=${encodeURIComponent(year)}` : ''
       }&type=${mostFrequentEpisodes > 1 ? 'tv' : 'movie'}`}
     >
-      <div className='group relative w-full rounded-lg bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out'>
+      <div
+        ref={cardRef}
+        className='group relative w-full rounded-lg overflow-hidden bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out'
+      >
         {/* 封面图片 2:3 */}
         <div className='relative aspect-[2/3] w-full overflow-hidden rounded-md group-hover:scale-[1.02] transition-all duration-400 cubic-bezier(0.4,0,0.2,1)'>
           {/* 图片占位符 - 骨架屏效果 */}
@@ -134,7 +188,7 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
             src={first.poster}
             alt={first.title}
             fill
-            className={`object-cover transition-transform duration-500 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110
+            className={`object-cover transition-all duration-700 cubic-bezier(0.34,1.56,0.64,1)
                       ${
                         isLoaded
                           ? 'opacity-100 scale-100'
@@ -143,6 +197,13 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
             onLoadingComplete={() => setIsLoaded(true)}
             referrerPolicy='no-referrer'
             priority={false}
+            style={{
+              transform: `scale(1.05) translate(${parallax.x}px, ${parallax.y}px)`,
+              transition: 'transform 0.5s cubic-bezier(0.34,1.56,0.64,1)',
+              willChange: 'transform',
+              backfaceVisibility: 'hidden',
+              perspective: '1000px',
+            }}
           />
 
           {/* Hover 效果层 */}
@@ -150,8 +211,8 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
             {/* 播放按钮 */}
             <div className='absolute inset-0 flex items-center justify-center pointer-events-auto'>
               <div
-                className={`transition-all duration-300 cubic-bezier(0.4,0,0.2,1) ${
-                  playHover ? 'scale-100 opacity-100' : 'scale-90 opacity-70'
+                className={`transition-all duration-300 cubic-bezier(0.34,1.56,0.64,1) ${
+                  playHover ? 'scale-110 opacity-100' : 'scale-90 opacity-70'
                 }`}
                 style={{ cursor: 'pointer' }}
                 onClick={(e) => {
@@ -199,8 +260,10 @@ const AggregateCard: React.FC<AggregateCardProps> = ({
         </div>
 
         {/* 标题 */}
-        <span className='mt-2 px-1 block text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm dark:text-gray-200 transition-all duration-400 cubic-bezier(0.4,0,0.2,1) group-hover:translate-y-[-2px] translate-y-1 opacity-80 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-400'>
-          {first.title}
+        <span className='mt-2 px-1 block font-semibold truncate w-full text-center text-xs sm:text-sm transition-all duration-500 cubic-bezier(0.34,1.56,0.64,1) group-hover:translate-y-[-2px] opacity-80 group-hover:opacity-100'>
+          <span className='text-gray-900 dark:text-gray-200 group-hover:text-green-600 dark:group-hover:text-green-400'>
+            {first.title}
+          </span>
         </span>
       </div>
     </Link>
diff --git a/src/components/DemoCard.tsx b/src/components/DemoCard.tsx
index f5a19ee..04229cf 100644
--- a/src/components/DemoCard.tsx
+++ b/src/components/DemoCard.tsx
@@ -1,7 +1,9 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
 import { Link as LinkIcon, Search } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
-import React, { useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { ImagePlaceholder } from '@/components/ImagePlaceholder';
 
@@ -13,12 +15,15 @@ interface DemoCardProps {
   type?: string;
 }
 
+// 优化的搜索图标组件，添加更多动画
 function SearchCircle({
   className = '',
   fillColor = 'none',
+  isHovered = false,
 }: {
   className?: string;
   fillColor?: string;
+  isHovered?: boolean;
 }) {
   return (
     <svg
@@ -27,7 +32,9 @@ function SearchCircle({
       viewBox='0 0 44 44'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
-      className={`${className} block relative`}
+      className={`${className} block relative transition-all duration-300 ${
+        isHovered ? 'scale-105' : 'scale-95'
+      }`}
     >
       <circle
         cx='22'
@@ -36,10 +43,20 @@ function SearchCircle({
         stroke='white'
         strokeWidth='1.5'
         fill={fillColor}
+        className='transition-all duration-300'
       />
       <foreignObject x='0' y='0' width='44' height='44'>
         <div className='w-full h-full flex items-center justify-center'>
-          <Search className='h-5 w-5 text-white' strokeWidth={2} />
+          <Search
+            className='h-5 w-5 text-white transition-all duration-300'
+            strokeWidth={2}
+            style={{
+              transform: isHovered ? 'rotate(15deg)' : 'rotate(0)',
+              filter: isHovered
+                ? 'drop-shadow(0 0 4px rgba(255,255,255,0.6))'
+                : 'none',
+            }}
+          />
         </div>
       </foreignObject>
     </svg>
@@ -49,8 +66,59 @@ function SearchCircle({
 const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
   const [hover, setHover] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
+  const [parallax, setParallax] = useState({ x: 0, y: 0 });
   const router = useRouter();
   const imgRef = useRef<HTMLImageElement>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  // 图片视差效果 - 优化 Safari 性能
+  useEffect(() => {
+    let requestId: number | null = null;
+    let lastX = 0;
+    let lastY = 0;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!cardRef.current) return;
+
+      const rect = cardRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      // 只有当移动超过阈值时才更新视差，减少 Safari 中的重绘
+      if (Math.abs(x - lastX) > 5 || Math.abs(y - lastY) > 5) {
+        lastX = x;
+        lastY = y;
+
+        // 使用 requestAnimationFrame 优化性能
+        if (requestId) cancelAnimationFrame(requestId);
+        requestId = requestAnimationFrame(() => {
+          // 计算视差偏移量 (-5 到 5 之间)
+          const xParallax = (x / rect.width - 0.5) * 10;
+          const yParallax = (y / rect.height - 0.5) * 10;
+
+          setParallax({ x: xParallax, y: yParallax });
+        });
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (requestId) cancelAnimationFrame(requestId);
+      setParallax({ x: 0, y: 0 });
+    };
+
+    if (cardRef.current) {
+      cardRef.current.addEventListener('mousemove', handleMouseMove);
+      cardRef.current.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return () => {
+      if (cardRef.current) {
+        cardRef.current.removeEventListener('mousemove', handleMouseMove);
+        cardRef.current.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      if (requestId) cancelAnimationFrame(requestId);
+    };
+  }, []);
 
   const handleClick = () => {
     router.push(
@@ -60,11 +128,19 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
 
   return (
     <div
-      className='group relative w-full rounded-lg bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out'
+      ref={cardRef}
+      className='group relative w-full rounded-lg overflow-hidden bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out'
       onClick={handleClick}
     >
       {/* 海报图片区域 */}
-      <div className='relative aspect-[2/3] w-full overflow-hidden rounded-md group-hover:scale-[1.02] transition-all duration-400 cubic-bezier(0.4, 0, 0.2, 1) safari-fix'>
+      <div
+        className='relative w-full overflow-hidden rounded-md group-hover:scale-[1.02] transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) safari-fix'
+        style={{
+          // 为 Safari 提供固定宽高比的后备方案
+          paddingBottom: '150%', // 2:3 比例
+          height: '0',
+        }}
+      >
         {/* 图片占位符 - 骨架屏效果 */}
         <ImagePlaceholder aspectRatio='aspect-[2/3]' />
 
@@ -74,20 +150,28 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
           alt={title}
           fill
           ref={imgRef}
-          className={`object-cover transition-transform duration-500 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110
+          className={`object-cover transition-all duration-700 cubic-bezier(0.34, 1.56, 0.64, 1)
                       ${
                         isLoaded
-                          ? 'opacity-100 scale-100'
-                          : 'opacity-0 scale-95'
+                          ? 'opacity-100 scale-100 blur-0'
+                          : 'opacity-0 scale-95 blur-sm'
                       }`}
           onLoadingComplete={() => setIsLoaded(true)}
           referrerPolicy='no-referrer'
           priority={false}
+          style={{
+            transform: `scale(1.05) translate(${parallax.x}px, ${parallax.y}px)`,
+            transition: 'transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)',
+            // 修复 Safari 中可能的渲染问题
+            willChange: 'transform',
+            backfaceVisibility: 'hidden',
+            perspective: '1000px',
+          }}
         />
 
         {/* 评分徽章 - 暗色模式优化 */}
         {rate && (
-          <div className='absolute top-2 right-2 min-w-[1.25rem] h-4 w-4 sm:h-7 sm:w-7 sm:min-w-[1.5rem] bg-pink-500 dark:bg-pink-400 rounded-full flex items-center justify-center px-1 shadow-md transform transition-all duration-300 cubic-bezier(0.4, 0, 0.2, 1) group-hover:scale-110 group-hover:rotate-3'>
+          <div className='absolute top-2 right-2 min-w-[1.25rem] h-4 w-4 sm:h-7 sm:w-7 sm:min-w-[1.5rem] bg-pink-500 dark:bg-pink-400 rounded-full flex items-center justify-center px-1 shadow-md transform transition-all duration-300 cubic-bezier(0.34, 1.56, 0.64, 1) scale-100 group-hover:scale-110'>
             <span className='text-white text-[0.5rem] sm:text-xs font-bold leading-none'>
               {rate}
             </span>
@@ -95,15 +179,18 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
         )}
 
         {/* 悬浮层 - 搜索按钮 */}
-        <div className='absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 cubic-bezier(0.4, 0, 0.2, 1) flex items-center justify-center'>
+        <div className='absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) flex items-center justify-center'>
           <div
             onMouseEnter={() => setHover(true)}
             onMouseLeave={() => setHover(false)}
-            className={`transition-all duration-300 cubic-bezier(0.4, 0, 0.2, 1) ${
-              hover ? 'scale-110 rotate-12' : 'scale-90'
+            className={`transition-all duration-300 cubic-bezier(0.34, 1.56, 0.64, 1) ${
+              hover ? 'scale-110' : 'scale-90'
             }`}
           >
-            <SearchCircle fillColor={hover ? '#22c55e' : 'none'} />
+            <SearchCircle
+              fillColor={hover ? '#22c55e' : 'none'}
+              isHovered={hover}
+            />
           </div>
         </div>
 
@@ -113,16 +200,16 @@ const DemoCard = ({ id, title, poster, rate, type }: DemoCardProps) => {
           target='_blank'
           rel='noopener noreferrer'
           onClick={(e) => e.stopPropagation()}
-          className='absolute top-2 left-2 scale-90 group-hover:scale-100 opacity-0 group-hover:opacity-100 transition-all duration-300 cubic-bezier(0.4, 0, 0.2, 1)'
+          className='absolute top-2 left-2 scale-90 group-hover:scale-100 opacity-0 group-hover:opacity-100 transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) group-hover:translate-y-0 translate-y-[-10px]'
         >
-          <div className='w-4 h-4 sm:w-7 sm:h-7 rounded-full bg-[#22c55e] dark:bg-[#16a34a] flex items-center justify-center shadow-md opacity-70 hover:opacity-100 transition-all duration-200 ease-in-out hover:scale-110 hover:bg-[#16a34a] dark:hover:bg-[#15803d]'>
+          <div className='w-4 h-4 sm:w-7 sm:h-7 rounded-full bg-[#22c55e] dark:bg-[#16a34a] flex items-center justify-center shadow-md transition-all duration-300 ease-in-out hover:scale-110 hover:bg-[#16a34a] dark:hover:bg-[#15803d]'>
             <LinkIcon className='w-4 h-4 text-white' strokeWidth={2} />
           </div>
         </a>
       </div>
 
       {/* 信息层 - 暗色模式优化 */}
-      <span className='mt-2 px-1 block font-semibold truncate w-full text-center text-xs sm:text-sm transition-all duration-400 cubic-bezier(0.4, 0, 0.2, 1) group-hover:translate-y-[-2px] translate-y-1 opacity-80 group-hover:opacity-100'>
+      <span className='mt-2 px-1 block font-semibold truncate w-full text-center text-xs sm:text-sm transition-all duration-500 cubic-bezier(0.34, 1.56, 0.64, 1) group-hover:translate-y-[-2px] opacity-80 group-hover:opacity-100'>
         <span className='text-gray-900 dark:text-gray-200 group-hover:text-green-600 dark:group-hover:text-green-400'>
           {title}
         </span>
diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx
index 5036ede..dc0ebc5 100644
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -1,8 +1,10 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+
 import { Heart, Link as LinkIcon } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { deletePlayRecord, isFavorited, toggleFavorite } from '@/lib/db.client';
 
@@ -93,6 +95,8 @@ export default function VideoCard({
   const [favorited, setFavorited] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [parallax, setParallax] = useState({ x: 0, y: 0 });
+  const cardRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
 
   // 检查初始收藏状态
@@ -148,6 +152,52 @@ export default function VideoCard({
     }
   };
 
+  // 图片视差效果 - 参考 DemoCard，优化 Safari 性能
+  useEffect(() => {
+    let requestId: number | null = null;
+    let lastX = 0;
+    let lastY = 0;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!cardRef.current) return;
+
+      const rect = cardRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      // 只有在移动超过阈值时才更新，减少重绘
+      if (Math.abs(x - lastX) > 5 || Math.abs(y - lastY) > 5) {
+        lastX = x;
+        lastY = y;
+
+        if (requestId) cancelAnimationFrame(requestId);
+        requestId = requestAnimationFrame(() => {
+          const xParallax = (x / rect.width - 0.5) * 10;
+          const yParallax = (y / rect.height - 0.5) * 10;
+          setParallax({ x: xParallax, y: yParallax });
+        });
+      }
+    };
+
+    const handleMouseLeave = () => {
+      if (requestId) cancelAnimationFrame(requestId);
+      setParallax({ x: 0, y: 0 });
+    };
+
+    if (cardRef.current) {
+      cardRef.current.addEventListener('mousemove', handleMouseMove);
+      cardRef.current.addEventListener('mouseleave', handleMouseLeave);
+    }
+
+    return () => {
+      if (cardRef.current) {
+        cardRef.current.removeEventListener('mousemove', handleMouseMove);
+        cardRef.current.removeEventListener('mouseleave', handleMouseLeave);
+      }
+      if (requestId) cancelAnimationFrame(requestId);
+    };
+  }, []);
+
   const hideCheckCircle = from === 'favorites' || from === 'search';
   const alwaysShowHeart = from !== 'favorites';
 
@@ -158,7 +208,8 @@ export default function VideoCard({
       )}${year ? `&year=${year}` : ''}${from ? `&from=${from}` : ''}`}
     >
       <div
-        className={`group relative w-full rounded-lg bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out ${
+        ref={cardRef}
+        className={`group relative w-full rounded-lg overflow-hidden bg-transparent flex flex-col cursor-pointer transition-all duration-300 ease-in-out ${
           isDeleting ? 'opacity-0 scale-90' : ''
         }`}
       >
@@ -171,7 +222,7 @@ export default function VideoCard({
             src={poster}
             alt={title}
             fill
-            className={`object-cover transition-transform duration-500 cubic-bezier(0.4,0,0.2,1) group-hover:scale-110
+            className={`object-cover transition-all duration-700 cubic-bezier(0.34,1.56,0.64,1)
                       ${
                         isLoaded
                           ? 'opacity-100 scale-100'
@@ -180,6 +231,13 @@ export default function VideoCard({
             onLoadingComplete={() => setIsLoaded(true)}
             referrerPolicy='no-referrer'
             priority={false}
+            style={{
+              transform: `scale(1.05) translate(${parallax.x}px, ${parallax.y}px)`,
+              transition: 'transform 0.5s cubic-bezier(0.34,1.56,0.64,1)',
+              willChange: 'transform',
+              backfaceVisibility: 'hidden',
+              perspective: '1000px',
+            }}
           />
           {/* Hover 效果层 */}
           <div
@@ -192,8 +250,8 @@ export default function VideoCard({
             {/* 播放按钮 */}
             <div className='absolute inset-0 flex items-center justify-center pointer-events-auto'>
               <div
-                className={`transition-all duration-300 cubic-bezier(0.4,0,0.2,1) ${
-                  playHover ? 'scale-100 opacity-100' : 'scale-90 opacity-70'
+                className={`transition-all duration-300 cubic-bezier(0.34,1.56,0.64,1) ${
+                  playHover ? 'scale-110 opacity-100' : 'scale-90 opacity-70'
                 }`}
                 style={{ cursor: 'pointer' }}
                 onClick={(e) => {
@@ -287,14 +345,16 @@ export default function VideoCard({
           </div>
         )}
 
-        {/* 信息层 */}
-        <span className='mt-2 px-1 block text-gray-900 font-semibold truncate w-full text-center text-xs sm:text-sm dark:text-gray-200 transition-all duration-400 cubic-bezier(0.4,0,0.2,1) group-hover:translate-y-[-2px] translate-y-1 opacity-80 group-hover:opacity-100 group-hover:text-green-600 dark:group-hover:text-green-400'>
-          {title}
+        {/* 信息层 - 与 DemoCard 对齐的动画 */}
+        <span className='mt-2 px-1 block font-semibold truncate w-full text-center text-xs sm:text-sm transition-all duration-500 cubic-bezier(0.34,1.56,0.64,1) group-hover:translate-y-[-2px] opacity-80 group-hover:opacity-100'>
+          <span className='text-gray-900 dark:text-gray-200 group-hover:text-green-600 dark:group-hover:text-green-400'>
+            {title}
+          </span>
         </span>
 
         {/* 来源信息 */}
         {source && (
-          <span className='mt-1 px-1 block text-gray-500 text-[0.5rem] sm:text-xs w-full text-center dark:text-gray-400 transition-all duration-400 cubic-bezier(0.4,0,0.2,1) group-hover:translate-y-[-2px] translate-y-1 opacity-80 group-hover:opacity-100'>
+          <span className='mt-1 px-1 block text-gray-500 text-[0.5rem] sm:text-xs w-full text-center dark:text-gray-400 transition-all duration-500 cubic-bezier(0.34,1.56,0.64,1) group-hover:translate-y-[-2px] opacity-80 group-hover:opacity-100'>
             <span className='inline-block border border-gray-500/60 rounded px-2 py-[1px] dark:border-gray-400/60'>
               {source_name}
             </span>