feat(dev): display products data

components/Dev.vue

@@ -60,33 +60,45 @@
 
       <div class="mx-4 mt-4 rounded-t text-sm text-gray-800">
         <button
-          class="rounded-t p-2 font-bold text-white"
+          class="rounded-t p-2 font-bold capitalize text-white"
           :class="{
-            'bg-gray-800 ': !displayDataset,
-            'bg-gray-600 ': displayDataset,
+            'bg-gray-800 ': activeItem === 'page',
+            'bg-gray-600 ': activeItem !== 'page',
           }"
-          @click="displayDataset = false"
+          @click="activeItem = 'page'"
         >
-          Section Data
+          {{ componentName }} Data
         </button>
 
         <button
-          v-if="dataset"
+          v-if="dataset && isContentProjection"
           class="rounded-t p-2 font-bold text-white"
           :class="{
-            'bg-gray-800 ': displayDataset,
-            'bg-gray-600 ': !displayDataset,
+            'bg-gray-800 ': activeItem === 'dataset',
+            'bg-gray-600 ': activeItem !== 'dataset',
           }"
-          @click="displayDataset = true"
+          @click="activeItem = 'dataset'"
         >
           Current Dataset
         </button>
+
+        <button
+          v-if="products"
+          class="rounded-t p-2 font-bold text-white"
+          :class="{
+            'bg-gray-800 ': activeItem === 'products',
+            'bg-gray-600 ': activeItem !== 'products',
+          }"
+          @click="activeItem = 'products'"
+        >
+          Products
+        </button>
       </div>
 
       <div
         class="mx-4 mb-4 flex-1 overflow-scroll rounded-b rounded-tr bg-gray-800 p-4 text-sm text-white"
       >
-        <pre>{{ displayDataset ? dataset : content }}</pre>
+        <pre>{{ devContent }}</pre>
       </div>
     </div>
 
@@ -95,21 +107,36 @@
       class="fixed inset-0 z-10 bg-black bg-opacity-50"
       @click="devComponentVisible = false"
     ></div>
-
-    <!--  -->
   </div>
 </template>
 
 <script setup lang="ts">
 import { Dataset } from "fsxa-api";
 
-defineProps<{
+const props = defineProps<{
   content: unknown;
   dataset?: Dataset | null;
   componentName?: string;
 }>();
 
+const { activeNavigationItem } = useNavigationData();
+const { findCachedProductsByRoute } = useContent();
+
 const devComponentVisible = ref(false);
 
-const displayDataset = ref(false);
+const activeItem = ref<"page" | "dataset" | "products">("page");
+
+const devContent = computed(() => {
+  if (activeItem.value === "dataset") {
+    return props.dataset;
+  } else if (activeItem.value === "products") {
+    return products.value;
+  } else return props.content;
+});
+
+const products = computed(() => findCachedProductsByRoute(useRoute().path));
+
+const isContentProjection = computed(
+  () => activeNavigationItem.value?.seoRouteRegex !== null
+);
 </script>

components/Section/Header.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="group relative h-64" data-testid="headerSection">
     <DevOnly v-if="appDevMode || envDevMode">
-      <Dev :content="data" class="hidden group-hover:block" />
+      <Dev
+        :content="data"
+        class="hidden group-hover:block"
+        component-name="Page Header"
+      />
     </DevOnly>
     <div
       class="absolute inset-0 flex flex-col justify-center bg-black bg-opacity-80 p-6 text-white md:p-12"

components/Section/Slider.vue

@@ -2,7 +2,11 @@
   <div data-testid="sliderSection">
     <div class="group relative">
       <DevOnly v-if="appDevMode || envDevMode">
-        <Dev :content="data" class="hidden group-hover:block" />
+        <Dev
+          :content="data"
+          class="hidden group-hover:block"
+          component-name="Slider"
+        />
       </DevOnly>
       <div v-if="activeSlide" class="realtive text-white">
         <div class="sliderButtonContainer left-0">

composables/content.ts

@@ -10,7 +10,7 @@ export function useContent() {
     return cachedDatasets.value[route];
   }
   function addToCachedDatasets(route: string, data: Dataset) {
-    if (!cachedPages.value[route]) cachedDatasets.value[route] = data;
+    if (!cachedDatasets.value[route]) cachedDatasets.value[route] = data;
   }
 
   const currentPage = useState<Page | null>("currentPage");
@@ -28,7 +28,7 @@ export function useContent() {
 
   const cachedProducts = useState<{
     [caasId: string]: Dataset[];
-  }>("cachedDatasets", () => ({}));
+  }>("cachedProducts", () => ({}));
 
   function findCachedProductsByRoute(route: string) {
     return cachedProducts.value[route];