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

✨ style(_minor): some changes in shadows and spacing

Browse Source
This commit is contained in:
eshanized
2024-12-27 21:10:56 +05:30
parent 3e68fd13d5
commit b908702187
1 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/PackageCard/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import { useState } from 'react';
import { Boxes } from 'lucide-react';
import { Package } from '../../types';
import { InstallGuide } from '../InstallGuide';
@@ -13,30 +13,42 @@ 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="group bg-nord-5 dark:bg-nord-1 rounded-xl shadow-lg border border-nord-4 dark:border-nord-2 hover:shadow-xl transition-all duration-300 overflow-hidden">
{/* Header Section */}
<div className="p-5">
<div className="flex items-start gap-4">
{/* Icon */}
<div className="p-3 bg-nord-7/10 dark:bg-nord-7/20 rounded-full shadow-md group-hover:scale-105 transition-transform">
<Boxes className="h-6 w-6 text-nord-7" />
</div>
{/* Content */}
<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>
<h3 className="font-semibold text-lg text-nord-0 dark:text-nord-6 group-hover:text-nord-8 transition-colors">
{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">
<p className="mt-2 text-sm text-nord-2 dark:text-nord-4 line-clamp-2">
{pkg.description}
</p>
<div className="mt-3 flex items-center justify-between">
<Badge>{pkg.repository}</Badge>
<ExpandButton expanded={expanded} onClick={() => setExpanded(!expanded)} />
<ExpandButton
expanded={expanded}
onClick={() => setExpanded(!expanded)}
/>
</div>
</div>
</div>
</div>
{/* Expandable 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 bg-nord-6 dark:bg-nord-0 p-5 transition-opacity duration-300">
<InstallGuide packageName={pkg.name} />
</div>
)}
</div>
);
}
}