Format project

src/components/ImageWithFallback.vue

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  size: 'w300'
+  size: 'w300',
 })
 
 const imageLoadFailed = ref(false)

src/components/LoadingSpinner.vue

@@ -6,12 +6,10 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
-  color: 'primary'
+  color: 'primary',
 })
 </script>
 
 <template>
-  <span 
+  <span :class="`loading loading-ring loading-${props.size} text-${props.color}`"></span>
-    :class="`loading loading-ring loading-${props.size} text-${props.color}`"
+</template>
-  ></span>
-</template>

src/components/MediaDetails.vue

@@ -39,11 +39,7 @@ const alreadyAdded = computed(() =>
   >
     <!-- Poster -->
     <ImageWithFallback
-      :src="
+      :src="type === 'movie' ? props.movie!.PosterPath : props.tvSeries!.PosterPath"
-        type === 'movie'
-          ? props.movie!.PosterPath
-          : props.tvSeries!.PosterPath
-      "
       alt="Poster"
       size="w500"
       class="shrink-0 w-full max-w-sm rounded-lg shadow-lg transform transition-transform duration-500 hover:scale-105"

src/components/MediaList.vue

@@ -9,11 +9,11 @@ const props = defineProps<{
   isSearch: boolean
 }>()
 
-const emit = defineEmits<{ 
+const emit = defineEmits<{
-  (e: 'loaded', id: string): void; 
+  (e: 'loaded', id: string): void
-  (e: 'loadMore'): void;
+  (e: 'loadMore'): void
-  (e: 'add-media', media: MediaType): void;
+  (e: 'add-media', media: MediaType): void
-  (e: 'remove-media', mediaId: number): void;
+  (e: 'remove-media', mediaId: number): void
 }>()
 </script>
 
@@ -35,8 +35,8 @@ const emit = defineEmits<{
       class="grid gap-4 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
     >
       <li v-for="media in props.medias" :key="media.Id" v-auto-animate>
-        <MediaCard 
+        <MediaCard
-          :media="media" 
+          :media="media"
           @add-media="$emit('add-media', $event)"
           @remove-media="$emit('remove-media', $event)"
         />

src/components/MediaTypeBadge.vue

@@ -5,14 +5,14 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  type: 'primary'
+  type: 'primary',
 })
 </script>
 
 <template>
-  <span 
+  <span
     :class="`px-3 py-1 rounded-md text-sm bg-linear-to-r from-gray-100 to-gray-200 ${type ? 'badge-' + type : ''} text-gray-700 border border-gray-300`"
   >
     {{ props.text }}
   </span>
-</template>
+</template>

src/lib/api.ts

@@ -7,7 +7,7 @@ import { mapTvSeriesDetails } from '@/types/TvSeriesMap'
 import axios from 'axios'
 
 const TMDB_READ_API_KEY =
-  'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzZjY3MDNmM2UyYTBiMmI0MGZlNGZiYjNlMTU0NjI0NCIsIm5iZiI6MTc2MDU3NDcwNi45MjQsInN1YiI6IjY4ZjAzY2YyNGZmNGM0NjI1NmM3N2EyNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.HHReb_7Oue_o1wkgH2mmbCgdMJ8buFfRdCtwQqj_1Us' // I know this should not be here and I dont care
+  'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIzZjY3MDNmM2UyYTBiMmI0MGZlNGZiYjNlMTU0NjI0NCIsIm5iZiI6MTc2MDU3NDcwNi45MjQsInN1YiI6IjY4ZjAzY2YyNGZmNGM0NjI1NmM3N2EyNyIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.HHReb_7Oue_o1wkgH2mmbCgdMJ8buFfRdCtwQqj_1Us' // This is a read only key and I dont see the need for hiding it, ONLY IN THIS PARTICULAR CASE
 
 const instance = axios.create({
   baseURL: 'https://api.themoviedb.org/3',