Merge pull request #126 from BacktrackAcademy/patch-minor

Patch minor

Author: fbarriosCL

components/MultiSelect.vue

@@ -6,9 +6,14 @@ import { cn } from '@/lib/utils'
 import { X } from 'lucide-vue-next'
 import { computed, ref } from 'vue'
 
+interface Option {
+  value: string
+  label: string
+}
+
 // Definición de las props
 const props = defineProps<{
-  options: { value: string, label: string }[]
+  options: Option[]
   selected: string[]
   placeholder?: string
   searchPlaceholder?: string

components/auth/UserAuthForm.vue

@@ -35,7 +35,7 @@ function handleSubmit() {
           <input
             id="email"
             v-model="userInfo.email"
-            class="pl-2 outline-none border-none w-full"
+            class="pl-2 outline-none border-none w-full text-secondary"
             type="email"
             placeholder="mail@example.com"
             required
@@ -54,7 +54,7 @@ function handleSubmit() {
               <input
                 id="password"
                 v-model="userInfo.password"
-                class="pl-2 outline-none border-none w-full"
+                class="pl-2 outline-none border-none w-full text-secondary"
                 :type="showPassword ? 'text' : 'password'"
                 placeholder="Ingresar contraseña"
                 required

components/courses/Course.vue components/courses/CourseCard.vuecomponents/courses/Course.vue renamed to components/courses/CourseCard.vue

@@ -1,14 +1,9 @@
 <script setup lang="ts">
-interface Course {
-  slug: string
-  image_thumb: string
-  titulo: string
-  shortdes: string
-  total_duration_text: string
-  price: number | null
-}
+import type { Course } from '~/interfaces/courses.response'
 
 defineProps<{ course: Course }>()
+
+const { convertToHours } = useFormatter()
 </script>
 
 <template>
@@ -30,7 +25,7 @@ defineProps<{ course: Course }>()
           >
         </figure>
         <!-- Card Content -->
-        <div class="flex-grow flex flex-col p-5">
+        <div class="flex-grow flex flex-col p-4">
           <!-- Card body -->
           <div class="flex-grow">
             <!-- Header -->
@@ -57,12 +52,18 @@ defineProps<{ course: Course }>()
           <!-- Card footer -->
           <div class="flex justify-between items-center">
             <p class="font-inconsolata text-sm text-gray-400">
-              {{ course.total_duration_text }}
+              {{ convertToHours(course.total_duration_text) }}
             </p>
-            <div v-if="course.price === 0 || course.price === null" class="font-semibold text-sm inline-flex items-center justify-center px-4 py-2 rounded-lg transition-colors duration-150 ease-in-out bg-bta-pink/95 hover:bg-bta-pink text-white">
+            <div
+              v-if="course.price === 0 || course.price === null"
+              class="font-semibold text-sm inline-flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-300 ease-in-out bg-bta-pink/95 hover:bg-bta-pink hover:scale-105 hover:-translate-y-1 text-white"
+            >
               Gratis
             </div>
-            <div v-else class="font-semibold text-sm inline-flex items-center justify-center px-4 py-2 rounded-lg transition-colors duration-150 ease-in-out bg-bta-pink/95 hover:bg-bta-pink text-white">
+            <div
+              v-else
+              class="font-semibold text-sm inline-flex items-center justify-center px-4 py-2 rounded-lg transition-all duration-300 ease-in-out bg-bta-pink/95 hover:bg-bta-pink hover:scale-105 hover:-translate-y-1 text-white"
+            >
               $ {{ course.price }}
             </div>
           </div>
@@ -106,4 +107,15 @@ defineProps<{ course: Course }>()
   clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
   text-shadow: 2px 0 #00fff9;
 }
+
+/* Animación suave para el precio */
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+.hover\:scale-105:hover {
+  transform: scale(1.05) translateY(-0.25rem);
+}
 </style>

components/ui/input/Input.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input v-model="modelValue" :class="cn('flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)">
+</template>

components/ui/input/index.ts

@@ -0,0 +1 @@
+export { default as Input } from './Input.vue'

composables/useFormatter.ts

@@ -0,0 +1,21 @@
+export function useFormatter() {
+  function convertToHours(duration: string): string {
+    // Si no hay duración, retornar un valor por defecto
+    if (!duration)
+      return '0h 0m'
+
+    // Extraer los números de la cadena y convertirlos a números
+    const numbers = (duration.match(/\d+/g) || [])
+    const totalMinutes = numbers.reduce((acc, curr) => acc + Number(curr), 0)
+
+    // Convertir minutos a horas y minutos
+    const hours = Math.floor(totalMinutes / 60)
+    const minutes = totalMinutes % 60
+
+    return `${hours ? `${hours}h` : ''} ${minutes ? `${minutes}m` : ''}`.trim() || '0h 0m'
+  }
+
+  return {
+    convertToHours,
+  }
+}

interfaces/courses.response.ts

@@ -0,0 +1,50 @@
+export interface CoursesResponse {
+  courses: Course[]
+  pagination: Pagination
+}
+
+export interface Course {
+  id: number
+  titulo: string
+  descripcion: string
+  created_at: string
+  updated_at: string
+  user_id: number
+  is_free: boolean
+  shortdes: string
+  level_id: number
+  price: number
+  is_active: boolean
+  slug: string
+  is_notified: boolean
+  coming_soon: boolean
+  category_id: number
+  primary_color: string
+  metatag: string
+  pageviews: number
+  students: number
+  number_videos: number
+  outdated: boolean
+  timer: string
+  total_duration_text: string
+  total_duration_seconds: number
+  teacher: {
+    name: string
+    lastname: string
+    username: string
+    aboutme: string
+    ranking: number
+    headline: string
+    avatar_url: string
+    avatar_url_sidebar: string
+  }
+  image_thumb: string
+  level_name: string
+}
+
+export interface Pagination {
+  current_page: number
+  per_page: number
+  total_entries: number
+  total_pages: number
+}