Merge pull request #23 from UXCorpRangel/roadmap

Roadmap

src/components/CardRoadmap.astro

@@ -1,34 +1,32 @@
 ---
+import { StatusValue, type RoadmapItem } from '@contracts';
 import { Icon } from 'astro-icon/components';
 
-const STATUS_VALUES = {
-  COMPLETADO: 'Completado' as const,
-  EN_DESARROLLO: 'En Desarrollo' as const,
-  EN_ESPERA: 'En Espera' as const
+const STATUS_TEXT: Record<StatusValue, string> = {
+  [StatusValue.COMPLETE]: 'Completado',
+  [StatusValue.DEVELOP]: 'En Desarrollo',
+  [StatusValue.WAIT]: 'En Espera'
 };
 
-type Status = (typeof STATUS_VALUES)[keyof typeof STATUS_VALUES];
+const STATUS_ICONS: Record<StatusValue, string> = {
+  [StatusValue.COMPLETE]: 'check',
+  [StatusValue.DEVELOP]: 'code',
+  [StatusValue.WAIT]: 'hourglass'
+};
 
-interface Props {
-  title: string;
-  date: string;
-  status: Status;
-  description: string;
-}
+type Props = RoadmapItem;
 
 const { title, date, status, description } = Astro.props;
 
-const STATUS = {
-  isDone: STATUS_VALUES.COMPLETADO,
-  isDevelopment: STATUS_VALUES.EN_DESARROLLO,
-  isPending: STATUS_VALUES.EN_ESPERA
-};
+function getStatusIcon(value: StatusValue) {
+  return STATUS_ICONS[value];
+}
 
-function getStatusColor(status: Status): string | null {
+function getStatusColor(status: StatusValue): string | null {
   const statusKeys = {
-    [STATUS.isDone]: '--lore-color',
-    [STATUS.isDevelopment]: '--harley-color',
-    [STATUS.isPending]: '--development-color'
+    [StatusValue.COMPLETE]: '--lore-color',
+    [StatusValue.DEVELOP]: '--harley-color',
+    [StatusValue.WAIT]: '--development-color'
   };
 
   return statusKeys[status] || null;
@@ -41,10 +39,8 @@ function getStatusColor(status: Status): string | null {
     <header>
       <h3>{date}</h3>
       <p style={`--color: var(${getStatusColor(status)})`}>
-        {status === STATUS.isDone && <Icon name="roadmap/check" size={24} />}
-        {status === STATUS.isDevelopment && <Icon name="roadmap/code" size={24} />}
-        {status === STATUS.isPending && <Icon name="roadmap/hourglass" size={24} />}
-        <span>{status}</span>
+        <Icon name={`roadmap/${getStatusIcon(status)}`} size={24} />
+        <span>{STATUS_TEXT[status]}</span>
       </p>
     </header>
     <p class="description">

src/contracts/index.ts

@@ -3,4 +3,5 @@ export * from './common.type';
 export * from './creator.type';
 export * from './navbar.type';
 export * from './ranking.type';
+export * from './roadmap.type';
 export * from './ux-card.type';

src/contracts/roadmap.type.ts

@@ -0,0 +1,12 @@
+export enum StatusValue {
+  COMPLETE = 'complete',
+  DEVELOP = 'develop',
+  WAIT = 'wait'
+}
+
+export type RoadmapItem = {
+  title: string;
+  date: string;
+  status: StatusValue;
+  description: string;
+};

src/data/roadmap.ts

@@ -0,0 +1,82 @@
+import { StatusValue, type RoadmapItem } from '@contracts';
+
+export const roadmap: RoadmapItem[] = [
+  {
+    title: 'PRIMER COMMIT Y CREACIÓN DEL DISEÑO EN FIGMA',
+    date: 'JUNIO 2024',
+    status: StatusValue.COMPLETE,
+    description:
+      'Una noche de partidas de Fortnite, en medio de la matanza, Ana le comenta a la comunidad que siempre quiso crea cartas de unicornio pero con temáticas de diseño y desarrollo; estas cartas son inspiradas por el gran Dios de CSS ManzDev, y el estilo de unicornios es inspirado por el juego de cartas Unstable Unicorns. A la comunidad le gustó tanto la idea que decidieron alentarla y mejorarla añadiendo más ideas, por ejemplo, que Harley (la verdadera streamer) tuviera una categoría dentro de las cartas. No sabíamos que ese sería el inicio de este increíble proyecto...'
+  },
+  {
+    title: 'CREACIÓN DE HARLEYBOT',
+    date: 'JUNIO 2024',
+    status: StatusValue.COMPLETE,
+    description:
+      'Omar decide crear el bot de Harley con diferentes comandos para interactuar con el chat de Twitch pensando que en el futuro este bot servirá para entregar de las cartas a los suscriptores del canal. Actualmente puedes interactuar con el bot durante las transmisiones en vivo. *woof*'
+  },
+  {
+    title: 'CREACIÓN DE SECCIONES INTERNAS',
+    date: 'JULIO 2024',
+    status: StatusValue.COMPLETE,
+    description:
+      'Se diseñaron y desarrollaron las secciones internas de la página web, aparte de crear algunas de las cartas de las categorías de Harley, Diseño y Desarrollo. Adicionalmente se añadieron easter eggs en el footer, y el efecto de scroll en el roadmap.'
+  },
+  {
+    title: 'FEATURES, FEATURES Y MÁS FEATURES',
+    date: 'AGOSTO 2024',
+    status: StatusValue.COMPLETE,
+    description:
+      'Creamos distintos features como la categoría Especial, los botones de compartir, cerrar y descargar las cartas del ranking, además de un estupendo 404. También se añadieron efectos interactivos en la sección de inicio y el hover sobre la carta que el usuario quiera ver con un bonito blur sobre las otras cartas.'
+  },
+  {
+    title: 'RESPONSIVE',
+    date: 'SEPTIEMBRE 2024',
+    status: StatusValue.DEVELOP,
+    description: 'Estamos trabajando en ello 🏗️🚧'
+  },
+  {
+    title: 'CREACIÓN DE LAS CARTAS',
+    date: 'OCTUBRE 2024',
+    status: StatusValue.WAIT,
+    description: 'Próximamente 🦄 Se crearán las cartas de todas las categorías.'
+  },
+  {
+    title: 'IMPLEMENTACIÓN DEL BACKEND',
+    date: 'OCTUBRE 2024',
+    status: StatusValue.WAIT,
+    description:
+      'Próximamente 🦄 Integraremos el HarleyBot con todo el backend para comenzar con la pruebas en un entorno de desarrollo.'
+  },
+  {
+    title: '¡CUMPLEAÑOS DEL CANAL Y LANZAMIENTO!',
+    date: '2 NOVIEMBRE 2024',
+    status: StatusValue.WAIT,
+    description:
+      'Es la gala de lanzamiento de las cartas por el primer aniversario del canal, será un día especial y se entregarán las primeras cartas a miembros de la comunidad. ¡No te lo puedes perder!'
+  },
+  {
+    title: 'CUMPLEAÑOS DE ANA',
+    date: '21 DICIEMBRE 2024',
+    status: StatusValue.WAIT,
+    description: 'Tenemos que hacer algo pero no sabemos qué. Ve pensando en algunas sugerencias.'
+  },
+  {
+    title: 'HORÓSCOPO UNICORN',
+    date: '2025',
+    status: StatusValue.WAIT,
+    description: 'Próximamente 🦄'
+  },
+  {
+    title: 'PIXEL HARLEY',
+    date: '2025',
+    status: StatusValue.WAIT,
+    description: 'Próximamente 🦄'
+  },
+  {
+    title: 'SECCIÓN DE CONTRIBUCIONES DE LA COMUNIDAD',
+    date: '2025',
+    status: StatusValue.WAIT,
+    description: 'Próximamente 🦄'
+  }
+];

src/pages/roadmap.astro

@@ -2,6 +2,7 @@
 import CardRoadmap from '@components/CardRoadmap.astro';
 import Logo from '@components/Logo.astro';
 import PageLayout from '@layouts/Page.astro';
+import { roadmap } from '@data/roadmap';
 ---
 
 <PageLayout title="Roadmap">
@@ -16,24 +17,11 @@ import PageLayout from '@layouts/Page.astro';
           <Logo size={78} />
         </div>
         <div class="card-container">
-          <CardRoadmap
-            title="¡LANZAMIENTO DE LAS CARTAS!"
-            date="JULIO 2024"
-            status="Completado"
-            description="Lorem ipsum dolor sit amet consectetur. Et senectus lectus senectus dictum ultrices lobortis. Erat at egestas arcu tellus. Sed in vitae integer tortor sit morbi. A in ullamcorper ut eget etiam odio porta nunc. Volutpat nec ac enim volutpat ipsum sit. Est tellus fames ut lectus scelerisque. Sem gravida lacus a nisi in platea. Sapien ante sem ultrices velit ornare diam egestas."
-          />
-          <CardRoadmap
-            title="¡LANZAMIENTO DE LAS CARTAS! TEXTO LARGO"
-            date="JULIO 2024"
-            status="En Desarrollo"
-            description="Lorem ipsum dolor sit amet consectetur. Et senectus lectus senectus dictum ultrices lobortis. Erat at egestas arcu tellus. Sed in vitae integer tortor sit morbi. A in ullamcorper ut eget etiam odio porta nunc. Volutpat nec ac enim volutpat ipsum sit. Est tellus fames ut lectus scelerisque. Sem gravida lacus a nisi in platea. Sapien ante sem ultrices velit ornare diam egestas."
-          />
-          <CardRoadmap
-            title="¡LANZAMIENTO DE LAS CARTAS! TEXTO LARGO"
-            date="JULIO 2024"
-            status="En Espera"
-            description="Lorem ipsum dolor sit amet consectetur. Et senectus lectus senectus dictum ultrices lobortis. Erat at egestas arcu tellus. Sed in vitae integer tortor sit morbi. A in ullamcorper ut eget etiam odio porta nunc. Volutpat nec ac enim volutpat ipsum sit. Est tellus fames ut lectus scelerisque. Sem gravida lacus a nisi in platea. Sapien ante sem ultrices velit ornare diam egestas."
-          />
+          {
+            roadmap.map(({ title, date, status, description }) => (
+              <CardRoadmap title={title} date={date} status={status} description={description} />
+            ))
+          }
         </div>
       </div>
     </section>