studio v1

app/pages/studio.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="flex flex-wrap justify-center">
+    <div class="bg-page-dark-bg text-white">
+      <div class="flex flex-col-reverse bg-gradient-to-r from-primary to-primary-dark">
+        <div class="mt-8 flex flex-wrap justify-center">
+          <box :compilation="compilation" :position="currentPosition" :size="size" />
+          <div class="devtool  absolute right-4 text-white bg-black rounded-2xl px-4 py-2">
+            <button @click="currentPosition = poser">poser</button>
+            <button @click="currentPosition = face">face</button>
+            <button @click="currentPosition = dos">dos</button>
+            <div class="w-full block">
+              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color1">
+              <input class="w-1/2" type="color" name="color1" id="color1" v-model="compilation.color2">
+              <div class="block w-full h-32" :style="{
+                background: `linear-gradient(to top, ${compilation.color1}, ${compilation.color2})`
+              }">
+              </div>
+              <label class="block">
+                size: {{ size }}
+                <input v-model.number="size" type="range" step="1" min="1" max="14">
+              </label>
+            </div>
+            <div>
+              <label class="block">
+                X: {{ currentPosition.x }}
+                <input v-model.number="currentPosition.x" type="range" step="1" min="-180" max="180">
+              </label>
+              <label class="block">
+                Y: {{ currentPosition.y }}
+                <input v-model.number="currentPosition.y" type="range" step="1" min="-180" max="180">
+              </label>
+              <label class="block">
+                Z: {{ currentPosition.z }}
+                <input v-model.number="currentPosition.z" type="range" step="1" min="-180" max="180">
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { BoxPosition } from '~~/types/types'
+
+const compilation = ref({
+  id: 'ES00A',
+  name: 'zero',
+  duration: 2794,
+  description: 'Zero is for manifesto',
+  color1: '#ffffff',
+  color2: '#48959d',
+})
+
+const poser = { x: 76, y: 0, z: 150 }
+const face = { x: -20, y: 20, z: 0 }
+const dos = { x: -20, y: 200, z: 0 }
+
+const size = ref(6)
+
+const currentPosition: Ref<BoxPosition> = ref(poser)
+
+//from-slate-800 to-zinc-900 
+</script>