Create basic components for header and page header

src/App.css

@@ -1,7 +1,6 @@
 .app {
   display: flex;
   justify-content: center;
-  align-items: center;
   gap: 1rem;
 }
 
@@ -10,3 +9,9 @@
   border-radius: 10px;
   box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.25);
 }
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}

src/App.tsx

@@ -1,12 +1,13 @@
 import { useState } from 'react';
-import { Calendar, EventDetails } from 'components';
+import { Header, Calendar, EventDetails, PageHeader } from 'components';
 import { Event } from 'types/Event';
 import 'App.css';
 
 const App = () => {
   const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
 
   // TODO: How will this be structured?
+  // Test events => feel free to change the values for testing
   // date and time field NOT FINAL => need to account for timezones (unless it's worked out in the backend)
   const testEvents = [
     {
@@ -83,7 +84,11 @@ const App = () => {
 
   return (
     <div className="app">
-      {selectedEvent && <EventDetails selectedEvent={selectedEvent} />}
+      <div className="sidebar">
+        <Header />
+        <PageHeader />
+        {selectedEvent && <EventDetails selectedEvent={selectedEvent} />}
+      </div>
       <Calendar setSelectedEvent={setSelectedEvent} events={testEvents} />
     </div>
   );

src/components/Calendar/Calendar.css

@@ -31,7 +31,6 @@ h3 {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   width: fit-content;
-  border: 1px solid #bababa;
 }
 
 .calendar-cell {

src/components/EventDetails/EventDetails.css

@@ -1,5 +1,5 @@
 .event-details {
   display: block;
-  width: 30rem;
+  width: 20rem;
   padding: 1rem;
 }

src/components/Header/Header.css

@@ -0,0 +1,4 @@
+header h1 {
+  margin: 0.25rem;
+  font-size: 2.5rem;
+}

src/components/Header/Header.tsx

@@ -0,0 +1,11 @@
+import './Header.css';
+
+const Header = () => {
+  return (
+    <header>
+      <h1>Header</h1>
+    </header>
+  );
+};
+
+export default Header;

src/components/PageHeader/PageHeader.css

@@ -0,0 +1,5 @@
+.page-header {
+  display: block;
+  width: 20rem;
+  padding: 1rem;
+}

src/components/PageHeader/PageHeader.tsx

@@ -0,0 +1,11 @@
+import './PageHeader.css';
+
+const PageHeader = () => {
+  return (
+    <div className="page-header card">
+      <h2>Page Header</h2>
+    </div>
+  );
+};
+
+export default PageHeader;

src/components/index.ts

@@ -1,3 +1,5 @@
 export { default as Calendar } from 'components/Calendar/Calendar';
 export { default as CalendarEvent } from 'components/CalendarEvent/CalendarEvent';
 export { default as EventDetails } from 'components/EventDetails/EventDetails';
+export { default as PageHeader } from 'components/PageHeader/PageHeader';
+export { default as Header } from 'components/Header/Header';