From ac4302dafb75fa4a7d8e49d4a5539aaf779fd5e9 Mon Sep 17 00:00:00 2001
From: eshanized <m.eshanized@gmail.com>
Date: Fri, 27 Dec 2024 21:23:03 +0530
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20style(=5Faesthetic):=20change=20ico?=
 =?UTF-8?q?n=20and=20look?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PackageCard.tsx | 82 +++++++++++++++++++---------------
 1 file changed, 46 insertions(+), 36 deletions(-)

diff --git a/src/components/PackageCard.tsx b/src/components/PackageCard.tsx
index 685664e..681281a 100644
--- a/src/components/PackageCard.tsx
+++ b/src/components/PackageCard.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Boxes, ChevronDown, ChevronUp } from 'lucide-react';
+import { useState } from 'react';
+import { Box, ChevronDown, ChevronUp } from 'lucide-react';
 import { Package } from '../types';
 import { InstallGuide } from './InstallGuide';
 
@@ -11,47 +11,57 @@ export function PackageCard({ package: pkg }: PackageCardProps) {
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <div className="bg-nord-5 dark:bg-nord-1 rounded-lg shadow-sm border border-nord-4 dark:border-nord-2 hover:shadow-md transition-all overflow-hidden">
-      <div className="p-4">
-        <div className="flex items-start gap-3">
-          <div className="p-2 bg-nord-7/10 dark:bg-nord-7/20 rounded-lg">
-            <Boxes className="h-5 w-5 text-nord-7" />
+    <div className="bg-nord-5 dark:bg-nord-1 rounded-xl shadow-md border border-nord-4 dark:border-nord-2 hover:shadow-lg transition-all overflow-hidden">
+      {/* Header Section */}
+      <div className="p-5 flex items-start gap-4">
+        {/* Icon Section */}
+        <div className="flex-shrink-0 p-3 bg-nord-7/10 dark:bg-nord-7/20 rounded-xl shadow-sm">
+          <Box className="h-6 w-6 text-nord-7 dark:text-nord-6" />
+        </div>
+
+        {/* Package Information */}
+        <div className="flex-1">
+          <div className="flex items-center justify-between">
+            <h3 className="text-lg font-semibold text-nord-0 dark:text-nord-6">
+              {pkg.name}
+            </h3>
+            <span className="text-sm font-medium text-nord-3 dark:text-nord-4">
+              {pkg.version}
+            </span>
           </div>
-          <div className="flex-1">
-            <div className="flex items-center justify-between">
-              <h3 className="font-medium text-nord-0 dark:text-nord-6">{pkg.name}</h3>
-              <span className="text-sm text-nord-3 dark:text-nord-4">{pkg.version}</span>
-            </div>
-            <p className="mt-1 text-sm text-nord-2 dark:text-nord-4">{pkg.description}</p>
-            <div className="mt-2 flex items-center justify-between">
-              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-nord-8/10 dark:bg-nord-8/20 text-nord-10 dark:text-nord-8">
-                {pkg.repository}
-              </span>
-              <button
-                onClick={() => setExpanded(!expanded)}
-                className="text-nord-9 dark:text-nord-8 hover:text-nord-10 dark:hover:text-nord-7 flex items-center gap-1 text-sm"
-              >
-                {expanded ? (
-                  <>
-                    <ChevronUp className="h-4 w-4" />
-                    Hide installation
-                  </>
-                ) : (
-                  <>
-                    <ChevronDown className="h-4 w-4" />
-                    Show installation
-                  </>
-                )}
-              </button>
-            </div>
+          <p className="mt-2 text-sm text-nord-2 dark:text-nord-4">{pkg.description}</p>
+
+          {/* Footer Section */}
+          <div className="mt-4 flex items-center justify-between">
+            <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-nord-8/10 dark:bg-nord-8/20 text-nord-10 dark:text-nord-8">
+              {pkg.repository}
+            </span>
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="text-nord-9 dark:text-nord-8 hover:text-nord-10 dark:hover:text-nord-7 flex items-center gap-2 text-sm font-medium"
+            >
+              {expanded ? (
+                <>
+                  <ChevronUp className="h-4 w-4" />
+                  Hide Installation
+                </>
+              ) : (
+                <>
+                  <ChevronDown className="h-4 w-4" />
+                  Show Installation
+                </>
+              )}
+            </button>
           </div>
         </div>
       </div>
+
+      {/* Expanded Section */}
       {expanded && (
-        <div className="border-t border-nord-4 dark:border-nord-2 p-4 bg-nord-6 dark:bg-nord-0">
+        <div className="border-t border-nord-4 dark:border-nord-2 p-5 bg-nord-6 dark:bg-nord-0">
           <InstallGuide packageName={pkg.name} />
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}