MapComplete/UI/BigComponents/CustomGeneratorButton.svelte

<script lang="ts">
  import UserDetails from "../../Logic/Osm/OsmConnection"
  import { UIEventSource } from "../../Logic/UIEventSource"
  import Constants from "../../Models/Constants"
  import Svg from "../../Svg"
  import SubtleButton from "../Base/SubtleButton.svelte"
  import ToSvelte from "../Base/ToSvelte.svelte"
  import Translations from "../i18n/Translations"

  export let userDetails: UIEventSource<UserDetails>
  const t = Translations.t.general.morescreen

  console.log($userDetails.csCount < 50)
</script>

<div>
  {#if $userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock}
    <SubtleButton
      options={{
        url: "https://github.com/pietervdvn/MapComplete/issues",
        newTab: true,
      }}
    >
      <span slot="message">{t.requestATheme.toString()}</span>
    </SubtleButton>
  {:else}
    <SubtleButton
      options={{
        url: "https://pietervdvn.github.io/mc/legacy/070/customGenerator.html",
      }}
    >
      <span slot="image" class="h-11 w-11 mx-4 bg-red">
        <ToSvelte construct={Svg.pencil_ui()} />
      </span>
      <span slot="message">{t.createYourOwnTheme.toString()}</span>
    </SubtleButton>
  {/if}
</div>