toeasy-front/src/lib/components/containers/SectionMenu.svelte

<script>
  import contractLight from '$lib/assets/icons/contract-light.svg';
  import contractDark from '$lib/assets/icons/contract-dark.svg';
  import issueLight from '$lib/assets/icons/issue-light.svg';
  import issueDark from '$lib/assets/icons/issue-dark.svg';
  import registerLight from '$lib/assets/icons/register-light.svg';
  import registerDark from '$lib/assets/icons/register-dark.svg';
  export let title;
  export let options = [];
</script>

<div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6 mb-8">
  <div class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">{title}</div>
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    {#each options as opt}
      <button class="flex items-center p-4 bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded hover:bg-gray-200 dark:hover:bg-gray-600 hover:border-blue-500 text-gray-800 dark:text-gray-100"
              on:click={opt.onClick}>
        {#if opt.icon === 'contract'}
          <img src={contractLight} alt="" aria-hidden="true" class="w-5 h-5 mr-3 inline-block dark:hidden" />
          <img src={contractDark} alt="" aria-hidden="true" class="w-5 h-5 mr-3 hidden dark:inline-block" />
        {:else if opt.icon === 'issue'}
          <img src={issueLight} alt="" aria-hidden="true" class="w-5 h-5 mr-3 inline-block dark:hidden" />
          <img src={issueDark} alt="" aria-hidden="true" class="w-5 h-5 mr-3 hidden dark:inline-block" />
        {:else if opt.icon === 'register'}
          <img src={registerLight} alt="" aria-hidden="true" class="w-5 h-5 mr-3 inline-block dark:hidden" />
          <img src={registerDark} alt="" aria-hidden="true" class="w-5 h-5 mr-3 hidden dark:inline-block" />
        {:else}
          <span class="mr-3">{opt.icon}</span>
        {/if}
        <span>{opt.label}</span>
      </button>
    {/each}
  </div>
</div>