making real componentsi with svelte

gistfile1.txt

<script>
  // core components
  import TableTitle from "components/Cards/TableTitle.svelte";  
  import TableHead from "components/Cards/TableHead.svelte";
  import TableData from "components/Cards/TableData.svelte";
  import TableDropdown from "components/Dropdowns/TableDropdown.svelte";  
  import { onMount } from "svelte";
  import { getMemberList } from "../../services/kkk";

  let committees

  // Get the data from the api, after the page is mounted.
   onMount(async () => {
    const res = await getMemberList();
    committees = res;    
  });
 
  // can be one of light or dark
  let color = "light";
</script>
<div class="flex flex-wrap mt-4">
  <div class="w-full mb-12 px-4">
    <div
    class="relative flex flex-col min-w-0 break-words w-full mb-6 shadow-lg rounded {color === 'light' ? 'bg-white' : 'bg-red-800 text-white'}"
    >
    
    <TableTitle>Members</TableTitle>

    {#if committees }
    <div class="block w-full overflow-x-auto">
  
    <table class="items-center w-full bg-transparent border-collapse">
      <thead>        
        <tr>          
          <TableHead>Name</TableHead>
          <TableHead>Location</TableHead>       
          <TableHead>Join Date</TableHead>
          <TableHead>Status</TableHead>                
        </tr>       
      </thead>

      <tbody>
        {#each committees as committee }
        <tr>          
          <TableData>{ committee.fullname}</TableData>                
          <TableData>{ committee.contact}</TableData>      
          <TableData>{ committee.year}</TableData>    
          <TableData>
            <i class="fas fa-circle text-orange-500 mr-2"></i> pending
          </TableData>        
          <td
            class="border-t-0 px-6 align-middle border-l-0 border-r-0 text-xs whitespace-nowrap p-4 text-right"
          > 
          <TableDropdown />
          </td>
        </tr>
        {/each}          
      </tbody>
      </table>
    </div>
  {:else}
    <p class="loading">loading...</p>
  {/if}
</div>    
</div>  
</div>