---
var UserLogin = false
var Badges = ["Admin", "Moderator", "Premium"]
---

<!-- Use this method if the results only returns "true" or "false" -->
{UserLogin ? <p>Log Out</p> : <p>Sign in</p>}

<!-- Use this method if the results return other results that are not labeled as "true" or "false -->
{ 
  ()=> {
    if (UserLogin === "external") {
      return <p>Log Out</p>
    } else {
      return <p>Sign In</p>
    }
  }
}

<!-- With an array, you can check what's included and use the ".includes" function -->
<!-- Includes Function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes -->
<div class="user-badges">
        {()=> {if (Badges.includes("Admin")) {return <p>Admin</p>}}}
        {()=> {if (Badges.includes("Moderator")) {return <p>Moderator</p>}}}
        {()=> {if (Badges.includes("Premium")) {return <p>Premium</p>}}}
        {()=> {if (Badges.includes("Newcomer")) {return <p>Newcomer</p>}}}
</div>