etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-29 18:13:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update ConnectionModal.tsx

Browse Source
This commit is contained in:
Egor
2026-01-22 23:38:42 +03:00
committed by GitHub
parent 857541fb94
commit a94c2a54b8
1 changed files with 42 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/ConnectionModal.tsx
View File

@@ -324,14 +324,14 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
</button> </button>
<h2 className="font-bold text-dark-100 text-lg">{t('subscription.connection.selectApp')}</h2> <h2 className="font-bold text-dark-100 text-lg">{t('subscription.connection.selectApp')}</h2>
</div> </div>
<div className={`${isMobile ? 'flex-1' : 'max-h-[60vh]'} overflow-y-auto p-4 space-y-5`}> <div className={`${isMobile ? 'flex-1' : 'max-h-[60vh]'} overflow-y-auto p-4 space-y-6`}>
{availablePlatforms.map(platform => { {availablePlatforms.map(platform => {
const apps = appConfig.platforms[platform] const apps = appConfig.platforms[platform]
if (!apps?.length) return null if (!apps?.length) return null
const isCurrentPlatform = platform === detectedPlatform const isCurrentPlatform = platform === detectedPlatform
return ( return (
<div key={platform}> <div key={platform}>
<div className="flex items-center gap-2 mb-2 px-1"> <div className="flex items-center gap-2 mb-3">
<span className={`text-sm font-semibold ${isCurrentPlatform ? 'text-accent-400' : 'text-dark-400'}`}> <span className={`text-sm font-semibold ${isCurrentPlatform ? 'text-accent-400' : 'text-dark-400'}`}>
{platformNames[platform] || platform} {platformNames[platform] || platform}
</span> </span>
@@ -341,30 +341,48 @@ export default function ConnectionModal({ onClose }: ConnectionModalProps) {
</span> </span>
)} )}
</div> </div>
<div className="space-y-2"> <div className="grid grid-cols-3 gap-2">
{apps.map(app => ( {apps.map(app => {
<button const isSelected = selectedApp?.id === app.id
key={app.id} return (
onClick={() => { setSelectedApp(app); setShowAppSelector(false) }} <button
className={`w-full p-3 rounded-xl flex items-center gap-3 transition-all ${ key={app.id}
selectedApp?.id === app.id onClick={() => { setSelectedApp(app); setShowAppSelector(false) }}
? 'bg-accent-500/10 ring-1 ring-accent-500/30' className={`relative flex flex-col items-center p-3 rounded-xl transition-all ${
: 'bg-dark-800/50 hover:bg-dark-800' isSelected
}`} ? 'bg-accent-500/15 ring-2 ring-accent-500/50'
> : 'bg-dark-800/50 hover:bg-dark-800 active:scale-95'
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${ }`}
selectedApp?.id === app.id ? 'bg-accent-500/20 text-accent-400' : 'bg-dark-700 text-dark-300' >
}`}> {/* Featured badge */}
{getAppIcon(app.name)}
</div>
<div className="flex-1 text-left">
<span className="font-medium text-dark-100">{app.name}</span>
{app.isFeatured && ( {app.isFeatured && (
<span className="ml-2 text-xs text-accent-400">{t('subscription.connection.featured')}</span> <div className="absolute -top-1 -right-1 w-5 h-5 bg-accent-500 rounded-full flex items-center justify-center shadow-lg">
<svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
</div>
)} )}
</div> {/* App icon */}
</button> <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-2 transition-colors ${
))} isSelected
? 'bg-accent-500/20 text-accent-400'
: 'bg-dark-700/80 text-dark-300'
}`}>
{getAppIcon(app.name)}
</div>
{/* App name */}
<span className={`text-xs font-medium text-center leading-tight line-clamp-2 ${
isSelected ? 'text-accent-400' : 'text-dark-200'
}`}>
{app.name}
</span>
{/* Selection indicator */}
{isSelected && (
<div className="absolute bottom-1 left-1/2 -translate-x-1/2 w-1.5 h-1.5 bg-accent-500 rounded-full" />
)}
</button>
)
})}
</div> </div>
</div> </div>
) )