295 lesson7 (#325)

* finished lesson 7

* finished lesson 7 and slides

* finished lesson 7 scss

* changed global types so previous page and next page would be correct

* added lesson 7 header

src/App.tsx

@@ -10,6 +10,7 @@ import Lesson2_2 from './pages/Lesson2_2';
 import Lesson3 from './pages/Lesson3';
 import Lesson4 from './pages/Lesson4';
 import Lesson5 from './pages/Lesson5';
+import Lesson7 from './pages/Lesson7';
 import PointerMotivation from './pages/PointerMotivation';
 
 function App(): JSX.Element {
@@ -27,6 +28,7 @@ function App(): JSX.Element {
           <Route path="/exercise-1" element={<Exercise1 />} />
           <Route path="/lesson-4" element={<Lesson4 />} />
           <Route path="/lesson-5" element={<Lesson5 />} />
+          <Route path="/lesson-7" element={<Lesson7 />} />
           <Route path="/lesson-10" element={<Lesson10 />} />
           <Route path="*" element={<Error404 />} />
         </Routes>

src/pages/Lesson7.tsx

@@ -0,0 +1,53 @@
+import { FC } from 'react';
+import lesson7array from '../../public/lesson7array.png';
+import Slide1lesson7 from '../../public/Slide1lesson7.png';
+import Slide2lesson7 from '../../public/Slide2lesson7.png';
+import Slide3lesson7 from '../../public/Slide3lesson7.png';
+import Slide4lesson7 from '../../public/Slide4lesson7.png';
+import Slide5lesson7 from '../../public/Slide5lesson7.png';
+import Slide6lesson7 from '../../public/Slide6lesson7.png';
+import AppWrapper from '../components/AppWrapper';
+import NavButtons from '../components/NavButtons';
+import SlideShow from '../components/SlideShow';
+import { HeaderSections } from '../types/globalTypes';
+import '../styles/PageWrapper.scss';
+import '../styles/Lesson7.scss';
+
+const Lesson7: FC = () => {
+  const imageArray = [];
+
+  imageArray.push(<img src={Slide1lesson7} className="lesson7slides" />);
+  imageArray.push(<img src={Slide2lesson7} className="lesson7slides" />);
+  imageArray.push(<img src={Slide3lesson7} className="lesson7slides" />);
+  imageArray.push(<img src={Slide4lesson7} className="lesson7slides" />);
+  imageArray.push(<img src={Slide5lesson7} className="lesson7slides" />);
+  imageArray.push(<img src={Slide6lesson7} className="lesson7slides" />);
+
+  return (
+    <div>
+      <AppWrapper section={HeaderSections.LESSON_7}>
+        <div className="page-wrapper">
+          <h1>Arrays and Pointer Arithmetic</h1>
+          <p>
+            <b>Array:</b> a line of boxes that are the same size
+          </p>
+          <div className="diagram">
+            <img src={lesson7array} className="pipi"></img>
+          </div>
+          <p>
+            Let&apos;s talk about arrays, since they are helpful for
+            understanding pointer arithmetic! Arrays are typically used to
+            represent multiple values of the same type in one data structure. In
+            memory, arrays are represented by just having values set
+            contiguously in memory. This means that we can simply add to our
+            pointer to move the pointer to.
+          </p>
+          <SlideShow images={imageArray} />
+          <NavButtons page={10} />
+        </div>
+      </AppWrapper>
+    </div>
+  );
+};
+
+export default Lesson7;

src/styles/Lesson7.scss

@@ -0,0 +1,8 @@
+@import './global';
+
+// lesson7slides
+// =======================================
+
+.lesson7slides {
+  width: 55%;
+}

src/types/globalTypes.ts

@@ -15,6 +15,7 @@ export enum HeaderSections {
   EXERCISE_1 = 'Exercise 1',
   LESSON_4 = 'Lesson 4',
   LESSON_5 = 'Lesson 5',
+  LESSON_7 = 'Lesson 7',
   LESSON_10 = 'Lesson 10',
 }
 
@@ -49,9 +50,9 @@ export enum PageOrder {
   '/lesson-3',
   '/lesson-4',
   '/lesson-5',
-  /*'/lesson-6',
+  '/lesson-6',
   '/lesson-7',
-  '/lesson-8', */
+  '/lesson-8',
   '/lesson-10',
   '/exercise-1',
 }