CompanyCard

README.md

@@ -14,7 +14,7 @@ Before getting started with Training.JobVacancy.Frontend , ensure your runtime e
 
 ### Installation
 
-Install Training.JobVacancy.Frontend  using one of the following methods:
+Install Training.JobVacancy.Frontend using one of the following methods:
 
 **Build from source:**
 
@@ -27,7 +27,7 @@ Install Training.JobVacancy.Frontend  using one of the following methods:
 2. Navigate to the project directory:
 
 ```sh
-❯ Training.JobVacancy.Frontend 
+❯ Training.JobVacancy.Frontend
 ```
 
 3. Install the project dependencies:

angular.json

@@ -82,9 +82,7 @@
     }
   },
   "cli": {
-    "schematicCollections": [
-      "angular-eslint"
-    ],
+    "schematicCollections": ["angular-eslint"],
     "analytics": false
   }
 }

src/app/app.component.ts

@@ -2,20 +2,20 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { HeaderComponent } from './header/header.component';
-import { PlaygroundComponent } from './playground/playground.component';
-import { ToolbarComponent } from "./playground/toolbar/toolbar.component";
+import { ToolbarComponent } from './playground/toolbar/toolbar.component';
 
 @Component({
   selector: 'aa-root',
   standalone: true,
-  imports: [RouterOutlet, HeaderComponent, ToolbarComponent, PlaygroundComponent],
+  imports: [RouterOutlet, HeaderComponent, ToolbarComponent],
   template: `
     <aa-header />
     <aa-toolbar />
     <h1 class="aa--text-2xl">Welcome to {{ title }}!</h1>
-    <aa-playground />
-
-    <router-outlet />
+    <br />
+    <div class="aa--flex aa--justify-center">
+      <router-outlet />
+    </div>
   `,
   styleUrls: ['./app.component.scss'],
 })

src/app/app.routes.ts

@@ -1,3 +1,10 @@
 import { Routes } from '@angular/router';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: 'playground',
+    loadComponent: () =>
+      import('./playground/playground.component').then(m => m.PlaygroundComponent),
+  },
+  { path: '', redirectTo: 'playground', pathMatch: 'full' },
+];

src/app/playground/company-card/company-card.component.html

@@ -0,0 +1,41 @@
+@let company = companyData();
+<div
+  class="aa--p-6 aa--bg-white aa--border aa--border-gray-200 aa--rounded-lg aa--shadow-sm aa--text-xl"
+  style="width: 500px"
+>
+  <div class="aa--inline-block aa--mb-4 aa--me-4">
+    <div class="aa--rounded-lg aa--bg-pink-400 aa--p-3">
+      <fa-icon [icon]="faGlobe" class="aa--text-white" size="3x" />
+    </div>
+  </div>
+
+  <div class="aa--inline-block">
+    <div class="aa--mb-2">
+      <div class="aa--inline-block aa--font-bold aa--me-2">
+        {{ company.name }}
+      </div>
+      @if (company.isFeatured) {
+        <div
+          class="aa--inline-block aa--rounded-full aa--bg-pink-100 aa--px-3 aa--text-red-600"
+        >
+          Featured
+        </div>
+      }
+    </div>
+
+    <div class="aa--text-gray-400">
+      <fa-icon [icon]="faLocationDot" class="aa--me-2" size="sm" />
+      {{ company.location }}, {{ company.country }}
+    </div>
+  </div>
+
+  <div>
+    <button
+      type="button"
+      class="aa--container aa--bg-blue-100 aa--font-bold aa--rounded aa--text-blue-600 aa--px-5 aa--py-2.5 aa--me-2 aa--mb-2"
+      (click)="onOpenPositions()"
+    >
+      Open Positions ({{ company.openPositions }})
+    </button>
+  </div>
+</div>

src/app/playground/company-card/company-card.component.spec.ts

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

src/app/playground/company-card/company-card.component.ts

