Skip to content

Commit e1b623f

Browse files
davcorteznsandoyaIvanM9
authored
Community Card Component #23 (#27)
* Remove old card community component * Add new community card component * Fix import of community card component * Add logos to public dir * refactor!: Integrate `SocialLinks` into `Links` interface for improved maintainability Originally, props were independently defined in both `communities.astro` page and `CommunityCard` component. While explicit prop definitions offer clarity, this approach introduced redundancy and made it harder to align with `Community` interface. As result, maintaining consistency across components became challenging, especially when passing nested props to child components like SocialLinks and Tags. Now, `SocialLinks` interface has been properly nested inside `Links` interface (`Communities.ts`). This adjustment establishes a common structure across components, improving scalability and error traceability. It also simplifies prop propagation and reduces code duplication. * refactor!: Implement `Community` and `SocialLinks` interfaces across `CommunityCard` and children components Originally, props were declared explicitly in `CommunityCard` and its children components. While this approach offered clarity at the beginning, it also may cause inconsistencies, especially as the application scales or interfaces evolve. Now, `Community` and `SocialLinks` interfaces have been implemented consistently across `CommunityCard` and its children components. This refactor ensures a unified data structure, reduces code duplication, and simplifies maintenance. * refactor!: Create svg files from icons and implement them in `SocialLinks.astro` component At the beginning, social icons were implemented as svg tags directly in `SocialLinks.astro` component. Now, these icons are used to create svgs files as source for `<Fragment>` tags. This way, we have a more friendly and maintanable icon implementation * fix: Change svg files content Used a new source for svg icons to show them properly in website (credits: icons8.com) * refactor: Update community links structure and integrate social links in CommunityCard --------- Co-authored-by: nsandoya <[email protected]> Co-authored-by: Iván Manzaba <[email protected]>
1 parent 81935f8 commit e1b623f

14 files changed

+132
-58
lines changed

‎public/herux.png

9.7 KB
Loading

‎public/icons/github.svg

+3
Loading

‎public/icons/instagram.svg

+1
Loading

‎public/icons/linkedin.svg

+3
Loading

‎public/kernel-chaos.png

77.6 KB
Loading

‎public/wordpress.png

101 KB
Loading

‎src/assets/communities.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,36 @@
22
{
33
"name": "Kernel Chaos",
44
"description": "Kernel Chaos es un espacio hacker comunitario dedicado a fomentar la colaboración y el aprendizaje entre entusiastas de Linux y FOSS.",
5-
"links": {"website": "https://kernelchaos.org", "social": "https://instagram.com/kernelchaosec"},
5+
"links": {"website": "https://kernelchaos.org", "social": {"instagramUrl": "https://instagram.com/kernelchaosec", "githubUrl": "", "linkedinUrl": ""}},
66
"tags": [
77
"FOSS",
88
"Open Source",
99
"Programming"
1010
],
11-
"image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&q=80&w=300"
11+
"image": "/kernel-chaos.png"
1212
},
1313
{
1414
"name": "Wordpress Guayaquil",
1515
"description": "Reuniones orientadas a hacer que WordPress sea abierto y accesible para quien esté interesadx en usarlo, desarrollarlo o hacer negocios con él.",
16-
"links": {"website": "https://www.meetup.com/wordpress-guayaquil-meetup", "social": "https://instagram.com/wpguayaquil"},
16+
"links": {"website": "https://www.meetup.com/wordpress-guayaquil-meetup", "social": {"instagramUrl": "https://instagram.com/wpguayaquil", "githubUrl": "", "linkedinUrl": ""}},
1717
"tags": [
1818
"Design",
1919
"UI",
2020
"UX",
2121
"Creative"
2222
],
23-
"image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&q=80&w=300"
23+
"image": "/wordpress.png"
2424
},
2525
{
2626
"name": "HerUX",
2727
"description": "Primera comunidad de Mujeres Profesionales apasionadas por la Experiencia del Usuario de #guayaquil.",
28-
"links": {"website": "https://ec.linkedin.com/company/her-ux", "social": "https://www.instagram.com/her.uxec"},
28+
"links": {"website": "https://ec.linkedin.com/company/her-ux", "social": {"instagramUrl": "https://www.instagram.com/her.uxec", "githubUrl": "", "linkedinUrl": "https://www.linkedin.com/company/her-ux/"}},
2929
"tags": [
3030
"UX",
3131
"UI",
3232
"Creative"
3333
],
34-
"image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&q=80&w=300"
34+
"image": "/herux.png"
3535
}
3636
]
3737

‎src/components/CardCommunity.astro

-46
This file was deleted.

‎src/components/CommunityCard/Avatar.astro

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
interface Props {
3+
logoUrl: string;
4+
title: string;
5+
}
6+
7+
const { logoUrl, title } = Astro.props;
8+
---
9+
<div class="relative group items-center">
10+
<div class="absolute -inset-0.5 bg-gradient-to-r rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200"></div>
11+
<img
12+
src={logoUrl}
13+
alt={title}
14+
class="relative w-24 h-24 rounded-full object-cover bg-white"
15+
/>
16+
</div>

