Skip to content

Commit 79a8770

Browse files
HeliasHelias
committed
refactor: update contacts page
1 parent 59be4b3 commit 79a8770

File tree

7 files changed

+215
-134
lines changed

7 files changed

+215
-134
lines changed

‎src/app/components/contact/contact-button/contact-button.component.spec.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { ContactButtonComponent } from './contact-button.component';
3+
4+
describe('ContactButtonComponent', () => {
5+
let component: ContactButtonComponent;
6+
let fixture: ComponentFixture<ContactButtonComponent>;
7+
8+
beforeEach(async () => {
9+
await TestBed.configureTestingModule({
10+
imports: [ContactButtonComponent],
11+
}).compileComponents();
12+
13+
fixture = TestBed.createComponent(ContactButtonComponent);
14+
fixture.componentRef.setInput('id', 'test');
15+
fixture.componentRef.setInput('href', 'https://example.com');
16+
fixture.componentRef.setInput('ariaLabel', 'Test');
17+
component = fixture.componentInstance;
18+
fixture.detectChanges();
19+
});
20+
21+
it('should create', () => {
22+
expect(component).toBeTruthy();
23+
});
24+
});

‎src/app/components/contact/contact-button/contact-button.component.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-contact-button',
5+
changeDetection: ChangeDetectionStrategy.OnPush,
6+
template: `
7+
<a
8+
[id]="id()"
9+
[rel]="rel()"
10+
target="_blank"
11+
[href]="href()"
12+
role="button"
13+
class="w-40"
14+
[class]="buttonClass()"
15+
[attr.aria-label]="ariaLabel()"
16+
>
17+
<ng-content />
18+
</a>
19+
`,
20+
})
21+
export class ContactButtonComponent {
22+
id = input.required<string>();
23+
href = input.required<string>();
24+
ariaLabel = input.required<string>();
25+
buttonClass = input<string>('');
26+
rel = input<string>('noopener');
27+
}

‎src/app/components/contact/contact-group/contact-group.component.spec.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { ComponentFixture, TestBed } from '@angular/core/testing';
2+
import { ContactGroupComponent } from './contact-group.component';
3+
4+
describe('ContactGroupComponent', () => {
5+
let component: ContactGroupComponent;
6+
let fixture: ComponentFixture<ContactGroupComponent>;
7+
8+
beforeEach(async () => {
9+
await TestBed.configureTestingModule({
10+
imports: [ContactGroupComponent],
11+
}).compileComponents();
12+
13+
fixture = TestBed.createComponent(ContactGroupComponent);
14+
fixture.componentRef.setInput('title', 'Test');
15+
component = fixture.componentInstance;
16+
fixture.detectChanges();
17+
});
18+
19+
it('should create', () => {
20+
expect(component).toBeTruthy();
21+
});
22+
});

‎src/app/components/contact/contact-group/contact-group.component.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ChangeDetectionStrategy, Component, input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-contact-group',
5+
changeDetection: ChangeDetectionStrategy.OnPush,
6+
host: { class: 'flex flex-col items-center', '[class]': 'gap()' },
7+
template: `
8+
<h3 class="mb-2 text-[0.85rem] tracking-[0.08em] text-(--muted) uppercase">{{ title() }}</h3>
9+
<ng-content />
10+
`,
11+
})
12+
export class ContactGroupComponent {
13+
title = input.required<string>();
14+
gap = input<string>('gap-2');
15+
}

‎src/app/components/contact/contact.component.html‎

Lines changed: 67 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -4,153 +4,120 @@ <h2>Contacts</h2>
44
<div class="mt-8 flex flex-wrap justify-center gap-12">
55
<!-- Column: Chat + Social -->
66
<div class="flex flex-col gap-8">
7-
<div class="flex flex-col items-center gap-2">
8-
<h3 class="mb-2 text-[0.85rem] tracking-[0.08em] text-[var(--muted)] uppercase">Chat</h3>
9-
<a
7+
<app-contact-group title="Chat">
8+
<app-contact-button
109
id="telegram"
1110
rel="me noopener"
12-
target="_blank"
1311
href="https://t.me/pythoncatania"
14-
role="button"
15-
class="w-40 border-[#2aabee] bg-[#2aabee] text-white hover:border-[#1d96d4] hover:bg-[#1d96d4]"
16-
aria-label="Telegram"
12+
ariaLabel="Telegram"
13+
buttonClass="border-[#2aabee] bg-[#2aabee] text-white hover:border-[#1d96d4] hover:bg-[#1d96d4]"
1714
>
18-
<app-icon-telegram />Telegram</a
19-
>
20-
</div>
15+
<app-icon-telegram />Telegram
16+
</app-contact-button>
17+
</app-contact-group>
2118

