initial grid setup

src/App.vue

@@ -20,6 +20,7 @@ const subscribeMessage = {
 };
 
 function websocketConnect() {
+  status.value = 'connecting';
   const socket = new WebSocket('wss://ws-feed.exchange.coinbase.com');
 
   socket.onopen = () => {

src/views/Grid.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { type Status, type TickerType } from '@/types/types';
+
+const props = defineProps<{
+  tickerData: TickerType[];
+  previousData: TickerType[];
+  status: Status;
+}>();
+
+const triangleFilter = ref('filterGreen');
+
+const tickData = props.tickerData;
+const prevData = props.previousData;
+const prevFilter = triangleFilter.value;
+
+onMounted(() => {
+  if (prevData.price > tickData.price) {
+    triangleFilter.value = 'filterRed';
+  } else if (prevData.price < tickData.price) {
+    triangleFilter.value = 'filterGreen';
+  } else {
+    triangleFilter.value = prevFilter;
+  }
+});
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <div v-if="props.status == 'connecting'" class="info">
+        <h1>ETH-USD</h1>
+        <h1 class="green price">Connecting...</h1>
+      </div>
+      <div v-else-if="props.status == 'connected'" class="info">
+        <h1>{{ props.tickerData.id }} (Coinbase)</h1>
+        <div class="value">
+          <img src="@/assets/triangle.svg" class="triangle" :class="triangleFilter" />
+          <h1 class="green price">${{ props.tickerData.price }}</h1>
+        </div>
+        <h1>Volume: ${{ props.tickerData.volume }}</h1>
+      </div>
+      <div v-else class="info">
+        <h1>Stock Tracker</h1>
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+header {
+  line-height: 1.5;
+}
+
+.info {
+  text-align: center;
+}
+
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.value {
+  display: inline-flex;
+  align-items: center;
+  text-align: center;
+}
+
+.triangle {
+  height: 30px;
+  width: auto;
+  position: relative;
+  top: -7px;
+}
+
+.price {
+  vertical-align: middle;
+}
+
+@media (min-width: 1024px) {
+  header {
+    display: flex;
+    place-items: center;
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .info {
+    text-align: left;
+  }
+}
+</style>