From 65687a6e6b709eb313a2b9ba4f9dc0e23eee3fea Mon Sep 17 00:00:00 2001
From: codevictory <main@codevictory.net>
Date: Sun, 19 Dec 2021 21:12:18 +0200
Subject: [PATCH] Date and place -section to separate component.

---
 src/components/DateAndPlace.scss | 19 +++++++++++++++++++
 src/components/DateAndPlace.tsx  | 17 +++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/DateAndPlace.scss
 create mode 100644 src/components/DateAndPlace.tsx

diff --git a/src/components/DateAndPlace.scss b/src/components/DateAndPlace.scss
new file mode 100644
index 0000000..fd61ae8
--- /dev/null
+++ b/src/components/DateAndPlace.scss
@@ -0,0 +1,19 @@
+@import '../colors.scss';
+
+.dateAndPlace {
+  text-align: center;
+  text-transform: uppercase;
+  font-size: calc(10px + 2vmin);
+
+  h2 {
+    font-family: 'Montserrat-Medium';
+    font-size: 1.4rem;
+    color: $brown-text !important;
+    margin-bottom: -0.7rem;
+  }
+
+  h3 {
+    font-size: 1rem;
+    color: $brown-text !important;
+  }
+}
diff --git a/src/components/DateAndPlace.tsx b/src/components/DateAndPlace.tsx
new file mode 100644
index 0000000..0d9f041
--- /dev/null
+++ b/src/components/DateAndPlace.tsx
@@ -0,0 +1,17 @@
+import './DateAndPlace.scss';
+
+import { FormattedMessage } from 'react-intl';
+
+export const DateAndPlace = () => {
+  return (
+    <div className='dateAndPlace'>
+      <h2>
+        <FormattedMessage id='common.datetime' />
+      </h2>
+
+      <h3>
+        <FormattedMessage id='common.place' />
+      </h3>
+    </div>
+  );
+};