22-
<div class="flex flex-col items-center gap-5">
23-
<h3 class="mb-2 text-[0.85rem] tracking-[0.08em] text-(--muted) uppercase">Social</h3>
24-
<a
19+
<app-contact-group title="Social" gap="gap-5">
20+
<app-contact-button
2521
id="facebook"
2622
rel="me noopener"
27-
target="_blank"
2823
href="https://www.facebook.com/PythonCatania"
29-
role="button"
30-
class="hover:border-secondary-hover hover:bg-secondary-hover border-secondary bg-secondary w-40 text-white"
31-
aria-label="Facebook"
32-
>
33-
<app-icon-facebook />Facebook</a
24+
ariaLabel="Facebook"
25+
buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
3426
>
35-
<a
27+
<app-icon-facebook />Facebook
28+
</app-contact-button>
29+
<app-contact-button
3630
id="linkedin"
3731
rel="me noopener"
38-
target="_blank"
3932
href="https://www.linkedin.com/groups/9895708/"
40-
role="button"
41-
class="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover w-40 text-white"
42-
aria-label="LinkedIn"
43-
>
44-
<app-icon-linkedin />LinkedIn</a
33+
ariaLabel="LinkedIn"
34+
buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
4535
>
46-
<a
36+
<app-icon-linkedin />LinkedIn
37+
</app-contact-button>
38+
<app-contact-button
4739
id="youtube"
4840
rel="me noopener"
49-
target="_blank"
5041
href="https://www.youtube.com/@pythoncatania"
51-
role="button"
52-
class="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover w-40 text-white"
53-
aria-label="YouTube"
42+
ariaLabel="YouTube"
43+
buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
5444
>
55-
<app-icon-youtube />YouTube</a
56-
>
57-
<a
45+
<app-icon-youtube />YouTube
46+
</app-contact-button>
47+
<app-contact-button
5848
id="instagram"
5949
rel="me noopener"
60-
target="_blank"
6150
href="https://www.instagram.com/pythoncatania/"
62-
role="button"
63-
class="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover w-40 text-white"
64-
aria-label="Instagram"
65-
>
66-
<app-icon-instagram />Instagram</a
51+
ariaLabel="Instagram"
52+
buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
6753
>
68-
<a
54+
<app-icon-instagram />Instagram
55+
</app-contact-button>
56+
<app-contact-button
6957
id="mastodon"
7058
rel="me noopener"
71-
target="_blank"
7259
href="https://social.python.it/@pycatania"
73-
role="button"
74-
class="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover w-40 text-white"
75-
aria-label="Mastodon"
76-
>
77-
<app-icon-mastodon />Mastodon</a
60+
ariaLabel="Mastodon"
61+
buttonClass="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover text-white"
7862
>
79-
</div>
63+
<app-icon-mastodon />Mastodon
64+
</app-contact-button>
65+
</app-contact-group>
8066
</div>
8167

82-
<!-- Column: Code + Networks + Media Partners + Community Partners -->
68+
<!-- Column: Code + Networks + Partners -->
8369
<div class="flex flex-col gap-8">
84-
<div class="flex flex-col items-center gap-2">
85-
<h3 class="mb-2 text-[0.85rem] tracking-[0.08em] text-(--muted) uppercase">Code</h3>
86-
<a
70+
<app-contact-group title="Code">
71+
<app-contact-button
8772
id="github"
8873
rel="me noopener"
89-
target="_blank"
9074
href="https://github.com/PythonCatania"
91-
role="button"
92-
class="border-secondary bg-secondary hover:border-secondary-hover hover:bg-secondary-hover w-40 text-white"
93-
aria-label="GitHub"
75+
ariaLabel="GitHub"
9476
>
95-
<app-icon-github />GitHub</a
96-
>
97-
</div>
77+
<app-icon-github />GitHub
78+
</app-contact-button>
79+
</app-contact-group>
9880

