more progress

paulmojicatech · Jan 22, 2023 · 0d95096 · 0d95096
1 parent 05cf4d2
commit 0d95096
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 29 deletions.
diff --git a/libs/pmt-calendar/src/components.d.ts b/libs/pmt-calendar/src/components.d.ts
@@ -8,8 +8,6 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 export namespace Components {
     interface PmtCalendar {
     }
-    interface PmtCalendarSubHeader {
-    }
 }
 declare global {
     interface HTMLPmtCalendarElement extends Components.PmtCalendar, HTMLStencilElement {
@@ -18,33 +16,22 @@ declare global {
         prototype: HTMLPmtCalendarElement;
         new (): HTMLPmtCalendarElement;
     };
-    interface HTMLPmtCalendarSubHeaderElement extends Components.PmtCalendarSubHeader, HTMLStencilElement {
-    }
-    var HTMLPmtCalendarSubHeaderElement: {
-        prototype: HTMLPmtCalendarSubHeaderElement;
-        new (): HTMLPmtCalendarSubHeaderElement;
-    };
     interface HTMLElementTagNameMap {
         "pmt-calendar": HTMLPmtCalendarElement;
-        "pmt-calendar-sub-header": HTMLPmtCalendarSubHeaderElement;
     }
 }
 declare namespace LocalJSX {
     interface PmtCalendar {
     }
-    interface PmtCalendarSubHeader {
-    }
     interface IntrinsicElements {
         "pmt-calendar": PmtCalendar;
-        "pmt-calendar-sub-header": PmtCalendarSubHeader;
     }
 }
 export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
             "pmt-calendar": LocalJSX.PmtCalendar & JSXBase.HTMLAttributes<HTMLPmtCalendarElement>;
-            "pmt-calendar-sub-header": LocalJSX.PmtCalendarSubHeader & JSXBase.HTMLAttributes<HTMLPmtCalendarSubHeaderElement>;
         }
     }
 }
diff --git a/libs/pmt-calendar/src/components/calendar/calendar.scss b/libs/pmt-calendar/src/components/calendar/calendar.scss
@@ -1,16 +1,15 @@
 :host {
   display: block;
+  top: 0;
+  left: 0;
+  position: absolute;
 }
 
 .container {
-  padding: 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100vw;
-  pmt-calendar-header {
-    width: 100%;
-  }
 }
 
 
@@ -19,6 +18,7 @@
   justify-content: center;
   justify-self: center;
   width: 100%;
+  padding: 1rem 0;
   span {
       padding: 1rem;
 
@@ -33,3 +33,24 @@
       }
   }
 }
+.calendar-sub-header {
+  display: inline-flex;
+  justify-content: space-between;
+  padding: 0 1rem;
+  h1 {
+    font-size: 2rem;
+    font-weight: 400;
+  }
+  .move-view-container {
+    display: inline-flex;
+    align-self: center;
+    button {
+      height: 2rem;
+      padding: .5rem;
+      background-color: #fff;
+      &::second {
+        width: 50%;
+      }
+    }
+  }
+}
diff --git a/libs/pmt-calendar/src/components/calendar/calendar.tsx b/libs/pmt-calendar/src/components/calendar/calendar.tsx
@@ -36,21 +36,25 @@ export class CalendarComponent {
   render() {
     return (
       <section class="container">
-        <div class="header">
         <div class="calendar-header-container">
-                {Object.keys(CALENDAR_VIEW).map(key => {
-                    return (
-                        <button 
-                            class={CALENDAR_VIEW[key] === this.currentView ? 'selected' : ''} 
-                            onClick={() => this.updateCurrentView(CALENDAR_VIEW[key])} key={key}>
-                                {CALENDAR_VIEW[key]}
-                        </button>
-                    );
-                })}
-            </div>
+            {Object.keys(CALENDAR_VIEW).map(key => {
+                return (
+                    <button 
+                        class={CALENDAR_VIEW[key] === this.currentView ? 'selected' : ''} 
+                        onClick={() => this.updateCurrentView(CALENDAR_VIEW[key])} key={key}>
+                            {CALENDAR_VIEW[key]}
+                    </button>
+                );
+            })}
         </div>
-        <div class="subb-header">
+        <div class="calendar-sub-header">
           <h1>{this.currentSubTitle}</h1>
+          <div class="move-view-container">
+              <button>{'<'}</button>
+              <button>Today</button>
+              <button>{'>'}</button>
+
+          </div>
         </div>
       </section>