diff --git a/components/OpenHours.tsx b/components/OpenHours.tsx
new file mode 100644
index 0000000..9f0b3e8
--- /dev/null
+++ b/components/OpenHours.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from '../styles/OpenHours.module.scss';
+
+export const OpenHours = () => {
+ return (
+ <>
+
Auki:
+ ma-la 12:00-19:00
+
+ kysynnän ja sään salliessa myös pidempään
+
+ Tervetuloa!
+ >
+ );
+};
diff --git a/pages/index.tsx b/pages/index.tsx
index 9171d32..4ab96cd 100644
--- a/pages/index.tsx
+++ b/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() {
- Auki:
- ma-la 12:00-19:00
-
- kysynnän ja sään salliessa myös pidempään
-
- Tervetuloa!
-
-
-
+
+
+
);
diff --git a/styles/Index.module.scss b/styles/Index.module.scss
index 34313f4..fed1c29 100644
--- a/styles/Index.module.scss
+++ b/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;
diff --git a/styles/OpenHours.module.scss b/styles/OpenHours.module.scss
new file mode 100644
index 0000000..f10c706
--- /dev/null
+++ b/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;
+}