fix: all posts initial (#5942)

crowdin/messages.json

@@ -1680,6 +1680,7 @@
   "1616502762": "<0>US Tech 100</0> follows the stock performance of the 100 largest non-financial companies in the US.",
   "1618280107": "Offer competitive prices on all our products",
   "1619070150": "You are being redirected to an external website.",
+  "1619332751": "Trading articles: read and learn how to trade",
   "1619579199": "Why is my Deriv P2P balance different from my Deriv account balance?",
   "1620412346": "No, In/Out options are only available on the SmartTrader and Deriv Bot trading platforms. They are available to trade on a range of markets such as forex, derived indices, stock indices, and commodities.",
   "1620854129": "The minimum deposit is 0.01 USD. You can make a maximum of 10 transactions a day.",

src/features/pages/posts/all-posts/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import moment from 'moment'
+import * as styles from '../posts.module.scss'
+import Layout from 'features/components/templates/layout'
+import Typography from 'features/components/atoms/typography'
+import { Localize } from 'components/localization'
+import Flex from 'features/components/atoms/flex-box'
+import Link from 'features/components/atoms/link'
+import dclsx from 'features/utils/dclsx'
+
+const AllPostsModule = ({ data }: TBlogPosts) => {
+    const posts = data?.allStrapiPost?.nodes || []
+    return (
+        <Layout>
+            <Flex.Box margin_block="12x" direction="col" className={styles.posts_wrapper}>
+                <Typography.Heading as="h2" size="small">
+                    <Localize
+                        translate_text={'_t_Trading articles: read and learn how to trade_t_'}
+                    />
+                </Typography.Heading>
+
+                <Flex.Box wrap="wrap" margin_block="15x" justify="around">
+                    {posts?.map(({ hero }) => {
+                        const { title, banner, date } = hero
+                        const parsedDate = moment(date)
+                        const formattedDate = parsedDate?.format('Do [of] MMMM YYYY')
+                        return (
+                            <Flex.Box direction="col" key={title} className={styles.image_wrapper}>
+                                <Link url={{ type: 'internal', to: '/' }} no_hover>
+                                    <img
+                                        src={banner?.localFile?.publicURL}
+                                        className={styles.post_image}
+                                    />
+                                </Link>
+                                <div className={dclsx('margin-block-10x')}>
+                                    <Link url={{ type: 'internal', to: '/' }} no_hover>
+                                        <Typography.Heading as="h3" size="xxs">
+                                            <Localize translate_text={`_t_${title}_t_`} />
+                                        </Typography.Heading>
+                                    </Link>
+                                    <div
+                                        className={dclsx(
+                                            'text-medium',
+                                            'typography-color-gray-shade',
+                                        )}
+                                    >
+                                        {formattedDate || ''}
+                                    </div>
+                                </div>
+                            </Flex.Box>
+                        )
+                    })}
+                </Flex.Box>
+            </Flex.Box>
+        </Layout>
+    )
+}
+
+export default AllPostsModule

src/features/pages/posts/index.tsx

@@ -10,7 +10,6 @@ import dclsx from 'features/utils/dclsx'
 
 const PostsModule = ({ data }: TBlogPosts) => {
     const posts = data?.allStrapiPost?.nodes || []
-    console.log(data, 'www')
     return (
         <Layout>
             <Flex.Box margin_block="12x" direction="col" className={styles.posts_wrapper}>

src/pages/blog/all-posts/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import { TGatsbyHead } from 'features/types'
+import { SEO } from 'components/containers'
+import { WithIntl } from 'components/localization'
+import AllPostsModule from 'features/pages/posts/all-posts'
+
+const BlogPosts = ({ data }: TBlogPosts) => {
+    return <AllPostsModule data={data} />
+}
+
+export default WithIntl()(BlogPosts)
+
+export const query = graphql`
+    query {
+        allStrapiPost(sort: { fields: createdAt, order: DESC }) {
+            nodes {
+                createdAt
+                hero {
+                    title
+                    date
+                    tags
+                    banner {
+                        localFile {
+                            publicURL
+                        }
+                    }
+                }
+            }
+        }
+    }
+`
+
+export const Head = ({ pageContext }: TGatsbyHead) => (
+    <SEO title="_t__t_" description="_t_._t_" pageContext={pageContext} />
+)