<ul class="search-results">
  {{#each $searchResults.hashtags as hashtag}}
    <HashtagSearchResult :hashtag />
  {{/each}}
  {{#each $searchResults.accounts as account}}
    <AccountSearchResult :account />
  {{/each}}
  {{#each $searchResults.statuses as status, index}}
  <StatusSearchResult :status :index length="{{$searchResults.statuses.length}}"/>
  {{/each}}
</ul>
<style>
  .search-results {
    list-style: none;
    box-sizing: border-box;
    border: 1px solid var(--main-border);
    border-radius: 2px;
  }
</style>
<script>
  import { store } from '../../_store/store'
  import AccountSearchResult from './AccountSearchResult.html'
  import HashtagSearchResult from './HashtagSearchResult.html'
  import StatusSearchResult from './StatusSearchResult.html'

  export default {
    store: () => store,
    components: {
      AccountSearchResult,
      HashtagSearchResult,
      StatusSearchResult
    }
  }
</script>