Skip to content

Commit d4fe9ca

Browse files
IvanM9IvanM9
committed
feat: Add ButtonStyle enum and Button interface for improved button component flexibility
1 parent 5e3c9e2 commit d4fe9ca

File tree

12 files changed

+135
-95
lines changed

12 files changed

+135
-95
lines changed

‎src/assets/home-sections.json‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,44 @@
11
{
2-
"aboutUs": {
3-
"id": "about-us",
4-
"title": "Somos la metacomunidad que conecta y potencia a las comunidades tech",
5-
"subtitle": "",
6-
"description": "En nuestra metacomunidad, unimos fuerzas, compartimos conocimientos y crecemos juntos. Conectamos comunidades tech para impulsar el futuro de la innovación y la colaboración. Únete a nosotros y sé parte del cambio.",
7-
"image": {
8-
"link": "/images/hacktoberfest.jpg",
9-
"alt": "Grupo de personas"
10-
},
11-
"cta": {
12-
"text": "Sé voluntario",
13-
"link": "https://forms.gle/un4KaPsmmqS5Yx7Z9"
14-
}
15-
},
16-
"communityLeaders": {
17-
"id": "community-leaders",
18-
"title": "Trabajemos juntos para fortalecer el ecosistema tech en Ecuador",
19-
"subtitle": "¿Eres líder de una comunidad?",
20-
"description": "Si te apasiona la tecnología, y crees en el poder de la colaboración y el trabajo en equipo, nos encantaría contactar y ampliar el impacto de tu comunidad",
21-
"image": {
22-
"link": "",
23-
"alt": "Contorno de Ecuador"
24-
},
25-
"cta": {
26-
"text": "Conectemos",
27-
"link": "/"
28-
}
29-
},
30-
"exploreEvents": {
31-
"id": "explore-events",
32-
"title": "Únete a nuestros próximos eventos y amplía tus horizontes",
33-
"subtitle": "",
34-
"description": "Nos encanta aprender, compartir y expandir nuestros horizontes constantemente. ¡Anímate a explorar todas las actividades que las comunidades tech tienen para ti!",
35-
"image": {
36-
"link": "/images/codefest_conference.jpg",
37-
"alt": "Conferencia en un auditorio"
38-
},
39-
"cta": {
40-
"text": "Conoce más",
41-
"link": "/events"
42-
}
43-
}
44-
}
2+
"aboutUs": {
3+
"id": "about-us",
4+
"title": "Somos la metacomunidad que conecta y potencia a las comunidades tech",
5+
"subtitle": "",
6+
"description": "En nuestra metacomunidad, unimos fuerzas, compartimos conocimientos y crecemos juntos. Conectamos comunidades tech para impulsar el futuro de la innovación y la colaboración. Únete a nosotros y sé parte del cambio.",
7+
"image": {
8+
"link": "/images/hacktoberfest.jpg",
9+
"alt": "Grupo de personas"
10+
},
11+
"cta": {
12+
"text": "Sé voluntario",
13+
"link": "https://forms.gle/un4KaPsmmqS5Yx7Z9"
14+
}
15+
},
16+
"communityLeaders": {
17+
"id": "community-leaders",
18+
"title": "Trabajemos juntos para fortalecer el ecosistema tech en Ecuador",
19+
"subtitle": "¿Eres líder de una comunidad?",
20+
"description": "Si te apasiona la tecnología, y crees en el poder de la colaboración y el trabajo en equipo, nos encantaría contactar y ampliar el impacto de tu comunidad",
21+
"image": {
22+
"link": "",
23+
"alt": "Contorno de Ecuador"
24+
},
25+
"cta": {
26+
"text": "Conectemos",
27+
"link": "/"
28+
}
29+
},
30+
"exploreEvents": {
31+
"id": "explore-events",
32+
"title": "Únete a nuestros próximos eventos y amplía tus horizontes",
33+
"subtitle": "",
34+
"description": "Nos encanta aprender, compartir y expandir nuestros horizontes constantemente. ¡Anímate a explorar todas las actividades que las comunidades tech tienen para ti!",
35+
"image": {
36+
"link": "/images/codefest_conference.jpg",
37+
"alt": "Conferencia en un auditorio"
38+
},
39+
"cta": {
40+
"text": "Conoce más",
41+
"link": "/events"
42+
}
43+
}
44+
}

