changes

app/pages/index.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts">
 
-  const video = ref(1);
+  const video = ref(0);
+  const url = ref("");
+  const in_url = ref("");
+
+  function get_yt_vid() {
+    url.value = in_url.value
+    video.value = 1
+  }
 
 </script>
 
 <template>
-    <MainHeader :ui_colors="ui_colors_dropdown"/>
+    <MainHeader/>
     <div class="justify-center flex flex-col mt-4 mb-4 w-full">
         <h1 class="inter font-bold text-center mt-3 mb-3 text-white white-glow max-sm:text-5xl sm:text-6xl md:text-7xl xl:text-8xl rgb-text">Youtube to MP3</h1>
 
@@ -13,9 +20,10 @@
         <UInput
             class="self-center geist-mono mt-3 mb-3 max-md:w-3/4 w-2/3 2xl:w-1/2" 
             :ui="{ base: 'rounded-2xl h-15 text-toned', trailing: 'p-0' }"
-            placeholder="Search for a YouTube video..." >
+            placeholder="Search for a YouTube video..."
+            v-model="in_url" >
             <template #trailing>
-              <UButton class="self-end rounded-r-2xl h-15 px-3" icon="lucide:search" />
+              <UButton class="self-end rounded-r-2xl h-15 px-3" icon="lucide:search" @click="get_yt_vid" />
             </template>
         </UInput>
         
@@ -24,11 +32,11 @@
     <div class="w-full max-w-md mx-auto mt-8 p-6 light:bg-zinc-50 dark:bg-zinc-950 rounded-xl" v-if="video">
         
       <div class="video-container">
-          <LazyYoutube src="https://www.youtube.com/watch?v=-B48W6H2YHE&list=RD-B48W6H2YHE&start_radio=1" />
+          <LazyYoutube :src="url" />
       </div>
 
       <UFormField id="videoUrl" class="w-full mt-3 mb-4" label="Video URL:" >
-          <UInput type="text" value="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="w-full" />
+          <UInput type="text" :value="url" class="w-full" />
       </UFormField>
       <UFormField id="outputFile" class="w-full mt-4 mb-3" label="Output File Name:">
           <UInput type="text" value="my_audio.mp3" class="w-full" />