Snigdha-OS/package-browser
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/package-browser.git synced 2025-09-12 15:45:01 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style(_aesthetic): change icon and look

Browse Source
This commit is contained in:
eshanized
2024-12-27 21:23:03 +05:30
parent 731f9e08a9
commit ac4302dafb
1 changed files with 46 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/PackageCard.tsx
View File

@@ -1,5 +1,5 @@
import React, { useState } from 'react'; import { useState } from 'react';
import { Boxes, ChevronDown, ChevronUp } from 'lucide-react'; import { Box, ChevronDown, ChevronUp } from 'lucide-react';
import { Package } from '../types'; import { Package } from '../types';
import { InstallGuide } from './InstallGuide'; import { InstallGuide } from './InstallGuide';
@@ -11,44 +11,54 @@ export function PackageCard({ package: pkg }: PackageCardProps) {
const [expanded, setExpanded] = useState(false); const [expanded, setExpanded] = useState(false);
return ( 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="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">
<div className="p-4"> {/* Header Section */}
<div className="flex items-start gap-3"> <div className="p-5 flex items-start gap-4">
<div className="p-2 bg-nord-7/10 dark:bg-nord-7/20 rounded-lg"> {/* Icon Section */}
<Boxes className="h-5 w-5 text-nord-7" /> <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>
<div className="flex-1"> <p className="mt-2 text-sm text-nord-2 dark:text-nord-4">{pkg.description}</p>
<div className="flex items-center justify-between">
<h3 className="font-medium text-nord-0 dark:text-nord-6">{pkg.name}</h3> {/* Footer Section */}
<span className="text-sm text-nord-3 dark:text-nord-4">{pkg.version}</span> <div className="mt-4 flex items-center justify-between">
</div> <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">
<p className="mt-1 text-sm text-nord-2 dark:text-nord-4">{pkg.description}</p> {pkg.repository}
<div className="mt-2 flex items-center justify-between"> </span>
<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"> <button
{pkg.repository} onClick={() => setExpanded(!expanded)}
</span> 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"
<button >
onClick={() => setExpanded(!expanded)} {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" <>
> <ChevronUp className="h-4 w-4" />
{expanded ? ( Hide Installation
<> </>
<ChevronUp className="h-4 w-4" /> ) : (
Hide installation <>
</> <ChevronDown className="h-4 w-4" />
) : ( Show Installation
<> </>
<ChevronDown className="h-4 w-4" /> )}
Show installation </button>
</>
)}
</button>
</div>
</div> </div>
</div> </div>
</div> </div>
{/* Expanded Section */}
{expanded && ( {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} /> <InstallGuide packageName={pkg.name} />
</div> </div>
)} )}