🎨 UI improve new library and Fixed some errors.

- swapy implemlented
- Languages card reworked

Author: PentSec

package.json

@@ -22,6 +22,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",
+        "swapy": "^0.4.2",
         "tailwindcss": "^3.4.14"
     },
     "devDependencies": {

pnpm-lock.yaml

@@ -1,27 +1,48 @@
 import { motion } from 'framer-motion'
+import { createSwapy } from 'swapy'
+import { useEffect } from 'react'
 import { ContactCard, ProfileCard, ReposCard, Languages } from '../../components'
 
 export default function ContentApp() {
+    useEffect(() => {
+        const container = document.querySelector('.container')
+        const swapy = createSwapy(container, { swapMode: 'dynamic' })
+
+        swapy.onSwap(({ data }) => {
+            console.log('Nuevo orden:', data.object)
+        })
+        swapy.enable(true)
+
+        return () => {
+            swapy.destroy()
+        }
+    }, [])
+
     return (
-        <div>
+        <div className="container">
             <div className="grid grid-cols-1 gap-0 lg:grid-cols-3 lg:gap-6 rounded-box">
-                <motion.div
-                    initial={{ opacity: 0, x: -50 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    transition={{ duration: 0.5 }}
-                >
-                    <ProfileCard />
-                    <ContactCard />
-                    <Languages />
-                </motion.div>
-                <motion.div
-                    className="col-span-2 gap-4 p-4 mb-4 rounded-lg bg-zinc-800"
-                    initial={{ opacity: 0, x: 50 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    transition={{ duration: 0.5 }}
-                >
-                    <ReposCard />
-                </motion.div>
+                <div className="lg:col-span-1">
+                    <div data-swapy-slot="1">
+                        <div data-swapy-item="profile">
+                            <ProfileCard />
+                        </div>
+                    </div>
+                    <div data-swapy-slot="2">
+                        <div data-swapy-item="contact">
+                            <ContactCard />
+                        </div>
+                    </div>
+                    <div data-swapy-slot="3">
+                        <div data-swapy-item="languages">
+                            <Languages />
+                        </div>
+                    </div>
+                </div>
+                <div className="col-span-3 gap-4 p-4 mb-4 rounded-lg bg-zinc-800 lg:col-span-2">
+                    <div>
+                        <ReposCard />
+                    </div>
+                </div>
             </div>
         </div>
     )

src/assets/css/tailwind.css

@@ -1,5 +1,5 @@
 import { useGithubUser } from '../../context/GitHubUserContext'
-import { Card, CardBody, CardHeader, Progress } from '@nextui-org/react'
+import { Card, CardBody, CardHeader, Chip } from '@nextui-org/react'
 import languageColors from '../../data/colors.json'
 
 const Languages = () => {
@@ -17,16 +17,29 @@ const Languages = () => {
         <Card is isHoverable className="mb-4">
             <CardHeader>
                 <h4 className="leading-none font-open-sans text-small text-default-600">
-                    Languages used in my repositories:{count.size}
+                    Languages I've learned:{count.size}
                 </h4>
             </CardHeader>
             <CardBody>
-                <div>
-                    {languageStats.map(({ language, percentage, count }) => {
+                <div className="flex flex-wrap gap-2 mt-2">
+                    {languageStats.map(({ language }) => {
                         const languageColor = getLanguageColor(language)
                         return (
-                            <div key={language} style={{ marginBottom: '1px' }}>
-                                <Progress
+                            <div key={language} className="flex-shrink-0">
+                                <Chip
+                                    color="primary"
+                                    variant="faded"
+                                    startContent={
+                                        <p
+                                            className="w-3 h-3 mr-1 rounded-full opacity-60"
+                                            style={{ backgroundColor: languageColor }}
+                                        />
+                                    }
+                                >
+                                    {language}
+                                </Chip>
+
+                                {/* <Progress
                                     label={
                                         <div className="flex items-center">
                                             <div
@@ -42,7 +55,7 @@ const Languages = () => {
                                     value={parseFloat(percentage)}
                                     color="primary"
                                     showValueLabel={true}
-                                />
+                                /> */}
                             </div>
                         )
                     })}

src/components/ContentApp/ContentApp.jsx

@@ -78,7 +78,7 @@ export default function ReposCard() {
     if (!Array.isArray(userRepos)) return <p>No repositories found</p>
 
     return (
-        <ScrollShadow hideScrollBar className="h-[calc(85vh-32px)] overflow-auto ">
+        <ScrollShadow hideScrollBar className="h-[calc(65vh-0px)] overflow-auto ">
             <div className="grid grid-cols-2 gap-4 p-2 mb-4 overflow-auto">
                 {filteredRepos.slice(0, itemToShow).map((repo, index) => {
                     const isLastElement = index === itemToShow - 1

src/components/Languages/Languages.jsx

@@ -1,6 +1,6 @@
 import ReactDOM from 'react-dom/client'
 import { NextUIProvider } from '@nextui-org/react'
-import Index from './pages/index'
+import Index from './pages/Index'
 import './assets/css/tailwind.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(