Introduction

<script lang="ts" effect>
  import * as StockCard from "./ticker-card.ts";
  import { GetAllStocks, GetLivePrice } from "./tickers.remote.ts";
  import { GetUser } from "user.ts";
</script>

<ScrollArea>
  {const currency = $derived((yield* GetUser()).preferredCurrency)}

  {#each yield* GetAllStocks() as stock}
    {const liveQuery = yield* GetLivePrice(stock.ticker)}
    {const price = $derived(liveQuery.current ?? stock.initialPrice)}

    <StockCard.Root>
      <StockCard.Header>{stock.name}</StockCard.Header>
      <StockCard.Price>{price} {currency.displayName}</StockCard.Price>
    </StockCard.Root>
  {/each}
</ScrollArea>