‎src/components/AboutSection.astro‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
---
2+
import { ButtonStyle } from "../enums/button-type.enum";
23
//import heroImage from "../assets/hacktoberfest.jpg";
34
import Button from "./shared/Button.astro";
4-
5-
const {id, title, description, image, cta} = Astro.props;
5+
const { Primary } = ButtonStyle;
6+
const { id, title, description, image, cta } = Astro.props;
67
---
78

89
<section id={id} class="py-16 bg-gray-50">
910
<div class="container mx-auto px-4">
10-
<div class="w-[88%] lg:w-[92%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-start">
11+
<div
12+
class="w-[88%] lg:w-[92%] mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 items-start"
13+
>
1114
<div class="order-2 lg:order-1">
1215
<h2 class="text-3xl font-bold mb-6">
1316
{title}
1417
</h2>
1518
<p class="text-gray-600 mb-6">
1619
{description}
1720
</p>
18-
<Button text={cta.text} link={cta.link} style="primary"/>
21+
<Button text={cta.text} link={cta.link} style={Primary} />
1922
</div>
2023
<div class="bg-gray-200 order-1 lg:order-2 rounded-lg">
2124
<img

‎src/components/CardEvent.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const eventHeaderProps = { title, image, modality, description };
4040
year: "numeric",
4141
month: "long",
4242
day: "numeric",
43-
timeZone: 'ECT'
43+
timeZone: "ECT",
4444
})
4545
}
4646
</span>

