Solid syntax

[jer3m01]

Here's a few tricks to make component syntax shorter:

<Show when={selectedGame().favourite}>
  <div className="relative">
    <div className="!w-max"> {translateText("favourite")}</div>
    <div className="absolute blur-[5px] opacity-70 -z-10 inset-0 !w-max">
      {translateText("favourite")}
    </div>
  </div>
</Show>
<Show when={!selectedGame().favourite}>
  <div className="!w-max"> {translateText("favourite")}</div>
</Show>

// is equal to

<Show when={selectedGame().favourite} fallback={<div className="!w-max"> {translateText("favourite")}</div>}>
  <div className="relative">
    <div className="!w-max"> {translateText("favourite")}</div>
    <div className="absolute blur-[5px] opacity-70 -z-10 inset-0 !w-max">
      {translateText("favourite")}
    </div>
  </div>
</Show>

https://docs.solidjs.com/reference/components/show

<Show when={editedLocatedGame() === undefined}>
  ...
</Show>
<Show when={editedLocatedGame() === null}>
  ...
</Show>
<Show when={editedLocatedGame()}>
  ...
</Show>

// can be replaced by

<Switch>
  <Match when={editedLocatedGame() === undefined}>
    ...
  </Match>
  <Match when={editedLocatedGame() === null}>
    ...
  </Match>
  <Match when={editedLocatedGame()}>
    ...
  </Match>
</Switch>

// or

<Switch fallback={... /* same as `when={editedLocatedGame()}` */}>
  <Match when={editedLocatedGame() === undefined}>
    ...
  </Match>
  <Match when={editedLocatedGame() === null}>
    ...
  </Match>
</Switch>

https://docs.solidjs.com/reference/components/switch-and-match

Also in general I'd recommend making smaller components (splitting into multiple functions or files). And either placing all svg icons in a separate file (example) or an icon library (like solid-icons).