changing components to typescript

Anita-ihuman · Feb 17, 2021 · d5bbccd · d5bbccd
1 parent d4c2a82
commit d5bbccd
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 27 deletions.
diff --git a/pages/container.tsx b/pages/container.tsx
@@ -1,11 +1,12 @@
-import styles from "../styles/container.module.scss";
-import Head from "next/head";
+// import styles from "../styles/container.module.scss";
+// import Head from "next/head";
+// import { Element } from '../pages/main'
 
-const Container = () => {
-  return (
-    <div className={styles.container}>
-
-    </div>
-  );
-};
-export default Container;
+
+// const Container = () => {
+//   return (
+//     <div className={styles.container}>
+      
+//   );
+// };
+// export default Container;
diff --git a/pages/index.js b/pages/index.js
@@ -1,8 +1,10 @@
 import Head from "next/head";
 import styles from "../styles/Home.module.css";
+import { Element } from '../pages/main'
 
 export default function Home() {
   return (
+    <>
     <div className={styles.Header}>
       <div className={styles.Header_title}>
         <div className={styles.Header_social}>
@@ -50,6 +52,14 @@ export default function Home() {
       <img src="MG.png" className={styles.mountain} alt="" />
       <img src="VG.png" className={styles.person} alt="" />
       <img src="BG Content.png" className={styles.shade} alt="" />
-    </div>
+      </div>
+    <Element
+        headtop="GET STARTED"
+        headbold="What level of  hiker are you?"
+        headtext="Determining what level of hiker you are can be an important tool when planning future hikes. This hiking level guide will help you plan hikes according to different hike ratings set by various websites like All Trails and Modern Hiker. What type of hiker are you – novice, moderate, advanced moderate, expert, or expert backpacker? "
+        headbottom="read more"
+      />
+
+    </>
   );
 }
diff --git a/pages/main.tsx b/pages/main.tsx
@@ -1,7 +1,19 @@
 import Head from "next/head";
 import styles from "../styles/main.module.scss";
 
-const Main = () => {
+export interface ElementProps {
+  headtop: string;
+  headbold: string;
+  headtext: string;
+  headbottom: string;
+}
+
+export function Element({
+  headtop,
+  headbold,
+  headtext,
+  headbottom,
+}: ElementProps) {
   return (
     <div className={styles.main}>
       <div className={styles.main_content}>
@@ -14,21 +26,12 @@ const Main = () => {
               <div className={styles.content_line}>
                 <img src="Rectangle 2.1.png" alt="" />
               </div>
-              <p className={styles.content_orange}>Get started</p>
+              <p className={styles.content_orange}>{headtop}</p>
             </div>
-            <h3 className={styles.content_bold}>
-              What level of hiker are you?
-            </h3>
-            <p>
-              Determining what level of hiker you are can be an important tool
-              when planning future hikes. This hiking level guide will help you
-              plan hikes according to different hike ratings set by various
-              websites like All Trails and Modern Hiker. What type of hiker are
-              you – novice, moderate, advanced moderate, expert, or expert
-              backpacker?
-            </p>
+            <h3 className={styles.content_bold}>{headbold}</h3>
+            <p>{headtext}</p>
             <div className={styles.content_bottom}>
-              <p>read more</p>
+              <p>{headbottom}</p>
               <img src="arrow_downward.png" />
             </div>
           </div>
@@ -39,5 +42,6 @@ const Main = () => {
       </div>
     </div>
   );
-};
-export default Main;
+}
+
+export default Element;