From 59f9bad5832af9e1c522aa8afca031bff4c46746 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Mon, 25 Sep 2023 10:35:41 +0200
Subject: [PATCH] chore/added infor page component

---
 .../InfoPageComponent.style.tsx}              |  4 +-
 .../InfoPageComponent/InfoPageComponent.tsx   | 19 +++++++
 src/pages/About/About.tsx                     | 56 +++++++++----------
 3 files changed, 47 insertions(+), 32 deletions(-)
 rename src/{pages/About/About.styled.tsx => components/InfoPageComponent/InfoPageComponent.style.tsx} (79%)
 create mode 100644 src/components/InfoPageComponent/InfoPageComponent.tsx

diff --git a/src/pages/About/About.styled.tsx b/src/components/InfoPageComponent/InfoPageComponent.style.tsx
similarity index 79%
rename from src/pages/About/About.styled.tsx
rename to src/components/InfoPageComponent/InfoPageComponent.style.tsx
index fd10326b..d9d61468 100644
--- a/src/pages/About/About.styled.tsx
+++ b/src/components/InfoPageComponent/InfoPageComponent.style.tsx
@@ -1,7 +1,7 @@
 import styled from 'styled-components'
 import { spacings } from '../../tokens/spacings'
 
-const StyledAbout = styled.div`
+const StyledInforPage = styled.div`
   display: flex;
   flex-wrap: wrap;
 
@@ -19,4 +19,4 @@ const InnerWrapper = styled.div`
   row-gap: ${spacings.LARGE};
   width: 50%;
 `
-export { StyledAbout as About, InnerWrapper }
+export { InnerWrapper, StyledInforPage as Page }
diff --git a/src/components/InfoPageComponent/InfoPageComponent.tsx b/src/components/InfoPageComponent/InfoPageComponent.tsx
new file mode 100644
index 00000000..3cf50e3e
--- /dev/null
+++ b/src/components/InfoPageComponent/InfoPageComponent.tsx
@@ -0,0 +1,19 @@
+import { Typography } from '@equinor/eds-core-react'
+import * as Styled from './InfoPageComponent.style'
+
+export const InfoPageComponent = ({
+  title,
+  children,
+}: {
+  title: string
+  children?: JSX.Element[]
+}) => {
+  return (
+    <Styled.Page className="about-container">
+      <Styled.InnerWrapper>
+        <Typography variant="h1">{title}</Typography>
+        {children}
+      </Styled.InnerWrapper>
+    </Styled.Page>
+  )
+}
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
index a89d0b80..9c518806 100644
--- a/src/pages/About/About.tsx
+++ b/src/pages/About/About.tsx
@@ -1,37 +1,33 @@
 import { Typography } from '@equinor/eds-core-react'
-import * as Styled from './About.styled'
+import { InfoPageComponent } from '../../components/InfoPageComponent/InfoPageComponent'
 
 export const About = () => {
   return (
-    <Styled.About className="about-container">
-      <Styled.InnerWrapper>
-        <Typography variant="h1">About PEPM</Typography>
-        <Typography variant="body_long">
-          It began with the forging of the Great Rings. Three were given to{' '}
-          <Typography link href="https://nr.no/">
-            Norsk Regnesentral
-          </Typography>
-          , immortal, wisest and fairest of all beings. Seven to the
-          Dwarf-Lords, great miners and craftsmen of the mountain halls. And
-          nine, nine rings were gifted to the race of Men, who above all else
-          desire power. For within these rings was bound the strength and the
-          will to govern each race. But they were all of them deceived, for
-          another ring was made. Deep in the land of Mordor, in the Fires of
-          Mount Doom, the Dark Lord Sauron forged a master ring, and into this
-          ring he poured his cruelty, his malice and his will to dominate all
-          life.
+    <InfoPageComponent title="About New">
+      <Typography variant="body_long">
+        It began with the forging of the Great Rings. Three were given to{' '}
+        <Typography link href="https://nr.no/">
+          Norsk Regnesentral
         </Typography>
-        <Typography variant="h3">One ring to rule them all.</Typography>
-        <Typography variant="body_long">
-          One by one, the free lands of Middle-Earth fell to the power of the
-          Ring, but there were some who resisted. A last alliance of men and
-          elves marched against the armies of Mordor, and on the very slopes of
-          Mount Doom, they fought for the freedom of Middle-Earth. Victory was
-          near, but the power of the ring could not be undone. It was in this
-          moment, when all hope had faded, that Isildur, son of the king, took
-          up his father’s sword.
-        </Typography>
-      </Styled.InnerWrapper>
-    </Styled.About>
+        , immortal, wisest and fairest of all beings. Seven to the Dwarf-Lords,
+        great miners and craftsmen of the mountain halls. And nine, nine rings
+        were gifted to the race of Men, who above all else desire power. For
+        within these rings was bound the strength and the will to govern each
+        race. But they were all of them deceived, for another ring was made.
+        Deep in the land of Mordor, in the Fires of Mount Doom, the Dark Lord
+        Sauron forged a master ring, and into this ring he poured his cruelty,
+        his malice and his will to dominate all life.
+      </Typography>
+      <Typography variant="h3">One ring to rule them all.</Typography>
+      <Typography variant="body_long">
+        One by one, the free lands of Middle-Earth fell to the power of the
+        Ring, but there were some who resisted. A last alliance of men and elves
+        marched against the armies of Mordor, and on the very slopes of Mount
+        Doom, they fought for the freedom of Middle-Earth. Victory was near, but
+        the power of the ring could not be undone. It was in this moment, when
+        all hope had faded, that Isildur, son of the king, took up his father’s
+        sword.
+      </Typography>
+    </InfoPageComponent>
   )
 }