diff --git a/index.html b/index.html index 963c4ce4..5fdd423a 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Documentacion ui-kit eclass diff --git a/src/documentation/pages/Organisms/Events.tsx b/src/documentation/pages/Organisms/Events.tsx index 90ffcb4c..7f2cf051 100644 --- a/src/documentation/pages/Organisms/Events.tsx +++ b/src/documentation/pages/Organisms/Events.tsx @@ -1,33 +1,137 @@ import { FC } from 'react' import { MyHeading, MyText, MyTittle, Code } from '@/documentation/components' -// import { dataFake } from '@/organisms/CourseList/utils' +import { Eventos } from '@/organisms/Events' +import { Box } from '@chakra-ui/react' -// const dataFakeEvents = [] +const dataFakeEvents = [ + { + typeEvent: 'LARGE_EVENTS', // Nombre del tipo de evento + itemsEvent: { + id: '1', // ID Secuencial + eventTitle: 'Resuelve tus dudas en vivo | Martes', + startDate: '04/27/2024', // Si llega en el formato mejor + startTime: '14:00 hrs', // puede llegar la hora sola o con el texto + buttonInfo: 'Ver información del evento', + redirect: 'https://.....', // Enlace de redirección al evento o ruta + eventImage: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU', // Imagen del evento + isMobile: false, // Si es mobile o no + }, + }, + { + typeEvent: 'LARGE_EVENTS', // Nombre del tipo de evento + itemsEvent: { + id: '1', // ID Secuencial + eventTitle: 'Resuelve tus dudas en vivo | Martes', + startDate: '04/27/2024', // Si llega en el formato mejor + startTime: '14:00 hrs', // puede llegar la hora sola o con el texto + buttonInfo: 'Ver información del evento', + redirect: 'https://.....', // Enlace de redirección al evento o ruta + eventImage: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU', // Imagen del evento + isMobile: true, // Si es mobile o no + }, + }, + { + typeEvent: 'SMALL_EVENTS', // Nombre del tipo de evento + itemsEvent: { + id: '1', // ID Secuencial + eventTitle: 'Resuelve tus dudas en vivo | Martes', + startDate: '04/27/2024', // Si llega en el formato mejor + startTime: '14:00 hrs', // puede llegar la hora sola o con el texto + buttonInfo: 'Ver información del evento', + redirect: 'https://.....', // Enlace de redirección al evento o ruta + eventImage: + 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU', // Imagen del evento + isMobile: true, // Si es mobile o no + }, + }, +] -const Events: FC = () => { +const EventsPage: FC = () => { return ( <> - Events + Eventos - Las alertas embebidas se utiliza en contextos en los que es necesario que el usuario pueda - visualizar cada vez que lo necesite el feedback o estado de una solicitud al sistema - - (Ej: El estado de una clase en vivo ya agendada, alertar sobre condiciones para repetir - una evaluación, etc) - + Los eventos estan contenidos en una nueva caja, la cual cuenta con 3 disenios distintos + agrupados en dos tipos + LARGE_EVENTS y SMALL_EVENTS. + LARGE_EVENTS: contiene un responsive para mobile y desktop. - + Types Definidos + El componente Eventos requiere el siguiente typado: + + Se deja en espanol debido a que Event es una funcion nativa + + Estados - Existen 4 posibles estados que definen el ícono y color de la alerta. + Existen 3 posibles estados que definen el diseño del evento. + + + LARGE_EVENTS + + + + LARGE_EVENTS para Mobile + + + + SMALL_EVENTS o por defecto + + + + Modo de uso + + El Evento se utiliza de manera bastante simple siguiendo el siguiente ejemplo: + + ) } -export default Events +export default EventsPage diff --git a/src/documentation/pages/Organisms/Resources.tsx b/src/documentation/pages/Organisms/Resources.tsx index 7ab1acb7..628b59a4 100644 --- a/src/documentation/pages/Organisms/Resources.tsx +++ b/src/documentation/pages/Organisms/Resources.tsx @@ -1,4 +1,5 @@ import { FC } from 'react' +import { Box } from '@chakra-ui/react' import { MyHeading, MyText, MyTittle, MyLink, Code } from '@/documentation/components' import { Resources } from '@/organisms/Resources' @@ -10,7 +11,6 @@ const dataFakeEvents = [ resourceDetail: 'Fechas importantes de tus cursos', resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf', resourceTextDownload: 'Descargar', - resourceNameFile: 'Calendario semestral', }, { id: '1', @@ -19,7 +19,6 @@ const dataFakeEvents = [ resourceDetail: 'Fechas importantes de tus cursos', resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf', resourceTextDownload: 'Descargar', - resourceNameFile: 'Calendario semestral', }, ] @@ -28,7 +27,7 @@ const ResourcesPage: FC = () => { <> Resource - Los recursos son casos que se usan para mostrar información relevante para el usuario del + Los recursos son cajas que se usan para mostrar información relevante para el usuario del recurso disponible para descargar, estos estan en diferentes formatos y estan adaptados para que segun sea el formato definido en{' '} @@ -55,9 +54,10 @@ const ResourcesPage: FC = () => { `} /> - - - + + + + Tipos de iconos en los recursos disponibles diff --git a/src/organisms/Events/Eventos.tsx b/src/organisms/Events/Eventos.tsx new file mode 100644 index 00000000..3ab4e6fb --- /dev/null +++ b/src/organisms/Events/Eventos.tsx @@ -0,0 +1,12 @@ +import { FC } from 'react' +import { EventosProps } from './EventsTypes' +import { SmallBox, LargeBox } from './TypeBox' + +export const Eventos: FC = ({ typeEvent, itemsEvent }) => { + // Retornamos tipo de caja evento + if (typeEvent === 'LARGE_EVENTS') { + return + } else { + return + } +} diff --git a/src/organisms/Events/Events.tsx b/src/organisms/Events/Events.tsx deleted file mode 100644 index f373a0d8..00000000 --- a/src/organisms/Events/Events.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { FC } from 'react' - -export const Events: FC = () => { - return
Hola soy un Evento
-} diff --git a/src/organisms/Events/EventsTypes.d.ts b/src/organisms/Events/EventsTypes.d.ts new file mode 100644 index 00000000..8cc9c660 --- /dev/null +++ b/src/organisms/Events/EventsTypes.d.ts @@ -0,0 +1,17 @@ +export interface EventosProps { + typeEvent: 'SMALL_EVENTS' | 'LARGE_EVENTS' | string + isMobile?: boolean + itemsEvent: ItemsEventsProps +} + +export interface ItemsEventsProps { + id: string + eventTitle: string + startDate: string + startTime: string + buttonInfo: string + redirect: string + eventImage: string + targetBlank?: boolean + isMobile?: boolean +} diff --git a/src/organisms/Events/Icons/Calendar.tsx b/src/organisms/Events/Icons/Calendar.tsx new file mode 100644 index 00000000..3db20269 --- /dev/null +++ b/src/organisms/Events/Icons/Calendar.tsx @@ -0,0 +1,29 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +interface CalendarProps { + color?: string +} + +export const Calendar: FC = ({ color = 'white' }) => { + return ( + + + + + + + + + + ) +} diff --git a/src/organisms/Events/Icons/Clock.tsx b/src/organisms/Events/Icons/Clock.tsx new file mode 100644 index 00000000..46c93518 --- /dev/null +++ b/src/organisms/Events/Icons/Clock.tsx @@ -0,0 +1,25 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +interface ClockProps { + color?: string +} + +export const Clock: FC = ({ color = 'white' }) => { + return ( + + + + ) +} diff --git a/src/organisms/Events/Icons/index.ts b/src/organisms/Events/Icons/index.ts new file mode 100644 index 00000000..78b6ca55 --- /dev/null +++ b/src/organisms/Events/Icons/index.ts @@ -0,0 +1,2 @@ +export * from './Calendar' +export * from './Clock' diff --git a/src/organisms/Events/TypeBox/LargeBox.tsx b/src/organisms/Events/TypeBox/LargeBox.tsx new file mode 100644 index 00000000..13de7b9d --- /dev/null +++ b/src/organisms/Events/TypeBox/LargeBox.tsx @@ -0,0 +1,83 @@ +import { FC } from 'react' +import { Box, Flex, Text, Link } from '@chakra-ui/react' +import { ItemsEventsProps } from '../EventsTypes' +import { vars } from '@/theme' +import { Calendar, Clock } from '../Icons' + +export const LargeBox: FC = ({ + id, + eventTitle, + startDate, + startTime, + buttonInfo, + redirect, + eventImage, + targetBlank, + isMobile, +}) => { + return ( + + + + + + {eventTitle} + + + {startDate} + | + + {startTime} + + + + {buttonInfo} + + + + + ) +} diff --git a/src/organisms/Events/TypeBox/SmallBox.tsx b/src/organisms/Events/TypeBox/SmallBox.tsx new file mode 100644 index 00000000..701767d6 --- /dev/null +++ b/src/organisms/Events/TypeBox/SmallBox.tsx @@ -0,0 +1,87 @@ +import { FC } from 'react' +import { Box, Text, Link } from '@chakra-ui/react' +import { vars } from '@/theme' +import { ItemsEventsProps } from '../EventsTypes' +import { Calendar, Clock } from '../Icons' + +export const SmallBox: FC = ({ + id, + eventTitle, + startDate, + startTime, + buttonInfo, + redirect, + eventImage, + targetBlank, +}) => { + return ( + + + + + {eventTitle} + + + {startDate} + | + + {startTime} + + + + + {buttonInfo} + + + + ) +} diff --git a/src/organisms/Events/TypeBox/index.ts b/src/organisms/Events/TypeBox/index.ts new file mode 100644 index 00000000..bfb6f6ad --- /dev/null +++ b/src/organisms/Events/TypeBox/index.ts @@ -0,0 +1,2 @@ +export * from './LargeBox' +export * from './SmallBox' diff --git a/src/organisms/Events/index.ts b/src/organisms/Events/index.ts index b4d4184b..8edbc780 100644 --- a/src/organisms/Events/index.ts +++ b/src/organisms/Events/index.ts @@ -1 +1 @@ -export * from './Events' +export * from './Eventos' diff --git a/src/organisms/Resources/Resources.tsx b/src/organisms/Resources/Resources.tsx index 3cc01546..f050c2bc 100644 --- a/src/organisms/Resources/Resources.tsx +++ b/src/organisms/Resources/Resources.tsx @@ -11,7 +11,7 @@ interface ResourcesProps { resourceDetail: string resourceTextDownload: string resourceLink: string - resourceNameFile: string + targetBlank?: boolean } export const Resources: FC = ({ @@ -21,63 +21,71 @@ export const Resources: FC = ({ resourceDetail, resourceTextDownload, resourceLink, - resourceNameFile, + targetBlank, }) => { return ( - - - + + + + + + + {resourceTitle} + + + + + {resourceDetail} + + + + + + {resourceTextDownload} + + - - - {resourceTitle} - - - - - {resourceDetail} - - - - - - {resourceTextDownload} - - - + ) }