<script>
  import { List } from '@colorfuldots/svelteit'
  let fruitsArray = ["Apple", "Orange", "Plum"];
</script>

<List>
  {#each fruitsArray as item}
    <li>{item}</li>
  {/each}
</List>

<script>
  import { List } from '@colorfuldots/svelteit'
  let objectThings = {fruit:"Apple", kind:"Fuji", color:"Red"};
</script>

<List>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>

<script>
  import { List } from '@colorfuldots/svelteit'
  let objectThings = {fruit:"Apple", kind:"Fuji", color:"Red"};
</script>

<List primary>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List secondary>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List success>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List danger>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List warning>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List info>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List light>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>
<List dark>
  {#each Object.values(objectThings) as item}
    <li>{item}</li>
  {/each}
</List>

<script>
  import { List } from '@colorfuldots/svelteit'
  let users = [
    {
      id: 1,
      name: 'Sally',
      avatar: 'https://i.pravatar.cc/50',
      bio: 'This is me, Sally and I like people.',
      slug: 'javascript:void(0);',
    },
    {
      id: 2,
      name: 'Mary',
      avatar: 'https://i.pravatar.cc/50',
      bio: 'This is me, Mary and I like cats.',
      slug: 'javascript:void(0);',
    },
    {
      id: 3,
      name: 'Jane',
      avatar: 'https://i.pravatar.cc/50',
      bio: 'This is me, Jane and I like ice cream.',
      slug: 'javascript:void(0);',
    },
  ]
</script>

<List>
  {#each users as user}
    <li>
      <Image
        avatar
        title={user.name}
        img={user.avatar}
        height={45}
        width={45}
        linkRoute={user.slug} />
      <div style="display:inline-grid;margin-left:5px;">
        <h3>{user.name}</h3>
      </div>
    </li>
  {/each}
</List>