animations + cards

app/pages/studio.vue

@@ -3,11 +3,11 @@
     <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" />
+          <molecule-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>
+            <button @click="currentPosition = boxPositions.side">side</button>
+            <button @click="currentPosition = boxPositions.front">front</button>
+            <button @click="currentPosition = boxPositions.back">back</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">
@@ -37,14 +37,16 @@
           </div>
         </div>
       </div>
+      <molecule-card :track="track" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { BoxPosition } from '~~/types/types'
+import type { BoxPosition, Compilation, Track } from '~~/types/types'
+import { boxPositions } from '~/store/position'
 
-const compilation = ref({
+const compilation = ref<Compilation>({
   id: 'ES00A',
   name: 'zero',
   duration: 2794,
@@ -54,13 +56,24 @@ const compilation = ref({
   color3: '#00ff00',
 })
 
-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 track = ref<Track>({
+  id: 1,
+  compilationId: 'ES00A',
+  title: 'The grinding wheel',
+  artist: {
+    id: 0,
+    name: 'L\'Efondras',
+    url: '',
+    coverId: '0024705317',
+  },
+  start: 0,
+  url: 'https://arakirecords.bandcamp.com/track/the-grinding-wheel',
+  coverId: 'a3236746052',
+})
 
 const size = ref(6)
 
-const currentPosition: Ref<BoxPosition> = ref(poser)
+const currentPosition: Ref<BoxPosition> = ref(boxPositions.side)
 
 //from-slate-800 to-zinc-900 
 </script>