@@ -0,0 +1,26 @@
+import { Component, inject, input } from '@angular/core';
+import { Router } from '@angular/router';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { faGlobe, faLocationDot } from '@fortawesome/free-solid-svg-icons';
+
+import { Company } from '../models/company';
+
+@Component({
+  selector: 'aa-company-card',
+  imports: [FontAwesomeModule],
+  templateUrl: './company-card.component.html',
+  styleUrl: './company-card.component.scss',
+})
+export class CompanyCardComponent {
+  companyData = input.required<Company>();
+
+  router = inject(Router);
+
+  faGlobe = faGlobe;
+  faLocationDot = faLocationDot;
+
+  onOpenPositions() {
+    console.log('Open positions clicked');
+    this.router.navigateByUrl('#');
+  }
+}

src/app/playground/company-info/company-info.component.html

@@ -1,5 +1,12 @@
 <div class="company_info aa--flex aa--flex-row aa--mb-[12px]">
-    <aa-icon [iconPrefix]="'fas'" [iconName] = "'briefcase'" [size]="'2x'" [class]="'icon aa--text-[#f6efef] aa--h-[30px] aa--mt-[3px]'"/>
-    <h1 class="aa--text-white aa--text-[28px] aa--ml-[12px] aa--align-top">Jobpilot</h1>
+  <aa-icon
+    [iconPrefix]="'fas'"
+    [iconName]="'briefcase'"
+    [size]="'2x'"
+    [class]="'icon aa--text-[#f6efef] aa--h-[30px] aa--mt-[3px]'"
+  />
+  <h1 class="aa--text-white aa--text-[28px] aa--ml-[12px] aa--align-top">Jobpilot</h1>
 </div>
-<p class="aa--mt-[8px] aa--text-[16px]">6391 Elgin St. Celina, Delaware 10299, New York, United States of America</p>
+<p class="aa--mt-[8px] aa--text-[16px]">
+  6391 Elgin St. Celina, Delaware 10299, New York, United States of America
+</p>

src/app/playground/footer-icons/footer-icons.component.html