99-
<div class="flex flex-col items-center gap-2">
100-
<h3 class="mb-2 text-[0.85rem] tracking-[0.08em] text-[var(--muted)] uppercase">Networks</h3>
101-
<a
81+
<app-contact-group title="Networks">
82+
<app-contact-button
10283
id="python-software-foundation"
103-
rel="noopener"
104-
target="_blank"
10584
href="https://www.python.org/"
106-
role="button"
107-
class="w-40 border-[#f50000] bg-transparent text-[#f50000] hover:border-[#f50000] hover:bg-[#f50000]/10 hover:text-[#f50000]"
108-
aria-label="Python Software Foundation"
109-
>
110-
<app-icon-psf /><abbr title="Python Software Foundation">PSF</abbr></a
85+
ariaLabel="Python Software Foundation"
86+
buttonClass="border-[#f50000] bg-transparent text-[#f50000] hover:border-[#f50000] hover:bg-[#f50000]/10 hover:text-[#f50000]"
11187
>
112-
<a
88+
<app-icon-psf /><abbr title="Python Software Foundation">PSF</abbr>
89+
</app-contact-button>
90+
<app-contact-button
11391
id="python-italia"
114-
rel="noopener"
115-
target="_blank"
11692
href="https://www.python.it/"
117-
role="button"
118-
class="w-40 border-[#f50000] bg-transparent text-[#f50000] hover:border-[#f50000] hover:bg-[#f50000]/10 hover:text-[#f50000]"
119-
aria-label="Python Italia"
120-
>
121-
<app-icon-python-italia />Python&nbsp;Italia</a
93+
ariaLabel="Python Italia"
94+
buttonClass="border-[#f50000] bg-transparent text-[#f50000] hover:border-[#f50000] hover:bg-[#f50000]/10 hover:text-[#f50000]"
12295
>
123-
</div>
96+
<app-icon-python-italia />Python&nbsp;Italia
97+
</app-contact-button>
98+
</app-contact-group>
12499

125-
<div class="flex flex-col items-center gap-2">
126-
<h3 class="mb-2 text-[0.85rem] tracking-[0.08em] text-[var(--muted)] uppercase">Media Partners</h3>
127-
<a
100+
<app-contact-group title="Media Partners">
101+
<app-contact-button
128102
id="pycon-italia"
129-
rel="noopener"
130-
target="_blank"
131103
href="https://www.pycon.it/"
132-
role="button"
133-
class="w-40 border-white bg-transparent text-white hover:border-white hover:bg-white/10"
134-
aria-label="PyCon Italia"
104+
ariaLabel="PyCon Italia"
105+
buttonClass="border-white bg-transparent text-white hover:border-white hover:bg-white/10"
135106
>
136-
<app-icon-pycon-italia />PyCon&nbsp;Italia</a
137-
>
138-
</div>
107+
<app-icon-pycon-italia />PyCon&nbsp;Italia
108+
</app-contact-button>
109+
</app-contact-group>
139110

140-
<div class="flex flex-col items-center gap-2">
141-
<h3 class="mb-2 text-[0.85rem] tracking-[0.08em] text-[var(--muted)] uppercase">Community Partners</h3>
142-
<a
111+
<app-contact-group title="Community Partners">
112+
<app-contact-button
143113
id="google-developer-group-catania"
144-
rel="noopener"
145-
target="_blank"
146114
href="https://gdg.community.dev/gdg-catania/"
147-
role="button"
148-
class="w-40 border-white bg-transparent text-white hover:border-white hover:bg-white/10"
149-
aria-label="Google Developer Group Catania"
150-
>
151-
<app-icon-gdg /><abbr title="Google Developer Group">GDG</abbr>Catania</a
115+
ariaLabel="Google Developer Group Catania"
116+
buttonClass="border-white bg-transparent text-white hover:border-white hover:bg-white/10"
152117
>
153-
</div>
118+
<app-icon-gdg /><abbr title="Google Developer Group">GDG</abbr>&nbsp;Catania
119+
</app-contact-button>
120+
</app-contact-group>
154121
</div>
155122
</div>
156123
</section>

‎src/app/components/contact/contact.component.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { ContactButtonComponent } from './contact-button/contact-button.component';
3+
import { ContactGroupComponent } from './contact-group/contact-group.component';
24
import { IconFacebookComponent } from '../shared/icons/icon-facebook/icon-facebook.component';
35
import { IconGdgComponent } from '../shared/icons/icon-gdg/icon-gdg.component';
46
import { IconGithubComponent } from '../shared/icons/icon-github/icon-github.component';
@@ -14,17 +16,19 @@ import { IconYoutubeComponent } from '../shared/icons/icon-youtube/icon-youtube.
1416
@Component({
1517
selector: 'app-contact',
1618
imports: [
17-
IconTelegramComponent,
19+
ContactButtonComponent,
20+
ContactGroupComponent,
1821
IconFacebookComponent,
19-
IconLinkedinComponent,
20-
IconYoutubeComponent,
22+
IconGdgComponent,
23+
IconGithubComponent,
2124
IconInstagramComponent,
25+
IconLinkedinComponent,
2226
IconMastodonComponent,
23-
IconGithubComponent,
2427
IconPsfComponent,
25-
IconPythonItaliaComponent,
2628
IconPyconItaliaComponent,
27-
IconGdgComponent,
29+
IconPythonItaliaComponent,
30+
IconTelegramComponent,
31+
IconYoutubeComponent,
2832
],
2933
templateUrl: './contact.component.html',
3034
changeDetection: ChangeDetectionStrategy.OnPush,

0 commit comments

Comments
 (0)