Implement command line component

src/app/app.module.ts

@@ -80,6 +80,7 @@ import { ExternalComponent } from './page/splash-layout/external/external.compon
 import { SplashLayoutComponent } from './page/splash-layout/splash-layout.component';
 import { ContactUsComponent } from './page/landing-layout/contact-us/contact-us.component';
 import { AnimatedCodeEditorComponent } from './component/animated-code-editor/animated-code-editor.component';
+import { CommandLineComponent } from './component/command-line/command-line.component';
 
 FullCalendarModule.registerPlugins( [
   dayGridPlugin,
@@ -147,6 +148,7 @@ FullCalendarModule.registerPlugins( [
     AboutUsComponent,
     ContactUsComponent,
     AnimatedCodeEditorComponent,
+    CommandLineComponent,
   ],
   imports: [
     BrowserModule,

src/app/component/animated-code-editor/animated-code-editor.component.html

@@ -1,20 +1,26 @@
 <div class="code-editor">
   <div class="code-editor-header">
     <p class="code-editor-title">OTH Terminal</p>
+    <div class="arrow-right"></div>
   </div>
 
   <div class="code-editor-content">
-    <p class="command-line">
-      <span class="request command">$</span>open-template-hub-server-generator
-    </p>
-    <p class="command-line"><span class="response command">></span> 1) Payment Server</p>
-    <p class="command-line"><span class="response command">></span> 2) Auth Server</p>
-    <p class="command-line">
-      <span class="response command">></span> 3) Basic Info Server
-    </p>
-    <p class="command-line">
-      <span class="response command">></span> Please enter a server type you want to
-      generate:
-    </p>
+    <app-command-line
+      [command]="'open-template-hub-server-generator'"
+      [type]="1"
+    >
+    </app-command-line>
+    <app-command-line [command]="'1) Payment Server'" [type]="2">
+    </app-command-line>
+    <app-command-line [command]="'2) Auth Server'" [type]="2">
+    </app-command-line>
+    <app-command-line [command]="'3) Basic Info Server'" [type]="2">
+    </app-command-line>
+    <app-command-line
+      [command]="'Please enter a server type you want to
+    generate:'"
+      [type]="2"
+    >
+    </app-command-line>
   </div>
 </div>

src/app/component/animated-code-editor/animated-code-editor.component.scss

@@ -12,36 +12,24 @@
 
 .code-editor-header {
   border-bottom: 0.5px solid var(--lighter);
+  display: flex;
+  flex-direction: row;
 }
 
 .code-editor-title {
-  padding: 8px;
-  font-size: 20px;
-  background: var(--info);
+  padding: 12px;
+  font-size: 16px;
+  background: var(--error);
   text-transform: uppercase;
   box-sizing: border-box;
-  width: 160px;
+  width: 140px;
   color: var(--card);
   font-weight: 500;
 }
 
-.command {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.command-line {
-  color: var(--card);
-  font-size: 14px;
-  margin-top: 5px;
-}
-
-.response {
-  margin-right: 10px;
-  color: var(--card);
-}
-
-.request {
-  margin-right: 8px;
-  color: var(--info);
+.arrow-right {
+  width: 20px;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid var(--error);
 }

src/app/component/command-line/command-line.component.html

@@ -0,0 +1,5 @@
+<p class="command-line">
+  <span class="request command" *ngIf="type === 1">$</span>
+  <span class="response command" *ngIf="type === 2">></span>
+  {{ command }}
+</p>

src/app/component/command-line/command-line.component.scss

@@ -0,0 +1,20 @@
+.command {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.command-line {
+  color: var(--card);
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+.response {
+  margin-right: 10px;
+  color: var(--warn);
+}
+
+.request {
+  margin-right: 8px;
+  color: var(--error);
+}

src/app/component/command-line/command-line.component.spec.ts

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

src/app/component/command-line/command-line.component.ts

@@ -0,0 +1,16 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { CommandType } from 'src/app/enum/command-type.enum';
+
+@Component({
+  selector: 'app-command-line',
+  templateUrl: './command-line.component.html',
+  styleUrls: ['./command-line.component.scss'],
+})
+export class CommandLineComponent implements OnInit {
+  @Input() command: string = '';
+  @Input() type: CommandType = CommandType.Request;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}

src/app/enum/command-type.enum.ts

@@ -0,0 +1,4 @@
+export enum CommandType {
+  Request = 1,
+  Response = 2,
+}