@@ -1,14 +1,32 @@
-<a href="#" target="_blank" >
-  <aa-icon [iconPrefix]="'fab'" [iconName] = "'facebook'" [size]="'2x'" [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"/> 
+<a href="#" target="_blank">
+  <aa-icon
+    [iconPrefix]="'fab'"
+    [iconName]="'facebook'"
+    [size]="'2x'"
+    [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"
+  />
 </a>
-<a href="#" target="_blank" >
-  <aa-icon [iconPrefix]="'fab'" [iconName] = "'youtube'" [size]="'2x'" [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"/>
+<a href="#" target="_blank">
+  <aa-icon
+    [iconPrefix]="'fab'"
+    [iconName]="'youtube'"
+    [size]="'2x'"
+    [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"
+  />
 </a>
-<a href="#" target="_blank" >
-  <aa-icon [iconPrefix]="'fab'" [iconName] = "'instagram'" [size]="'2x'" [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"/>
+<a href="#" target="_blank">
+  <aa-icon
+    [iconPrefix]="'fab'"
+    [iconName]="'instagram'"
+    [size]="'2x'"
+    [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"
+  />
 </a>
-<a href="#" target="_blank" >
-  <aa-icon [iconPrefix]="'fab'" [iconName] = "'twitter'" [size]="'2x'" [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"/>
+<a href="#" target="_blank">
+  <aa-icon
+    [iconPrefix]="'fab'"
+    [iconName]="'twitter'"
+    [size]="'2x'"
+    [classes]="'aa--text-[#ebe5e5] aa--h-[20px] aa--pr-[10px]'"
+  />
 </a>
-
-

src/app/playground/footer/footer.component.html

@@ -1,17 +1,21 @@
-<footer class="footer aa--pb-[8px] aa--bg-[#141414] aa--text-[#5f5d5d] aa--pt-5 aa--font-sans aa--mx-auto">
-
-   <div class="footer_content aa--grid aa--gap-4 grid-cols-1 md:aa--grid-cols-[1fr_3fr] mx-auto md:mx-0 md:aa--gap-[80px] aa--mx-auto aa--mt-[80px] aa--max-w-[1350px]">
-        <div class="aa--ml-4">
-            <aa-company-info />
-        </div>
-        <div >
-            <aa-links />
-        </div>
+<footer
+  class="footer aa--pb-[8px] aa--bg-[#141414] aa--text-[#5f5d5d] aa--pt-5 aa--font-sans aa--mx-auto"
+>
+  <div
+    class="footer_content aa--grid aa--gap-4 grid-cols-1 md:aa--grid-cols-[1fr_3fr] mx-auto md:mx-0 md:aa--gap-[80px] aa--mx-auto aa--mt-[80px] aa--max-w-[1350px]"
+  >
+    <div class="aa--ml-4">
+      <aa-company-info />
     </div>
-    <hr class="solid aa--mt-[70px] aa--border-t aa--border-[#3a3939] aa--w-[100%]" />
-    <div class="footer__more-info aa--ml-4 aa--text-base aa--max-w-[1350px] md:aa--mx-auto aa--my-[15px] md:aa--flex md:aa--flex-row md:aa--justify-between aa--ml-4 aa--flex aa--flex-col aa--gap-3">
-        <p class="aa--my-[5px]">&copy; 2021 JobPilot - Job Portal. All rights reserved.</p>
-        <aa-footer-icons />
+    <div>
+      <aa-links />
     </div>
+  </div>
+  <hr class="solid aa--mt-[70px] aa--border-t aa--border-[#3a3939] aa--w-[100%]" />
+  <div
+    class="footer__more-info aa--ml-4 aa--text-base aa--max-w-[1350px] md:aa--mx-auto aa--my-[15px] md:aa--flex md:aa--flex-row md:aa--justify-between aa--ml-4 aa--flex aa--flex-col aa--gap-3"
+  >
+    <p class="aa--my-[5px]">&copy; 2021 JobPilot - Job Portal. All rights reserved.</p>
+    <aa-footer-icons />
+  </div>
 </footer>
-

src/app/playground/icon/icon.component.html

@@ -1 +1 @@
-<fa-icon [icon]="resolvedIcon" [size]="resolvedSize" [class]="resolvedClasses" />
+<fa-icon [icon]="resolvedIcon" [size]="resolvedSize" [class]="resolvedClasses" />

src/app/playground/job-card/job-card.component.html

@@ -1,31 +1,69 @@
 @let jobInfo = jobData();
 
-<div class="aa--max-w-[620px] aa--bg-white aa--rounded-xl aa--px-[40px] aa--pt-7 aa--pb-3 aa--border-2 aa--border-gray-300  aa--gradient" style="background: linear-gradient(to right, #f7f0d8 30%, #fefaef 60%, #ffffff 100%);">
-  <h1 class="aa--text-black aa--text-[26px] aa--font-semibold aa--text-stone-700">{{jobInfo.jobTitle}}</h1>
-  <div class="sm:aa--flex sm:aa--flex-row sm:aa--gap-3 aa--mt-[15px] sm:aa--items-center ">
-    <div class=" aa--bg-gray-300 aa--w-full  aa--max-w-[120px] aa--py-1 aa--flex aa--items-center aa--justify-center aa--rounded-md  aa--text-[18px] aa--font-bold {{ jobInfo.jobStatus === 'PART-TIME' ? 'aa--bg-green-100 aa--text-green-500' : jobInfo.jobStatus === 'FULL-TIME' ? 'aa--bg-blue-100 aa--text-blue-500' :  'aa--bg-orange-100 aa--text-orange-500' }}">
-      {{jobInfo.jobStatus}}
+<div
+  class="aa--max-w-[620px] aa--bg-white aa--rounded-xl aa--px-[40px] aa--pt-7 aa--pb-3 aa--border-2 aa--border-gray-300 aa--gradient"
+  style="background: linear-gradient(to right, #f7f0d8 30%, #fefaef 60%, #ffffff 100%)"
+>
+  <h1 class="aa--text-black aa--text-[26px] aa--font-semibold aa--text-stone-700">
+    {{ jobInfo.jobTitle }}
+  </h1>
+  <div class="sm:aa--flex sm:aa--flex-row sm:aa--gap-3 aa--mt-[15px] sm:aa--items-center">
+    <div
+      class=" aa--bg-gray-300 aa--w-full  aa--max-w-[120px] aa--py-1 aa--flex aa--items-center aa--justify-center aa--rounded-md  aa--text-[18px] aa--font-bold {{
+        jobInfo.jobStatus === 'PART-TIME'
+          ? 'aa--bg-green-100 aa--text-green-500'
+          : jobInfo.jobStatus === 'FULL-TIME'
+            ? 'aa--bg-blue-100 aa--text-blue-500'
+            : 'aa--bg-orange-100 aa--text-orange-500'
+      }}"
+    >
+      {{ jobInfo.jobStatus }}
     </div>
-    <p class="aa--text-neutral-500 aa--text-[20px] aa--mt-2 sm:aa--mt-0">Salary: {{100000 | currency:'USD':true:'1.0-0'}} - {{150000 | currency:'USD':true:'1.0-0'}}</p>
+    <p class="aa--text-neutral-500 aa--text-[20px] aa--mt-2 sm:aa--mt-0">
+      Salary: {{ 100000 | currency: 'USD' : true : '1.0-0' }} -
+      {{ 150000 | currency: 'USD' : true : '1.0-0' }}
+    </p>
   </div>
-  <div class="aa--mt-3 sm:aa--mt-[30px] sm:aa--flex sm:aa--flex-row sm:aa--justify-between ">
+  <div
+    class="aa--mt-3 sm:aa--mt-[30px] sm:aa--flex sm:aa--flex-row sm:aa--justify-between"
+  >
     <div class="sm:aa--flex sm:aa--flex-column sm:aa--gap-4">
-      <div class="aa--h-[70px] aa--w-[70px] aa--flex aa--items-center aa--justify-center aa--bg-gray-100 aa--rounded-md ">
-        <img class="aa--h-[40px] aa--w-[70px] aa--object-contain " [src]="jobInfo.companyLogo" alt="Google Logo">
+      <div
+        class="aa--h-[70px] aa--w-[70px] aa--flex aa--items-center aa--justify-center aa--bg-gray-100 aa--rounded-md"
+      >
+        <img
+          class="aa--h-[40px] aa--w-[70px] aa--object-contain"
+          [src]="jobInfo.companyLogo"
+          alt="Google Logo"
+        />
       </div>
-      <div >
-        <h2 class="aa--mt-2 sm:aa--mt-0 aa--text-stone-800  aa--text-[21px] aa--font-medium aa--mb-[5px]">{{jobInfo.companyTitle}}</h2>
+      <div>
+        <h2
+          class="aa--mt-2 sm:aa--mt-0 aa--text-stone-800 aa--text-[21px] aa--font-medium aa--mb-[5px]"
+        >
+          {{ jobInfo.companyTitle }}
+        </h2>
         <div class="aa--flex aa--flex-row sm:aa--gap-2 aa--gap-1">
-          <fa-icon [icon]="faLocationDot" size="xl" class="aa--text-neutral-500"/>
+          <fa-icon [icon]="faLocationDot" size="xl" class="aa--text-neutral-500" />
           <div class="aa--mb-2">
-            <p class='aa--text-[20px] aa--text-neutral-500  sm:aa--pb-5 aa--pb-1'>{{jobInfo.city}}, {{jobInfo.country}}</p>
+            <p class="aa--text-[20px] aa--text-neutral-500 sm:aa--pb-5 aa--pb-1">
+              {{ jobInfo.city }}, {{ jobInfo.country }}
+            </p>
           </div>
         </div>
-      </div> 
+      </div>
     </div>
-    <button class="sm:aa--self-start sm:aa--mt-5 aa--mt-0 aa--flex  aa--justify-end"  (click)="onSaved()">
-      <fa-icon [icon]="faBookmark" size="2x" class="aa--text-neutral-300" [class.aa--text-red-300]="jobInfo.isSaved"
-      [class.aa--text-neutral-300]="!jobInfo.isSaved"/>
+    <button
+      class="sm:aa--self-start sm:aa--mt-5 aa--mt-0 aa--flex aa--justify-end"
+      (click)="onSaved()"
+    >
+      <fa-icon
+        [icon]="faBookmark"
+        size="2x"
+        class="aa--text-neutral-300"
+        [class.aa--text-red-300]="jobInfo.isSaved"
+        [class.aa--text-neutral-300]="!jobInfo.isSaved"
+      />
     </button>
   </div>
 </div>

src/app/playground/links/links.component.html

@@ -1,16 +1,29 @@
-<div class="aa--grid aa--grid-cols-1 md:aa--grid-cols-[1fr_1fr_1fr_1fr] aa--gap-4 aa--ml-4 ">
-@for(link of links; track link.title){
+<div
+  class="aa--grid aa--grid-cols-1 md:aa--grid-cols-[1fr_1fr_1fr_1fr] aa--gap-4 aa--ml-4"
+>
+  @for (link of links; track link.title) {
     <div class="aa--flex-col aa-gap-[5px]">
-        <h2 class="aa--font-bold aa--text-white aa--text-[21px] aa--mb-[8px]">{{link.title}}</h2>
-        @for(contentLink of link.contentLinks; track contentLink.title){
-            <p class="aa--mt-2">
-                <a href="{{ contentLink.href }}" class="aa--text-[18px] hover:aa--text-white aa--flex  aa--group aa--relative">
-                    <aa-icon [iconPrefix]="'fas'" [iconName] = "'arrow-right'" [size]="'1x'" [classes]="'aa--absolute aa--left-0 aa--translate-x-[-8px] aa--opacity-0 aa--text-xl aa--text-white aa--transition-all aa--duration-300 group-hover:aa--opacity-100 group-hover:aa--translate-x-0'"/>
-                    <span class="aa--pl-0 group-hover:aa--pl-6">{{ contentLink.title }}</span>
-                </a>
-            </p>
-        }
+      <h2 class="aa--font-bold aa--text-white aa--text-[21px] aa--mb-[8px]">
+        {{ link.title }}
+      </h2>
+      @for (contentLink of link.contentLinks; track contentLink.title) {
+        <p class="aa--mt-2">
+          <a
+            href="{{ contentLink.href }}"
+            class="aa--text-[18px] hover:aa--text-white aa--flex aa--group aa--relative"
+          >
+            <aa-icon
+              [iconPrefix]="'fas'"
+              [iconName]="'arrow-right'"
+              [size]="'1x'"
+              [classes]="
+                'aa--absolute aa--left-0 aa--translate-x-[-8px] aa--opacity-0 aa--text-xl aa--text-white aa--transition-all aa--duration-300 group-hover:aa--opacity-100 group-hover:aa--translate-x-0'
+              "
+            />
+            <span class="aa--pl-0 group-hover:aa--pl-6">{{ contentLink.title }}</span>
+          </a>
+        </p>
+      }
     </div>
-}
+  }
 </div>
-

src/app/playground/models/company.ts

@@ -0,0 +1,9 @@
+export interface Company {
+  name: string;
+  logoUrl: string;
+  location: string;
+  country: string;
+  isFeatured: boolean;
+  openPositions: number;
+  openPositionsUrl: string;
+}