feat: add company logo component

Author: arianrhodsandlot

src/pages/library/components/device-info.tsx

@@ -1,5 +1,6 @@
 import { getPlatformInfo } from '@/controllers/get-platform-info.ts'
 import { getCDNUrl } from '@/utils/cdn.ts'
+import { CompanyLogo } from '../platform/components/company-logo.tsx'
 
 // todo: move to constants
 const platformImageMap = {
@@ -54,15 +55,21 @@ export async function DeviceInfo({ platform }: { platform: string }) {
                 <span className='icon-[mdi--chip]' />
                 Developer
               </div>
-              <div className='pl-6'>{platformInfo.developer || 'unknown'}</div>
+              <div className='pl-6'>
+                <CompanyLogo company={platformInfo.developer || ''} />
+                {platformInfo.developer || 'unknown'}
+              </div>
             </div>
 
             <div>
               <div className='flex items-center gap-2 font-semibold'>
                 <span className='icon-[mdi--factory]' />
                 Manufacturer
               </div>
-              <div className='pl-6'>{platformInfo.manufacturer || 'unknown'}</div>
+              <div className='pl-6'>
+                <CompanyLogo company={platformInfo.manufacturer || ''} />
+                {platformInfo.manufacturer || 'unknown'}
+              </div>
             </div>
           </div>
         </div>

src/pages/library/platform/components/company-logo.tsx

@@ -0,0 +1,58 @@
+import clsx from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { getCDNUrl } from '@/utils/cdn.ts'
+
+const knownCompanyMap = new Map(
+  Object.entries({
+    '3do': '3do.svg',
+    atari: 'atari.png',
+    atlus: 'atlus.svg',
+    banpresto: 'banpresto.svg',
+    capcom: 'capcom.svg',
+    dataeast: 'dataeast.svg',
+    gaelco: 'gaelco.svg',
+    gottlieb: 'gottlieb.svg',
+    igs: 'igs.svg',
+    irem: 'irem.svg',
+    jaleco: 'jaleco.svg',
+    konami: 'konami.svg',
+    midway: 'midway.svg',
+    namco: 'namco.svg',
+    nichibutsu: 'nichibutsu.svg',
+    nintendo: 'nintendo.svg',
+    pgm: 'pgm.png',
+    psikyo: 'psikyo.svg',
+    sega: 'sega.svg',
+    seibu: 'seibu.svg',
+    snk: 'snk.svg',
+    taito: 'taito.svg',
+    technos: 'technos.svg',
+    tecmo: 'tecmo.svg',
+  }),
+)
+
+const repo = 'Mattersons/es-theme-neutral'
+function getCompanyLogo(company: string) {
+  if (!company) {
+    return
+  }
+
+  const companyLower = company.toLowerCase()
+  if (knownCompanyMap.has(companyLower)) {
+    const fileName = knownCompanyMap.get(companyLower)
+    return getCDNUrl(repo, `systems/logo/${fileName}`)
+  }
+
+  for (const [knownCompany, fileName] of knownCompanyMap.entries()) {
+    if (companyLower.includes(knownCompany)) {
+      return getCDNUrl(repo, `systems/logo/${fileName}`)
+    }
+  }
+}
+
+export function CompanyLogo({ className, company }: { className?: string; company: string }) {
+  const companyLogo = getCompanyLogo(company)
+  if (companyLogo) {
+    return <img alt={company} className={clsx(twMerge('object-contain object-center', className))} src={companyLogo} />
+  }
+}

src/pages/library/platform/rom/components/game-info.tsx

@@ -1,4 +1,5 @@
 import { platformMap } from '@/constants/platform.ts'
+import { CompanyLogo } from '../../components/company-logo.tsx'
 
 export function GameInfo({ gameInfo, rom }) {
   return (
@@ -29,15 +30,21 @@ export function GameInfo({ gameInfo, rom }) {
             <span className='icon-[mdi--chip]' />
             Developer
           </div>
-          <div className='pl-6'>{gameInfo?.developer || <span className='opacity-40'>Unknown</span>}</div>
+          <div className='pl-6'>
+            <CompanyLogo company={gameInfo?.developer} />
+            {gameInfo?.developer || <span className='opacity-40'>Unknown</span>}
+          </div>
         </div>
 
         <div>
           <div className='flex items-center gap-2 font-semibold'>
             <span className='icon-[mdi--earth]' />
             Publisher
           </div>
-          <div className='pl-6'>{gameInfo?.publisher || <span className='opacity-40'>Unknown</span>}</div>
+          <div className='pl-6'>
+            <CompanyLogo company={gameInfo?.publisher} />
+            {gameInfo?.publisher || <span className='opacity-40'>Unknown</span>}
+          </div>
         </div>
 
         <div>