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

✨ style: minor changes in ui

Browse Source
This commit is contained in:
eshanized
2025-01-07 23:06:47 +05:30
parent aa2d928153
commit e2f670e4a9
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/PackageCard.tsx
View File

@@ -11,43 +11,45 @@ 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-xl shadow-md border border-nord-4 dark:border-nord-2 hover:shadow-lg transition-all overflow-hidden"> <div className="bg-gradient-to-b from-nord-5 to-nord-6 dark:from-nord-1 dark:to-nord-2 rounded-xl shadow-lg border border-nord-4 dark:border-nord-2 hover:shadow-xl transition-all duration-300 overflow-hidden">
{/* Header Section */} {/* Header Section */}
<div className="p-5 flex items-start gap-4"> <div className="p-6 flex items-start gap-4">
{/* Icon Section */} {/* Icon Section */}
<div className="flex-shrink-0 p-3 bg-nord-7/10 dark:bg-nord-7/20 rounded-xl shadow-sm"> <div className="flex-shrink-0 p-4 bg-nord-8/10 dark:bg-nord-8/20 rounded-full shadow-md">
<Box className="h-6 w-6 text-nord-7 dark:text-nord-6" /> <Box className="h-6 w-6 text-nord-7 dark:text-nord-6" />
</div> </div>
{/* Package Information */} {/* Package Information */}
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-nord-0 dark:text-nord-6"> <h3 className="text-lg font-bold text-nord-0 dark:text-nord-6 group-hover:text-nord-10 transition-colors">
{pkg.name} {pkg.name}
</h3> </h3>
<span className="text-sm font-medium text-nord-3 dark:text-nord-4"> <span className="text-sm font-medium text-nord-3 dark:text-nord-4">
{pkg.version} {pkg.version}
</span> </span>
</div> </div>
<p className="mt-2 text-sm text-nord-2 dark:text-nord-4">{pkg.description}</p> <p className="mt-2 text-sm text-nord-2 dark:text-nord-4 line-clamp-2">
{pkg.description}
</p>
{/* Footer Section */} {/* Footer Section */}
<div className="mt-4 flex items-center justify-between"> <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"> <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-gradient-to-r from-nord-7 to-nord-8 dark:from-nord-8/30 dark:to-nord-9 text-nord-0 dark:text-nord-6 shadow">
{pkg.repository} {pkg.repository}
</span> </span>
<button <button
onClick={() => setExpanded(!expanded)} 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" 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 transition-all duration-300"
> >
{expanded ? ( {expanded ? (
<> <>
<ChevronUp className="h-4 w-4" /> <ChevronUp className="h-5 w-5" />
Hide Installation Hide Installation
</> </>
) : ( ) : (
<> <>
<ChevronDown className="h-4 w-4" /> <ChevronDown className="h-5 w-5" />
Show Installation Show Installation
</> </>
)} )}
@@ -58,7 +60,7 @@ export function PackageCard({ package: pkg }: PackageCardProps) {
{/* Expanded Section */} {/* Expanded Section */}
{expanded && ( {expanded && (
<div className="border-t border-nord-4 dark:border-nord-2 p-5 bg-nord-6 dark:bg-nord-0"> <div className="border-t border-nord-4 dark:border-nord-2 p-6 bg-nord-6 dark:bg-nord-0 transition-all duration-300">
<InstallGuide packageName={pkg.name} /> <InstallGuide packageName={pkg.name} />
</div> </div>
)} )}