gpatti/MediaLore
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

handle android and swap to os icons

Browse Source
This commit is contained in:
Garret Patti
2026-04-12 11:53:27 -04:00
parent 625539f35e
commit d3e1bf049b
8 changed files with 100 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/games/GameDetailModal.tsx
View File

@@ -4,15 +4,25 @@ import { useEffect, useRef, useState, useCallback } from 'react'
import type { Game, GameFile, GamePlatform } from '@/types'
import TagSelector from '@/components/tags/TagSelector'
// Import SVG icons
import WindowsIcon from '@/app/icons/windows.svg'
import LinuxIcon from '@/app/icons/linux.svg'
import MacosIcon from '@/app/icons/mac.svg'
import AndroidIcon from '@/app/icons/android.svg'
// Update the PLATFORM_LABELS to include android
const PLATFORM_LABELS: Record<GamePlatform, string> = {
windows: 'WIN',
linux: 'LIN',
macos: 'MAC',
android: 'AND',
}
const PLATFORM_COLORS: Record<GamePlatform, string> = {
windows: '#0078d4',
linux: '#e95420',
macos: '#6e6e73',
android: '#10b981',
}
interface Props {
@@ -516,13 +526,24 @@ export default function GameDetailModal({ game, libraryId, onClose, onTagsChange
// ─── Download Button ──────────────────────────────────────────────────────────
const PLATFORM_ICONS: Record<GamePlatform, string> = {
windows: (typeof WindowsIcon === 'string' ? WindowsIcon : (WindowsIcon as { src: string }).src),
linux: (typeof LinuxIcon === 'string' ? LinuxIcon : (LinuxIcon as { src: string }).src),
macos: (typeof MacosIcon === 'string' ? MacosIcon : (MacosIcon as { src: string }).src),
android: (typeof AndroidIcon === 'string' ? AndroidIcon : (AndroidIcon as { src: string }).src),
}
function PlatformPill({ platform }: { platform: GamePlatform }) {
const src = PLATFORM_ICONS[platform]
return (
<span
className="px-1.5 py-0.5 rounded text-xs font-bold leading-none flex-shrink-0"
className="px-1.5 py-0.5 rounded text-xs font-bold leading-none flex-shrink-0 flex items-center gap-1"
style={{ backgroundColor: PLATFORM_COLORS[platform], color: '#fff' }}
>
{PLATFORM_LABELS[platform]}
{/* eslint-disable-next-line @next/next/no-img-element */}
{src && <img src={src} alt="" width={14} height={14} aria-hidden="true" />}
<span className="sr-only">{PLATFORM_LABELS[platform]}</span>
</span>
)
}

27
src/components/games/GamesView.tsx
View File

@@ -5,15 +5,37 @@ import type { Game, GamePlatform, GameSeries } from '@/types'
import GameDetailModal from './GameDetailModal'
import FilterPanel from '@/components/FilterPanel'
// Import SVG icons
import WindowsIcon from '@/app/icons/windows.svg'
import LinuxIcon from '@/app/icons/linux.svg'
import MacosIcon from '@/app/icons/mac.svg'
import AndroidIcon from '@/app/icons/android.svg'
const PLATFORM_LABELS: Record<GamePlatform, string> = {
windows: 'WIN',
linux: 'LIN',
macos: 'MAC',
android: 'AND',
}
const PLATFORM_COLORS: Record<GamePlatform, string> = {
windows: '#0078d4',
linux: '#e95420',
macos: '#6e6e73',
android: '#10b981',
}
const PLATFORM_ICONS: Record<GamePlatform, string> = {
windows: (typeof WindowsIcon === 'string' ? WindowsIcon : (WindowsIcon as { src: string }).src),
linux: (typeof LinuxIcon === 'string' ? LinuxIcon : (LinuxIcon as { src: string }).src),
macos: (typeof MacosIcon === 'string' ? MacosIcon : (MacosIcon as { src: string }).src),
android: (typeof AndroidIcon === 'string' ? AndroidIcon : (AndroidIcon as { src: string }).src),
}
function getPlatformIcon(platform: GamePlatform) {
const src = PLATFORM_ICONS[platform]
if (!src) return null
// eslint-disable-next-line @next/next/no-img-element
return <img src={src} alt="" width={14} height={14} aria-hidden="true" />
}
function PlatformBadges({ platforms }: { platforms: GamePlatform[] }) {
@@ -23,10 +45,11 @@ function PlatformBadges({ platforms }: { platforms: GamePlatform[] }) {
{platforms.map((p) => (
<span
key={p}
className="px-1.5 py-0.5 rounded text-xs font-bold leading-none"
className="px-1.5 py-0.5 rounded text-xs font-bold leading-none flex items-center gap-1"
style={{ backgroundColor: PLATFORM_COLORS[p], color: '#fff' }}
>
{PLATFORM_LABELS[p]}
{getPlatformIcon(p)}
<span className="sr-only">{PLATFORM_LABELS[p]}</span>
</span>
))}
</div>