perf: card shadowbox

This commit is contained in:
Junyan Qin
2025-08-11 20:41:57 +08:00
parent 2aef139577
commit 0124448479
19 changed files with 73 additions and 129 deletions
@@ -34,7 +34,7 @@ export default function PluginCardComponent({
}
return (
<div
className="w-[100%] h-[10rem] bg-white dark:bg-[#1a1a1e] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0px_2px_8px_0_rgba(255,255,255,0.1)] p-[1.2rem] cursor-pointer transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0px_4px_12px_0_rgba(255,255,255,0.15)]"
className="w-[100%] h-[10rem] bg-white dark:bg-[#1f1f22] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0] p-[1.2rem] cursor-pointer transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0]"
onClick={onCardClick}
>
<div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
@@ -54,7 +54,9 @@ export default function PluginCardComponent({
{cardVO.author} /{' '}
</div>
<div className="flex flex-row items-center justify-start gap-[0.4rem]">
<div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">{cardVO.name}</div>
<div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">
{cardVO.name}
</div>
<Badge variant="outline" className="text-[0.7rem]">
v{cardVO.version}
</Badge>
@@ -115,7 +117,9 @@ export default function PluginCardComponent({
<div className="flex items-center justify-center gap-[0.4rem]">
<svg
className={`w-[1.4rem] h-[1.4rem] cursor-pointer ${
cardVO.repository ? 'text-black dark:text-[#f0f0f0]' : 'text-gray-400 dark:text-gray-600'
cardVO.repository
? 'text-black dark:text-[#f0f0f0]'
: 'text-gray-400 dark:text-gray-600'
}`}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
@@ -141,15 +141,26 @@ export default function PluginMarketComponent({
value={`${sortByValue},${sortOrderValue}`}
onValueChange={handleSortChange}
>
<SelectTrigger className="w-[180px] ml-2 cursor-pointer bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectTrigger className="w-[180px] ml-2 cursor-pointer bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectValue placeholder={t('plugins.sortBy')} />
</SelectTrigger>
<SelectContent className="bg-[#f0f0f0] dark:bg-[#2a2a2e]">
<SelectItem value="stars,DESC" className="text-gray-900 dark:text-gray-100">{t('plugins.mostStars')}</SelectItem>
<SelectItem value="created_at,DESC" className="text-gray-900 dark:text-gray-100">
<SelectContent className="bg-[#ffffff] dark:bg-[#2a2a2e]">
<SelectItem
value="stars,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('plugins.mostStars')}
</SelectItem>
<SelectItem
value="created_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('plugins.recentlyAdded')}
</SelectItem>
<SelectItem value="pushed_at,DESC" className="text-gray-900 dark:text-gray-100">
<SelectItem
value="pushed_at,DESC"
className="text-gray-900 dark:text-gray-100"
>
{t('plugins.recentlyUpdated')}
</SelectItem>
</SelectContent>
@@ -16,7 +16,7 @@ export default function PluginMarketCardComponent({
}
return (
<div className="w-[100%] h-[10rem] bg-white dark:bg-[#1a1a1e] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0px_2px_8px_0_rgba(255,255,255,0.1)] p-[1.2rem] transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0px_4px_12px_0_rgba(255,255,255,0.15)]">
<div className="w-[100%] h-[10rem] bg-white dark:bg-[#1f1f22] rounded-[10px] shadow-[0px_2px_2px_0_rgba(0,0,0,0.2)] dark:shadow-[0] p-[1.2rem] transition-all duration-200 hover:shadow-[0px_2px_8px_0_rgba(0,0,0,0.1)] dark:hover:shadow-[0]">
<div className="w-full h-full flex flex-row items-start justify-start gap-[1.2rem]">
<svg
className="w-16 h-16 text-[#2288ee]"
@@ -34,7 +34,9 @@ export default function PluginMarketCardComponent({
{cardVO.author} /{' '}
</div>
<div className="flex flex-row items-center justify-start gap-[0.4rem]">
<div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">{cardVO.name}</div>
<div className="text-[1.2rem] text-black dark:text-[#f0f0f0]">
{cardVO.name}
</div>
</div>
</div>