added form btn component

src/app/components/add-task/add-task.component.html

@@ -265,24 +265,23 @@
       </div>
     </div>
     <div class="form-buttons">
-      <input
+      <app-form-btn
-        class="btn-clear"
+        [class]="'btn-clear'"
-        type="button"
+        [type]="'button'"
-        value="Clear"
+        [value]="'Clear'"
         (click)="removeTaskData()"
         [ngStyle]="{ display: overlayData !== '' ? 'none' : 'block' }"
-      />
+      ></app-form-btn>
-      <input
+      <app-form-btn
-        class="btn-delete"
+        [class]="'btn-delete'"
-        type="button"
+        [type]="'button'"
-        value="Delete"
+        [value]="'Delete'"
-        (click)="deleteTaskData(overlayData)"
         [ngStyle]="{ display: overlayData !== '' ? 'block' : 'none' }"
-      />
+      ></app-form-btn>
-      <input
+      <app-form-btn
-        class="btn-submit"
+        [class]="'btn-submit'"
-        type="submit"
+        [type]="'submit'"
-        value="{{ overlayData !== '' ? 'Update Task' : 'Create Task' }}"
+        [value]="overlayData.toString() !== '' ? 'Update Task' : 'Create Task'"
         [disabled]="
           title.invalid ||
           !taskData.title ||
@@ -295,7 +294,7 @@
           category.invalid ||
           !taskData.category
         "
-      />
+      ></app-form-btn>
     </div>
   </form>
 </section>

src/app/components/add-task/add-task.component.ts

@@ -7,11 +7,12 @@ import { FirebaseService } from '../../services/firebase.service';
 import { Task } from '../../interfaces/task.interface';
 import { OverlayService } from '../../services/overlay.service';
 import { empty } from 'rxjs';
+import { FormBtnComponent } from '../../shared/components/buttons/form-btn/form-btn.component';
 
 @Component({
   selector: 'app-add-task',
   standalone: true,
-  imports: [FormsModule, CommonModule, AssignedComponent],
+  imports: [FormsModule, CommonModule, AssignedComponent, FormBtnComponent],
   templateUrl: './add-task.component.html',
   styleUrl: './add-task.component.scss',
 })

src/app/shared/components/buttons/form-btn/form-btn.component.html

@@ -0,0 +1,6 @@
+<input
+  class="{{ class }}"
+  type="{{ type }}"
+  value="{{ value }}"
+  [disabled]="disabled"
+/>

src/app/shared/components/buttons/form-btn/form-btn.component.scss

@@ -0,0 +1,66 @@
+.btn-submit {
+  width: 183px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--black) !important;
+  background-color: var(--light-gray);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  &:hover:not(:disabled) {
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+    background-color: var(--light-blue) !important;
+    border: 1px solid var(--light-blue) !important;
+    cursor: pointer;
+  }
+  &:not(:disabled) {
+    background-color: var(--very-dark-blue) !important;
+    color: var(--white);
+  }
+  &:hover {
+    cursor: default;
+  }
+}
+
+.btn-clear {
+  width: 110px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  color: var(--black);
+  background-color: var(--white);
+  border: 1px solid var(--black);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    color: var(--light-blue);
+    border-color: var(--light-bluek);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}
+
+.btn-delete {
+  width: 110px;
+  height: 56px;
+  padding: 12px;
+  margin: 12px 12px;
+  border-radius: 10px;
+  color: var(--red);
+  background-color: var(--white);
+  border: 1px solid var(--red);
+  font-size: 23px;
+  font-weight: 400;
+  transition: 125ms ease-in-out;
+  cursor: pointer;
+  &:hover {
+    color: var(--white);
+    background-color: var(--red);
+    border-color: var(--black);
+    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.3);
+  }
+}

src/app/shared/components/buttons/form-btn/form-btn.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FormBtnComponent } from './form-btn.component';
+
+describe('FormBtnComponent', () => {
+  let component: FormBtnComponent;
+  let fixture: ComponentFixture<FormBtnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormBtnComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(FormBtnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/buttons/form-btn/form-btn.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-form-btn',
+  standalone: true,
+  imports: [],
+  templateUrl: './form-btn.component.html',
+  styleUrl: './form-btn.component.scss',
+})
+export class FormBtnComponent {
+  @Input() class: string = '';
+  @Input() type: string = '';
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+}