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:
@@ -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!';
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user