From 48e927f1e3bbde810f274faf057c086bec98df5a Mon Sep 17 00:00:00 2001
From: Lucas Viana <lv201122@gmail.com>
Date: Sat, 16 Nov 2024 13:44:00 -0300
Subject: [PATCH] Introduce sample layer component and experiment page

---
 layers/sample/components/WlComponentLayer.vue |  3 +++
 pages/experiments/index.vue                   |  4 ++++
 pages/experiments/nuxt/layers/index.vue       | 17 +++++++++++++++++
 3 files changed, 24 insertions(+)
 create mode 100644 layers/sample/components/WlComponentLayer.vue
 create mode 100644 pages/experiments/nuxt/layers/index.vue

diff --git a/layers/sample/components/WlComponentLayer.vue b/layers/sample/components/WlComponentLayer.vue
new file mode 100644
index 0000000..05dc2dd
--- /dev/null
+++ b/layers/sample/components/WlComponentLayer.vue
@@ -0,0 +1,3 @@
+<template>
+  <div>Component from the <code>sample</code> layer.</div>
+</template>
diff --git a/pages/experiments/index.vue b/pages/experiments/index.vue
index 3aa4196..45eae6e 100644
--- a/pages/experiments/index.vue
+++ b/pages/experiments/index.vue
@@ -124,6 +124,10 @@ const groups: ExperimentGroup[] = [
       {
         name: 'Error Handling',
         route: '/experiments/nuxt/error-handling'
+      },
+      {
+        name: 'Layers',
+        route: '/experiments/nuxt/layers'
       }
     ]
   }
diff --git a/pages/experiments/nuxt/layers/index.vue b/pages/experiments/nuxt/layers/index.vue
new file mode 100644
index 0000000..3bcde20
--- /dev/null
+++ b/pages/experiments/nuxt/layers/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <NuxtLayout name="home">
+    <WlContainer class="flex flex-col gap-3 p-3">
+      <h1 class="text-xl">Layers</h1>
+      <p>A component from the <code>sample</code> layer:</p>
+      <WlExperimentCanvas>
+        <WlComponentLayer/>
+      </WlExperimentCanvas>
+    </WlContainer>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import WlExperimentCanvas from '~/components/shared/experiments/WlExperimentCanvas.vue'
+import WlContainer from '~/components/shared/layout/WlContainer.vue'
+import WlComponentLayer from '~/layers/sample/components/WlComponentLayer.vue'
+</script>