fix: platform icon

decompme · May 20, 2024 · 1b76677 · 1b76677
1 parent 8bbb5f6
commit 1b76677
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/frontend/src/components/PlatformSelect/PlatformIcon.tsx b/frontend/src/components/PlatformSelect/PlatformIcon.tsx
@@ -41,20 +41,27 @@ export const PLATFORMS = Object.keys(ICONS)
 export type Props = {
     platform: string
     className?: string
+    clickable?: boolean
     size?: string | number
 }
 
 export function platformIcon(platform: string) {
     return ICONS[platform as keyof typeof ICONS] || UnknownIcon
 }
 
-export function PlatformIcon({ platform, className, size }: Props) {
+export function PlatformIcon({ platform, className, clickable, size }: Props) {
     const Icon = platformIcon(platform)
     const url = platformUrl(platform)
 
-    return (
-        <Link href={url}>
+    if (clickable) {
+        return (
+            <Link href={url}>
+                <Icon width={size} height={size} className={className} />
+            </Link>
+        )
+    } else {
+        return (
             <Icon width={size} height={size} className={className} />
-        </Link>
-    )
+        )
+    }
 }
diff --git a/frontend/src/components/PlatformSelect/PlatformSelect.tsx b/frontend/src/components/PlatformSelect/PlatformSelect.tsx
@@ -25,7 +25,7 @@ export default function PlatformSelect({ platforms, value, onChange, className }
             className={classNames(styles.platform, { [styles.selected]: value === key })}
             onClick={() => onChange(key)}
         >
-            <PlatformIcon platform={key} />
+            <PlatformIcon clickable={false} platform={key} />
             <div className={styles.labelContainer}>
                 <div className={styles.consoleName}>{platform.name}</div>
                 <div className={styles.platformName}>{platform.description}</div>

diff --git a/frontend/src/components/PresetList.tsx b/frontend/src/components/PresetList.tsx
@@ -36,7 +36,7 @@ export function PresetList({ url, className, item, emptyButtonLabel }: Props): R
     return (
         <ul className={classNames(styles.list, "rounded-md border-gray-6 text-sm", className)}>
             {results.map(preset => (
-                <Item key={preset.id} preset={preset} />
+                <Item hideIcon key={preset.id} preset={preset} />
             ))}
             {results.length === 0 && emptyButtonLabel && <li className={styles.button}>
                 <Link href="/new">
@@ -56,14 +56,16 @@ export function PresetList({ url, className, item, emptyButtonLabel }: Props): R
     )
 }
 
-export function PresetItem({ preset }: { preset: api.Preset }): React.JSX.Element {
+export function PresetItem({ preset, hideIcon }: { preset: api.Preset, hideIcon?: boolean }): React.JSX.Element {
     const compilersTranslation = useTranslation("compilers")
     const compilerName = compilersTranslation.t(preset.compiler)
 
     return (
         <div className="rounded-md border border-gray-6 p-[1em] text-sm">
             <div className="flex items-center gap-2">
-                <PlatformIcon platform={preset.platform} className="w-[1.2em]"/>
+                {
+                    hideIcon ? <></>:<PlatformIcon platform={preset.platform} className="w-[1.2em]"/>
+                }
                 <a className="font-semibold hover:text-[var(--link)]" href={presetUrl(preset)}>
                     {preset.name}
                 </a>