Upgraded all components to vue 3 & typescript

src/components/popup/Detail.vue

@@ -7,52 +7,48 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      required: true
-    },
-    detail: {
-      required: false,
-      default: null
-    }
+<script setup lang="ts">
+  import { defineProps } from "vue";
+
+  interface Props {
+    title: string;
+    detail?: string | number;
   }
-};
+
+  defineProps<Props>();
 </script>
 
 <style lang="scss" scoped>
-@import "src/scss/media-queries";
+  @import "src/scss/media-queries";
 
-.movie-detail {
-  margin-bottom: 20px;
+  .movie-detail {
+    margin-bottom: 20px;
 
-  &:last-of-type {
-    margin-bottom: 0px;
-  }
+    &:last-of-type {
+      margin-bottom: 0px;
+    }
 
-  @include tablet-min {
-    margin-bottom: 30px;
-  }
+    @include tablet-min {
+      margin-bottom: 30px;
+    }
 
-  h2.title {
-    margin: 0;
-    font-weight: 400;
-    text-transform: uppercase;
-    font-size: 1.2rem;
-    color: var(--color-green);
+    h2.title {
+      margin: 0;
+      font-weight: 400;
+      text-transform: uppercase;
+      font-size: 1.2rem;
+      color: var(--color-green);
 
-    @include mobile {
-      font-size: 1.1rem;
+      @include mobile {
+        font-size: 1.1rem;
+      }
+    }
+
+    span.info {
+      font-weight: 300;
+      font-size: 1rem;
+      letter-spacing: 0.8px;
+      margin-top: 5px;
     }
   }
-
-  span.info {
-    font-weight: 300;
-    font-size: 1rem;
-    letter-spacing: 0.8px;
-    margin-top: 5px;
-  }
-}
 </style>