diff --git a/src/documentation/pages/Organisms/Events.tsx b/src/documentation/pages/Organisms/Events.tsx new file mode 100644 index 00000000..90ffcb4c --- /dev/null +++ b/src/documentation/pages/Organisms/Events.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react' +import { MyHeading, MyText, MyTittle, Code } from '@/documentation/components' +// import { dataFake } from '@/organisms/CourseList/utils' + +// const dataFakeEvents = [] + +const Events: FC = () => { + return ( + <> + Events + + 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) + + + + + Estados + Existen 4 posibles estados que definen el ícono y color de la alerta. + + + ) +} + +export default Events diff --git a/src/documentation/pages/Organisms/Resources.tsx b/src/documentation/pages/Organisms/Resources.tsx new file mode 100644 index 00000000..7ab1acb7 --- /dev/null +++ b/src/documentation/pages/Organisms/Resources.tsx @@ -0,0 +1,97 @@ +import { FC } from 'react' +import { MyHeading, MyText, MyTittle, MyLink, Code } from '@/documentation/components' +import { Resources } from '@/organisms/Resources' + +const dataFakeEvents = [ + { + id: '1', + resourceType: 'xlsx', + resourceTitle: 'Calendario semestral', + 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', + resourceType: 'pdf', + resourceTitle: 'Calendario semestral', + resourceDetail: 'Fechas importantes de tus cursos', + resourceLink: 'https://www.oas.org/juridico/spanish/mesicic2_col_ley_30_sp.pdf', + resourceTextDownload: 'Descargar', + resourceNameFile: 'Calendario semestral', + }, +] + +const ResourcesPage: FC = () => { + return ( + <> + Resource + + Los recursos son casos 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{' '} + + Figma recursos + {' '} + correspondan + + (Ej: En el caso de que se quiera descargar un recurso pdf, tendra un icono pdf + correspondiente) + + + Types Definidos + El componente Resources requiere el siguiente typado: + + + + + + + Tipos de iconos en los recursos disponibles + + Existen varios tipos de iconos disponibles: Png, Gif, Ppt, Pptx, Doc, Docx, Xls, Xlsx, Csv, + Pdf, Mp4, Avi, Mkv, Mp3, Wav, + + + Modo de uso + + + El recurso se utiliza de manera bastante simple siguiendo el siguiente ejemplo: + + + `} + /> + + Como el recurso ejemplo tiene el mismo formato, se puede enviar por spread operator + + + ) +} + +export default ResourcesPage diff --git a/src/documentation/utils/routes.tsx b/src/documentation/utils/routes.tsx index 0bea689c..4d69b6fb 100644 --- a/src/documentation/utils/routes.tsx +++ b/src/documentation/utils/routes.tsx @@ -28,6 +28,8 @@ const FlashNotification = React.lazy( ) const CourseList = React.lazy(async () => await import('../pages/Organisms/CourseList')) const ModalAlert = React.lazy(async () => await import('../pages/Organisms/ModalAlert')) +const Events = React.lazy(async () => await import('../pages/Organisms/Events')) +const Resources = React.lazy(async () => await import('../pages/Organisms/Resources')) /** * Rutas que tiene el proyecto con el respectivo link en la navegación. @@ -140,18 +142,28 @@ export const routes: IRoute[] = [ component: , }, { - path: '/molecules/flash-notification', + path: '/organisms/flash-notification', label: 'Flash Notification', component: , }, { - path: '/molecules/courselist', + path: '/organisms/courselist', label: 'CourseList', component: , }, { - path: '/molecules/modalalert', + path: '/organisms/modalalert', label: 'ModalAlert', component: , }, + { + path: '/organisms/events', + label: 'Events', + component: , + }, + { + path: '/organisms/resource', + label: 'Resources', + component: , + }, ] diff --git a/src/organisms/Events/Events.tsx b/src/organisms/Events/Events.tsx new file mode 100644 index 00000000..f373a0d8 --- /dev/null +++ b/src/organisms/Events/Events.tsx @@ -0,0 +1,5 @@ +import { FC } from 'react' + +export const Events: FC = () => { + return
Hola soy un Evento
+} diff --git a/src/organisms/Events/index.ts b/src/organisms/Events/index.ts new file mode 100644 index 00000000..b4d4184b --- /dev/null +++ b/src/organisms/Events/index.ts @@ -0,0 +1 @@ +export * from './Events' diff --git a/src/organisms/Resources/Icons/Avi.tsx b/src/organisms/Resources/Icons/Avi.tsx new file mode 100644 index 00000000..4e650ab3 --- /dev/null +++ b/src/organisms/Resources/Icons/Avi.tsx @@ -0,0 +1,53 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Avi: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Csv.tsx b/src/organisms/Resources/Icons/Csv.tsx new file mode 100644 index 00000000..fbb25b4a --- /dev/null +++ b/src/organisms/Resources/Icons/Csv.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Csv: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Doc.tsx b/src/organisms/Resources/Icons/Doc.tsx new file mode 100644 index 00000000..ec769118 --- /dev/null +++ b/src/organisms/Resources/Icons/Doc.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Doc: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Docx.tsx b/src/organisms/Resources/Icons/Docx.tsx new file mode 100644 index 00000000..e1c79a48 --- /dev/null +++ b/src/organisms/Resources/Icons/Docx.tsx @@ -0,0 +1,60 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Docx: FC = () => { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Gif.tsx b/src/organisms/Resources/Icons/Gif.tsx new file mode 100644 index 00000000..bba229e3 --- /dev/null +++ b/src/organisms/Resources/Icons/Gif.tsx @@ -0,0 +1,50 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Gif: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Icons.tsx b/src/organisms/Resources/Icons/Icons.tsx new file mode 100644 index 00000000..447de4a8 --- /dev/null +++ b/src/organisms/Resources/Icons/Icons.tsx @@ -0,0 +1,83 @@ +import { FC } from 'react' +import { + Avi, + Csv, + Doc, + Docx, + Gif, + Jpeg, + Jpg, + Mkv, + Mp3, + Mp4, + Pdf, + Png, + Ppt, + Pptx, + Wav, + Xls, + Xlsx, +} from './index' + +interface IconsProps { + type: + | string + | 'avi' + | 'csv' + | 'doc' + | 'docx' + | 'gif' + | 'jpeg' + | 'jpg' + | 'mkv' + | 'mp3' + | 'mp4' + | 'pdf' + | 'png' + | 'ppt' + | 'pptx' + | 'wav' + | 'xls' + | 'xlsx' +} + +export const Icons: FC = ({ type }) => { + switch (type) { + case 'avi': + return + case 'csv': + return + case 'doc': + return + case 'docx': + return + case 'gif': + return + case 'jpeg': + return + case 'jpg': + return + case 'png': + return + case 'pdf': + return + case 'ppt': + return + case 'pptx': + return + case 'xls': + return + case 'xlsx': + return + case 'mp3': + return + case 'wav': + return + case 'mp4': + return + case 'mkv': + return + default: + return null + } +} diff --git a/src/organisms/Resources/Icons/Jpeg.tsx b/src/organisms/Resources/Icons/Jpeg.tsx new file mode 100644 index 00000000..f9a9a859 --- /dev/null +++ b/src/organisms/Resources/Icons/Jpeg.tsx @@ -0,0 +1,60 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Jpeg: FC = () => { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Jpg.tsx b/src/organisms/Resources/Icons/Jpg.tsx new file mode 100644 index 00000000..8e99d3b2 --- /dev/null +++ b/src/organisms/Resources/Icons/Jpg.tsx @@ -0,0 +1,49 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Jpg: FC = () => { + return ( + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Mkv.tsx b/src/organisms/Resources/Icons/Mkv.tsx new file mode 100644 index 00000000..5343a009 --- /dev/null +++ b/src/organisms/Resources/Icons/Mkv.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Mkv: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Mp3.tsx b/src/organisms/Resources/Icons/Mp3.tsx new file mode 100644 index 00000000..d718f930 --- /dev/null +++ b/src/organisms/Resources/Icons/Mp3.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Mp3: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Mp4.tsx b/src/organisms/Resources/Icons/Mp4.tsx new file mode 100644 index 00000000..99ef307e --- /dev/null +++ b/src/organisms/Resources/Icons/Mp4.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Mp4: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Pdf.tsx b/src/organisms/Resources/Icons/Pdf.tsx new file mode 100644 index 00000000..8a5006c3 --- /dev/null +++ b/src/organisms/Resources/Icons/Pdf.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Pdf: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Png.tsx b/src/organisms/Resources/Icons/Png.tsx new file mode 100644 index 00000000..03700968 --- /dev/null +++ b/src/organisms/Resources/Icons/Png.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Png: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Ppt.tsx b/src/organisms/Resources/Icons/Ppt.tsx new file mode 100644 index 00000000..4a7a6059 --- /dev/null +++ b/src/organisms/Resources/Icons/Ppt.tsx @@ -0,0 +1,53 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Ppt: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Pptx.tsx b/src/organisms/Resources/Icons/Pptx.tsx new file mode 100644 index 00000000..5cd5be01 --- /dev/null +++ b/src/organisms/Resources/Icons/Pptx.tsx @@ -0,0 +1,57 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Pptx: FC = () => { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Wav.tsx b/src/organisms/Resources/Icons/Wav.tsx new file mode 100644 index 00000000..4af619e8 --- /dev/null +++ b/src/organisms/Resources/Icons/Wav.tsx @@ -0,0 +1,56 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Wav: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Xls.tsx b/src/organisms/Resources/Icons/Xls.tsx new file mode 100644 index 00000000..4586db98 --- /dev/null +++ b/src/organisms/Resources/Icons/Xls.tsx @@ -0,0 +1,53 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Xls: FC = () => { + return ( + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/Xlsx.tsx b/src/organisms/Resources/Icons/Xlsx.tsx new file mode 100644 index 00000000..d5c9c053 --- /dev/null +++ b/src/organisms/Resources/Icons/Xlsx.tsx @@ -0,0 +1,57 @@ +import { FC } from 'react' +import { Icon } from '@chakra-ui/react' + +export const Xlsx: FC = () => { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/src/organisms/Resources/Icons/index.ts b/src/organisms/Resources/Icons/index.ts new file mode 100644 index 00000000..82913dc4 --- /dev/null +++ b/src/organisms/Resources/Icons/index.ts @@ -0,0 +1,18 @@ +export * from './Avi' +export * from './Csv' +export * from './Doc' +export * from './Docx' +export * from './Gif' +export * from './Icons' +export * from './Jpeg' +export * from './Jpg' +export * from './Mkv' +export * from './Mp3' +export * from './Mp4' +export * from './Pdf' +export * from './Png' +export * from './Ppt' +export * from './Pptx' +export * from './Wav' +export * from './Xls' +export * from './Xlsx' diff --git a/src/organisms/Resources/Resources.tsx b/src/organisms/Resources/Resources.tsx new file mode 100644 index 00000000..3cc01546 --- /dev/null +++ b/src/organisms/Resources/Resources.tsx @@ -0,0 +1,83 @@ +import { FC } from 'react' +import { Box, Text, Link } from '@chakra-ui/react' +import { Icons } from './Icons' +import { vars } from '@/theme' +import { Download } from '@/atoms/Icons' + +interface ResourcesProps { + id: string | number + resourceType: string + resourceTitle: string + resourceDetail: string + resourceTextDownload: string + resourceLink: string + resourceNameFile: string +} + +export const Resources: FC = ({ + id, + resourceType, + resourceTitle, + resourceDetail, + resourceTextDownload, + resourceLink, + resourceNameFile, +}) => { + return ( + + + + + + + {resourceTitle} + + + + + {resourceDetail} + + + + + + {resourceTextDownload} + + + + ) +} diff --git a/src/organisms/Resources/index.ts b/src/organisms/Resources/index.ts new file mode 100644 index 00000000..659c3306 --- /dev/null +++ b/src/organisms/Resources/index.ts @@ -0,0 +1 @@ +export * from './Resources' diff --git a/src/organisms/index.ts b/src/organisms/index.ts index 405a7dff..04cab81e 100644 --- a/src/organisms/index.ts +++ b/src/organisms/index.ts @@ -1,3 +1,5 @@ export * from './CourseList' export * from './Alerts' export * from './ModalAlert' +export * from './Events' +export * from './Resources'