Open hours to separate component

components/OpenHours.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from '../styles/OpenHours.module.scss';
+
+export const OpenHours = () => {
+  return (
+    <>
+      <h2 className={styles.openHoursTitle}>Auki:</h2>
+      <p className={styles.openHoursText}>ma-la 12:00-19:00</p>
+      <p className={styles.openHoursDesc}>
+        kysynnän ja sään salliessa myös pidempään
+      </p>
+      <h2 className={styles.openHoursTitle}>Tervetuloa!</h2>
+    </>
+  );
+};

pages/index.tsx

@@ -1,5 +1,6 @@
 import styles from '../styles/Index.module.scss';
 import Image from 'next/image';
+import { OpenHours } from '../components/OpenHours';
 
 export default function Index() {
   return (
@@ -20,15 +21,7 @@ export default function Index() {
         </header>
 
         <section className={styles.sectionContainer}>
-          <h2 className={styles.openHoursTitle}>Auki:</h2>
+          <OpenHours />
-          <p className={styles.openHoursText}>ma-la 12:00-19:00</p>
-          <p className={styles.openHoursDesc}>
-            kysynnän ja sään salliessa myös pidempään
-          </p>
-          <h2 className={styles.openHoursTitle}>Tervetuloa!</h2>
-        </section>
-
-        <section className={styles.sectionContainer}>
           <Image
             className={styles.keepersImage}
             src='/elvira-iveta.png'
@@ -133,6 +126,10 @@ export default function Index() {
         </section>
 
         <span className={styles.separator} />
+
+        <section className={styles.sectionContainer}>
+          <OpenHours />
+        </section>
       </div>
     </div>
   );

styles/Index.module.scss

@@ -42,22 +42,6 @@
   letter-spacing: normal;
 }
 
-.openHoursTitle {
-  font-weight: 700;
-  margin: 0;
-  font-size: 100%;
-}
-
-.openHoursText {
-  margin-top: 0.5rem;
-}
-
-.openHoursDesc {
-  max-width: 15rem;
-  text-align: center;
-  margin-top: 0;
-}
-
 .keepersImage {
   max-width: 150px;
   margin-top: 1.5rem;

styles/OpenHours.module.scss

@@ -0,0 +1,16 @@
+.openHoursTitle {
+  font-weight: 700;
+  margin: 0;
+  font-size: 100%;
+  margin-top: 1rem;
+}
+
+.openHoursText {
+  margin-top: 0.5rem;
+}
+
+.openHoursDesc {
+  max-width: 15rem;
+  text-align: center;
+  margin-top: 0;
+}