AdventureLog/src/lib/components/AdventureCard.svelte

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import locationDot from "$lib/assets/locationDot.svg";
  import calendar from "$lib/assets/calendar.svg";
  const dispatch = createEventDispatcher();

  export let type: String;

  export let name: String;
  export let location: String;
  export let created: string;
  export let id: Number;

  function remove() {
    dispatch("remove", id);
  }
  function edit() {
    dispatch("edit", id);
  }
  function add() {
    dispatch("add", { name, location });
  }
</script>

{#if type === "mylog"}
  <div
    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
  >
    <div class="card-body">
      <h2 class="card-title overflow-ellipsis">{name}</h2>
      {#if location !== ""}
        <p>
          <img
            src={locationDot}
            class="inline-block -mt-1 mr-1"
            alt="Logo"
          />{location}
        </p>
      {/if}
      {#if created !== ""}
        <p>
          <img
            src={calendar}
            class="inline-block -mt-1 mr-1"
            alt="Logo"
          />{created}
        </p>
      {/if}
      <div class="card-actions justify-end">
        <button class="btn btn-primary" on:click={edit}>Edit</button>
        <button class="btn btn-secondary" on:click={remove}>Remove</button>
      </div>
    </div>
  </div>
{/if}

{#if type === "featured"}
  <div
    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
  >
    <div class="card-body">
      <h2 class="card-title overflow-ellipsis">{name}</h2>
      {#if location != ""}
        <p>
          <img
            src={locationDot}
            class="inline-block -mt-1 mr-1"
            alt="Logo"
          />{location}
        </p>
      {/if}
      <div class="card-actions justify-end">
        <button class="btn btn-primary" on:click={add}>Add</button>
      </div>
    </div>
  </div>
{/if}