refactor: improve RepositoryCard component layout and accessibility

- Removed unnecessary hover state management and simplified the component structure.
- Enhanced styling of the button and added a badge for repository language.
- Updated tooltip for private repositories to provide clearer information.
- Improved layout for better responsiveness and user experience.

src/components/core/projects/repository-card.tsx

@@ -1,7 +1,6 @@
 import { GitFork, LockIcon, Star } from 'lucide-react';
-import { AnimatePresence, motion } from 'motion/react';
-import { useState } from 'react';
 
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import {
   Tooltip,
@@ -15,24 +14,15 @@ interface RepositoryCardProps {
 }
 
 export function RepositoryCard({ repository }: RepositoryCardProps) {
-  const [isHovered, setIsHovered] = useState(false);
-
   return (
-    <div
-      className='mb-4 flex flex-col space-y-1 rounded-md p-2 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-900'
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
-    >
-      <div className='flex w-full flex-row space-x-0 md:space-x-2'>
-        <div className='w-[100px] tabular-nums text-neutral-600 dark:text-neutral-400'>
-          {repository.language || 'Unknown'}
-        </div>
-        <div className='flex flex-1 justify-between'>
+    <div className='group mb-4 rounded-md p-4 transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-900'>
+      <div className='flex w-full flex-col space-y-2'>
+        <div className='flex items-start justify-between'>
           <div className='flex items-center gap-2'>
             <Button
               variant='link'
               asChild
-              className='h-auto p-0 text-base font-normal tracking-tight text-neutral-900 hover:bg-transparent hover:text-neutral-700 dark:text-neutral-100 dark:hover:text-neutral-300'
+              className='h-auto p-0 text-base font-medium tracking-tight text-neutral-900 hover:bg-transparent hover:text-neutral-700 dark:text-neutral-100 dark:hover:text-neutral-300'
             >
               <a
                 href={repository.html_url}
@@ -45,39 +35,45 @@ export function RepositoryCard({ repository }: RepositoryCardProps) {
             {repository.private && (
               <Tooltip>
                 <TooltipTrigger>
-                  <LockIcon className='mr-1 h-4 w-4' />
+                  <LockIcon className='h-4 w-4 text-neutral-500' />
                 </TooltipTrigger>
-                <TooltipContent>
-                  This repository is private and may not be accessible
-                </TooltipContent>
+                <TooltipContent>Private repository</TooltipContent>
               </Tooltip>
             )}
           </div>
-          <div className='flex items-center space-x-4 text-neutral-600 dark:text-neutral-400'>
-            <span className='flex items-center'>
-              <Star className='mr-1 h-4 w-4' />
+          <div className='flex items-center gap-4 text-sm text-neutral-600 dark:text-neutral-400'>
+            <span className='flex items-center gap-1'>
+              <Star className='h-4 w-4' />
               {repository.stargazers_count}
             </span>
-            <span className='flex items-center'>
-              <GitFork className='mr-1 h-4 w-4' />
+            <span className='flex items-center gap-1'>
+              <GitFork className='h-4 w-4' />
               {repository.forks_count}
             </span>
           </div>
         </div>
-      </div>
-      <AnimatePresence>
-        {repository.description && isHovered && (
-          <motion.p
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.2 }}
-            className='overflow-hidden pl-[100px] text-sm text-neutral-600 dark:text-neutral-400 md:pl-[116px]'
+
+        <div className='flex items-center gap-x-4 text-sm'>
+          <Badge
+            variant='outline'
+            className='bg-neutral-50 dark:bg-neutral-900'
           >
-            {repository.description}
-          </motion.p>
-        )}
-      </AnimatePresence>
+            {repository.language || 'Unknown'}
+          </Badge>
+          {repository.description && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className='line-clamp-1 cursor-default text-neutral-600 dark:text-neutral-400'>
+                  {repository.description}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent side='bottom' className='max-w-[300px]'>
+                {repository.description}
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </div>
     </div>
   );
 }