‎src/components/CommunityCard/CommunityCard.astro

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
import SocialLinks from './SocialLinks.astro';
3+
import Tags from './Tags.astro';
4+
import Avatar from './Avatar.astro';
5+
import type {Community} from '../../interfaces/communities'
6+
7+
const {
8+
name,
9+
description,
10+
tags,
11+
image="/path-to-default-logo.png",
12+
links
13+
} = Astro.props as Community;
14+
---
15+
16+
<div class="bg-white rounded-2xl p-6 max-w-lg drop-shadow-md">
17+
18+
<div class="flex items-start gap-4">
19+
<Avatar logoUrl={image} title={name} />
20+
<div class="flex-1 space-y-3">
21+
<div>
22+
<h3 class="text-xl font-semibold text-gray-900 mb-1">
23+
<a href={links?.website}>{name}</a>
24+
</h3>
25+
<p class="text-gray-600 text-sm leading-relaxed">{description}</p>
26+
</div>
27+
28+
<Tags tags={tags} />
29+
30+
<div class="pt-2 border-t border-gray-100">
31+
<SocialLinks
32+
{...links?.social}
33+
/>
34+
</div>
35+
</div>
36+
</div>
37+
</div>

‎src/components/CommunityCard/SocialLinks.astro

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
import instagram from '../../../public/icons/instagram.svg?raw';
3+
import linkedin from '../../../public/icons/linkedin.svg?raw';
4+
import github from '../../../public/icons/github.svg?raw';
5+
import type { SocialLinks } from '../../interfaces/communities';
6+
7+
const {
8+
githubUrl, linkedinUrl, instagramUrl } = Astro.props as SocialLinks;
9+
---
10+
11+
<div class="flex flex-row gap-3 items-center">
12+
{githubUrl && (
13+
<a
14+
href={githubUrl}
15+
class="text-gray-600 hover:text-gray-900 transition-colors duration-200 p-2 hover:bg-gray-100 rounded-full"
16+
aria-label="GitHub Profile"
17+
>
18+
<Fragment set:html={github} />
19+
</a>
20+
)}
21+
{linkedinUrl && (
22+
<a
23+
href={linkedinUrl}
24+
class="text-gray-600 hover:text-gray-900 transition-colors duration-200 p-2 hover:bg-gray-100 rounded-full"
25+
aria-label="LinkedIn Profile"
26+
>
27+
<Fragment set:html={linkedin} />
28+
</a>
29+
)}
30+
{instagramUrl && (
31+
<a
32+
href={instagramUrl}
33+
class="text-gray-600 hover:text-gray-900 transition-colors duration-200 p-2 hover:bg-gray-100 rounded-full"
34+
aria-label="Instagram Profile"
35+
>
36+
<Fragment set:html={instagram} />
37+
</a>
38+
)}
39+
</div>

‎src/components/CommunityCard/Tags.astro

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
interface Props {
3+
tags: string[];
4+
}
5+
6+
const { tags } = Astro.props;
7+
---
8+
9+
<div class="flex flex-wrap gap-2">
10+
{tags.map((tag) => (
11+
<span class="px-3 py-1 bg-blue-50 text-xs font-medium rounded-full text-blue-600 hover:bg-blue-100 transition-colors duration-200 cursor-default">
12+
{tag}
13+
</span>
14+
))}
15+
</div>

‎src/interfaces/communities.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
export interface Community {
22
name: string,
33
description: string,
4-
links: Links,
4+
links?: Links,
55
tags: string[],
66
image: string
77
}
88

99
export interface Links{
1010
website: string,
11-
social: string
11+
social?: SocialLinks
12+
}
13+
14+
export interface SocialLinks{
15+
githubUrl?: string;
16+
linkedinUrl?: string;
17+
instagramUrl?: string;
1218
}

‎src/pages/communities.astro

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
import Layout from '../layouts/Layout.astro';
33
import communities from '../assets/communities.json'
44
import type { Community } from '../interfaces/communities';
5-
import CardCommunity from '../components/CardCommunity.astro';
5+
import CommunityCard from '../components/CommunityCard/CommunityCard.astro';
66
77
---
88

99
<Layout title="Comunidades - Ecuador In Tech">
10-
<div class="container mx-auto px-4 py-12">
10+
<div class="container mx-auto max-w-fit px-4 py-12">
1111
<h1 class="text-4xl font-bold mb-8">Comunidades</h1>
12-
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
12+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
1313
{
1414
communities.map((community:Community) => (
15-
<CardCommunity {...community} />
15+
<CommunityCard {...community} />
1616
))
1717
}
1818
</div>

0 commit comments

Comments
 (0)