Upgraded all components to vue 3 & typescript

src/components/CastList.vue

@@ -1,44 +1,45 @@
 <template>
   <div class="cast">
     <ol class="persons">
-      <CastListItem v-for="person in cast" :person="person" :key="person.id" />
+      <CastListItem
+        v-for="credit in cast"
+        :creditItem="credit"
+        :key="credit.id"
+      />
     </ol>
   </div>
 </template>
 
-<script>
-import CastListItem from "src/components/CastListItem";
+<script setup lang="ts">
+  import { defineProps } from "vue";
+  import CastListItem from "src/components/CastListItem.vue";
+  import type { MediaTypes, CreditTypes } from "../interfaces/IList";
 
-export default {
-  name: "CastList",
-  components: { CastListItem },
-  props: {
-    cast: {
-      type: Array,
-      required: true
-    }
+  interface Props {
+    cast: Array<MediaTypes | CreditTypes>;
   }
-};
+
+  defineProps<Props>();
 </script>
 
 <style lang="scss">
-.cast {
-  position: relative;
-  top: 0;
-  left: 0;
+  .cast {
+    position: relative;
+    top: 0;
+    left: 0;
 
-  ol {
-    overflow-x: scroll;
-    padding: 0;
-    list-style-type: none;
-    margin: 0;
-    display: flex;
+    ol {
+      overflow-x: scroll;
+      padding: 0;
+      list-style-type: none;
+      margin: 0;
+      display: flex;
 
-    scrollbar-width: none; /* for Firefox */
+      scrollbar-width: none; /* for Firefox */
 
-    &::-webkit-scrollbar {
-      display: none; /* for Chrome, Safari, and Opera */
+      &::-webkit-scrollbar {
+        display: none; /* for Chrome, Safari, and Opera */
+      }
     }
   }
-}
 </style>