‎src/components/Faq.astro‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ Father component: Alpine.js logic
1515
This ensures only one accordion is open at a time.
1616
1717
-->
18-
<section
18+
<section
1919
x-data="{
2020
activeId: null,
2121
@@ -35,13 +35,11 @@ This ensures only one accordion is open at a time.
3535
};
3636
}
3737
}"
38-
39-
class="py-16 bg-white">
38+
class="py-16 bg-white"
39+
>
4040
<div class="container mx-auto px-4">
4141
<h2 class="text-3xl font-bold text-center mb-12">Preguntas frecuentes</h2>
42-
<div
43-
class="container faqs-container "
44-
>
42+
<div class="container faqs-container">
4543
{
4644
commonQuestions.map((question, index) => (
4745
<Accordion

‎src/components/Footer.astro‎

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,49 @@
22
33
---
44
<footer class="bg-gray-800 text-white py-8">
5-
<div class="container mx-auto px-4">
6-
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
7-
<div>
8-
<h3 class="text-xl font-bold mb-4">Ecuador In Tech</h3>
9-
<p class="text-gray-300">Conectando comunidades, empoderando personas.</p>
10-
</div>
11-
<div>
12-
<h3 class="text-xl font-bold mb-4">Enlaces rápidos</h3>
13-
<ul class="space-y-2">
14-
<li><a href="/" class="text-gray-300 hover:text-white">Inicio</a></li>
15-
<li><a href="/communities" class="text-gray-300 hover:text-white">Comunidades</a></li>
16-
<li><a href="/events" class="text-gray-300 hover:text-white">Eventos</a></li>
17-
<li><a href="/#about-us" class="text-gray-300 hover:text-white">Voluntariado</a></li>
18-
<li><a href="/rss.xml" class="text-gray-300 hover:text-white"> Suscríbete a nuestro canal RSS</a></li>
19-
</ul>
20-
</div>
21-
<div>
22-
<h3 class="text-xl font-bold mb-4">Conecta con nosotros</h3>
23-
<div class="flex space-x-4">
24-
<a href="https://github.com/Ecuador-In-Tech" class="text-gray-300 hover:text-white">GitHub</a>
25-
</div>
26-
</div>
5+
<div class="container mx-auto px-4">
6+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
7+
<div>
8+
<h3 class="text-xl font-bold mb-4">Ecuador In Tech</h3>
9+
<p class="text-gray-300">
10+
Conectando comunidades, empoderando personas.
11+
</p>
2712
</div>
28-
<div class="mt-8 pt-8 border-t border-gray-700 text-center">
29-
<p class="text-gray-300">&copy; 2024 Ecuador In Tech. Todos los derechos reservados.</p>
13+
<div>
14+
<h3 class="text-xl font-bold mb-4">Enlaces rápidos</h3>
15+
<ul class="space-y-2">
16+
<li><a href="/" class="text-gray-300 hover:text-white">Inicio</a></li>
17+
<li>
18+
<a href="/communities" class="text-gray-300 hover:text-white"
19+
>Comunidades</a>
20+
</li>
21+
<li>
22+
<a href="/events" class="text-gray-300 hover:text-white">Eventos</a>
23+
</li>
24+
<li>
25+
<a href="/#about-us" class="text-gray-300 hover:text-white"
26+
>Voluntariado</a>
27+
</li>
28+
<li>
29+
<a href="/rss.xml" class="text-gray-300 hover:text-white">
30+
Suscríbete a nuestro canal RSS</a>
31+
</li>
32+
</ul>
3033
</div>
34+
<div>
35+
<h3 class="text-xl font-bold mb-4">Conecta con nosotros</h3>
36+
<div class="flex space-x-4">
37+
<a
38+
href="https://github.com/Ecuador-In-Tech"
39+
class="text-gray-300 hover:text-white"
40+
>GitHub</a>
41+
</div>
42+
</div>
43+
</div>
44+
<div class="mt-8 pt-8 border-t border-gray-700 text-center">
45+
<p class="text-gray-300">
46+
&copy; 2024 Ecuador In Tech. Todos los derechos reservados.
47+
</p>
3148
</div>
49+
</div>
3250
</footer>
33-

‎src/components/Navbar/Navbar.astro‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@ Navbar component:
2929
class="bg-gray-800 w-full fixed z-10"
3030
>
3131
<div class="container mx-auto px-4 py-2 flex justify-between items-center">
32-
<a href="/" class="font-gabarito text-white text-lg font-bold">Ecuador In Tech</a>
32+
<a href="/" class="font-gabarito text-white text-lg font-bold"
33+
>Ecuador In Tech</a>
3334

3435
<!-- Burger menu button -->
3536
<button
@@ -42,12 +43,14 @@ Navbar component:
4243

4344
<!-- Links -->
4445
<div class="hidden lg:flex lg:items-center lg:space-x-8">
45-
{links.slice(1).map((link) => (
46-
<Link href={link.href} text={link.text} size="text-[0.95rem]"/>
47-
))}
46+
{
47+
links.slice(1).map((link) => (
48+
<Link href={link.href} text={link.text} size="text-[0.95rem]" />
49+
))
50+
}
4851
</div>
4952
</div>
5053

5154
<!-- Mobile menu -->
52-
<OffcanvasMenu links={links}/>
53-
</nav>
55+
<OffcanvasMenu links={links} />
56+
</nav>

‎src/components/shared/Button.astro‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
---
2-
const { text, link, style } = Astro.props;
2+
import { ButtonStyle } from "../../enums/button-type.enum";
3+
import type { ButtonI } from "../../interfaces/button.interface";
4+
const { text, link, style } = Astro.props as ButtonI;
5+
const { Outline, Primary } = ButtonStyle;
36
---
47
<a href={link}>
5-
<div class:list={[
6-
"base-btn",
7-
{"outlined-white-btn": style === "outline"},
8-
{"primary-btn": style === "primary"},
9-
]}>
8+
<div
9+
class:list={[
10+
"base-btn",
11+
{ "outlined-white-btn": style === Outline },
12+
{ "primary-btn": style === Primary },
13+
]}
14+
>
1015
<p class="text-base">{text}</p>
1116
</div>
1217
</a>

‎src/enums/button-type.enum.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export enum ButtonStyle {
2+
Primary = "primary",
3+
Outline = "outline",
4+
}

‎src/interfaces/button.interface.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import type { ButtonStyle } from "../enums/button-type.enum";
2+
3+
export interface ButtonI {
4+
text: string;
5+
link: string;
6+
style: ButtonStyle;
7+
}

‎src/layouts/Layout.astro‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@ const { title } = Astro.props;
1818
<meta charset="UTF-8" />
1919
<meta name="description" content="Ecuador In Tech" />
2020
<meta name="viewport" content="width=device-width" />
21-
<script defer src="https://cloud.umami.is/script.js" data-website-id="cb063bf5-5bb2-443b-ba30-e0447966a426"></script>
21+
<script
22+
defer
23+
src="https://cloud.umami.is/script.js"
24+
data-website-id="cb063bf5-5bb2-443b-ba30-e0447966a426"
25+
></script>
2226
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
2327
<link rel="sitemap" href="/sitemap-index.xml" />
2428
<link

0 commit comments

Comments
 (0)