<script>
  import { get } from 'svelte/store';

	import HeroHeader from '$lib/components/HeroHeader.svelte';
	import Search from '$lib/components/search/Search.svelte';
  import { requestStore } from '$lib/stores/use-request';
	import Space from '$lib/components/result/space/Space.svelte';

  let data = get(requestStore);

  requestStore.subscribe((v) => {
    data = v;
  });
</script>

<div class="container w-full grid grid-cols-1 gap-8">
  <HeroHeader />
  <Search />
  {#if data?.data}
    <div class="w-full grid grid-cols-1 gap-8 max-w-7xl mx-auto">
      <Space data={data.data} />
    </div>
  {/if}
</div>
