♻️ refactor: Broke out Hero to own component

Ayngie · Jan 21, 2024 · d768fbd · d768fbd
1 parent aff0bfa
commit d768fbd
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -0,0 +1,13 @@
+import { StyledHero } from "./styles/StyledHero";
+import { StyledHeading, Paragraph, BoldText, ItalicText } from "./styles/StyledTexts";
+
+
+export const Hero = () => {
+    return (
+    <StyledHero>
+        <StyledHeading>Välkommen!</StyledHeading>
+        <Paragraph>Graviditetsdiabetesappen - din naturliga guide för att hantera och förebygga <BoldText>graviditetsdiabetes (GDM)</BoldText>. &#129328;</Paragraph>
+        <Paragraph><ItalicText>Läs mer nedan!</ItalicText></Paragraph>
+    </StyledHero>
+    );
+};
diff --git a/src/components/pages/Home.tsx b/src/components/pages/Home.tsx
@@ -1,9 +1,9 @@
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
+import { Hero } from "../Hero";
 import { LinkToTop } from "../LinkToTop";
-import { StyledHero } from "../styles/StyledHero";
 import { StyledFullSection, ParagraphWrapper } from "../styles/StyledWrappers";
-import { StyledHeading, Paragraph, BoldText, StyledLinks, TextLink, ItalicText } from "../styles/StyledTexts";
+import { Paragraph, BoldText, StyledLinks, TextLink } from "../styles/StyledTexts";
 
 export const Home = () => {
   useEffect(() => {
@@ -23,11 +23,7 @@ export const Home = () => {
 
   return (
     <StyledFullSection>
-      <StyledHero>
-        <StyledHeading>Välkommen!</StyledHeading>
-        <Paragraph>Graviditetsdiabetesappen - din naturliga guide för att hantera och förebygga <BoldText>graviditetsdiabetes (GDM)</BoldText>. &#129328;</Paragraph>
-        <Paragraph><ItalicText>Läs mer nedan!</ItalicText></Paragraph>
-      </StyledHero>
+      <Hero/>
 
       <ParagraphWrapper>
         <h3>Vad är GDM?</h3>