Refactor: Migrar UI completa a Tailwind CSS v4 + shadcn-vue
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 58s
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 58s
- Reemplazar CSS nativo con Tailwind CSS v4 y utilidades custom - Crear librería de componentes UI basada en shadcn-vue (Radix Vue) - Componentes UI: Button, Card, Input, Textarea, Badge, Dialog, Avatar, DropdownMenu - Migrar todos los componentes existentes a Tailwind utilities - Convertir EventCard.js (htm) a EventCard.vue (SFC) - Implementar sistema de temas dark/light con clase .dark - Mantener efectos glassmorphism via @utility custom - Eliminar styles.css legacy
This commit is contained in:
27
frontend/src/components/ui/card/Card.vue
Normal file
27
frontend/src/components/ui/card/Card.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const props = defineProps({
|
||||
class: String,
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: (v) => ['default', 'glass', 'panel'].includes(v)
|
||||
}
|
||||
});
|
||||
|
||||
const variantClasses = {
|
||||
default: 'glass-card shadow-md hover:shadow-lg transition-shadow',
|
||||
glass: 'glass glass-border rounded-lg',
|
||||
panel: 'glass-panel border border-pink-200 dark:border-pink-600/50'
|
||||
};
|
||||
|
||||
const classes = computed(() => cn(variantClasses[props.variant], props.class));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :class="classes">
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user