Refactor IP copy functionality into a reusable component

Extracted the "Copy IP" button to a new `CopyIpComponent` to improve reusability and modularity. Updated `HomeComponent` to use this new component and removed redundant methods for copying text to the clipboard. Added tests and styles for the new component.
This commit is contained in:
2025-04-05 22:07:53 +02:00
parent dee84cc1a9
commit 297bd473a6
7 changed files with 46 additions and 12 deletions
@@ -0,0 +1,3 @@
<button type="button" style="margin-top: 50px;" class="button-outer" (click)="copyIpToClipboard()">
<span class="button-inner">{{ displayText }}</span>
</button>
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CopyIpComponent } from './copy-ip.component';
describe('CopyIpComponent', () => {
let component: CopyIpComponent;
let fixture: ComponentFixture<CopyIpComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [CopyIpComponent]
})
.compileComponents();
fixture = TestBed.createComponent(CopyIpComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
@@ -0,0 +1,16 @@
import {Component} from '@angular/core';
@Component({
selector: 'app-copy-ip',
templateUrl: './copy-ip.component.html',
styleUrl: './copy-ip.component.scss'
})
export class CopyIpComponent {
public displayText: string = 'Copy IP'
public copyIpToClipboard(): void {
navigator.clipboard.writeText('play.alttd.com');
this.displayText = 'Copied!';
}
}