Konstantinos / Reusable component for number section (#4107)

konstantinosG-deriv · Konstantinos-Gk · habib-deriv · commit a12f19e5565a · 2023-01-30T13:26:51.000+06:00
* refactor: add new NumberSection component

* chore: remove unused code

---------

Co-authored-by: Konstantinos-Gk &lt;konstantinos.gkagiannis@deriv.com&gt;
diff --git a/src/components/containers/number-section.tsx b/src/components/containers/number-section.tsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { TString } from 'types/generics'
+import CommonHeaderSection from 'components/elements/common-header-section'
+
+type NumberSectionProps = {
+    id?: number
+    first_title?: TString
+    first_subtitle?: TString
+    second_title?: TString
+    second_subtitle?: TString
+    third_title?: TString
+    third_subtitle?: TString
+    fourth_title?: TString
+    fourth_subtitle?: TString
+    flex?: 'columns' | 'rows'
+    rows?: number
+    columns?: number
+    gap?: string
+}
+
+const NumberSection = ({
+    first_title,
+    first_subtitle,
+    second_title,
+    second_subtitle,
+    third_title,
+    third_subtitle,
+    fourth_title,
+    fourth_subtitle,
+    flex,
+    rows,
+    columns,
+    gap,
+}: NumberSectionProps) => {
+    const flexDirection = flex === 'columns' ? 'column' : 'row'
+    const items = [
+        {
+            title: first_title,
+            subtitle: first_subtitle,
+        },
+        {
+            title: second_title,
+            subtitle: second_subtitle,
+        },
+        {
+            title: third_title,
+            subtitle: third_subtitle,
+        },
+        {
+            title: fourth_title,
+            subtitle: fourth_subtitle,
+        },
+    ]
+    const styles = {
+        container: {
+            display: 'grid',
+            flexDirection: flexDirection,
+            flexWrap: 'wrap',
+            gridTemplateRows: `repeat(${rows}, 1fr)`,
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+            gap: gap,
+        },
+    }
+
+    return (
+        <div style={styles.container as React.CSSProperties}>
+            {items.map((item) => (
+                <div key={item.title}>
+                    <CommonHeaderSection
+                        title={item.title}
+                        subtitle={item.subtitle}
+                        title_font_size="48px"
+                        subtitle_font_size="20px"
+                        bgcolor="white"
+                        margin="1.5rem 0 0 0"
+                    />
+                </div>
+            ))}
+        </div>
+    )
+}
+
+export default NumberSection
diff --git a/src/pages/dmt5/_numbers.tsx b/src/pages/dmt5/_numbers.tsx
@@ -6,6 +6,7 @@ import { Localize } from 'components/localization'
 import device from 'themes/device'
 import useRegion from 'components/hooks/use-region'
 
+// TO-DO (REBRANDING) Replace this component with NumberSection.
 type NumbersContentType = {
     title: React.ReactElement
     subtitle: React.ReactElement
