chore(banner image): add banner image to banner grid substory

Author: Baystef

src/components/BannerGrid/BannerGrid.stories.tsx

@@ -3,7 +3,9 @@ import { Box, Icon } from "@chakra-ui/react"
 import { Meta, StoryObj } from "@storybook/react"
 
 import { Image } from "@/components/Image"
+import InlineLink from "@/components/Link"
 import Text from "@/components/OldText"
+import Tooltip from "@/components/Tooltip"
 
 import { getTranslation } from "@/storybook-utils"
 
@@ -46,11 +48,24 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const PAGE_WHAT_IS_ETH = "page-what-is-ethereum"
+
+const tooltipContent = ({ apiUrl, apiProvider, ariaLabel }) => (
+  <div>
+    {getTranslation("data-provided-by", "common")}{" "}
+    <InlineLink href={apiUrl} aria-label={ariaLabel}>
+      {apiProvider}
+    </InlineLink>
+  </div>
+)
+
 export const Banner: Story = {
   render: () => {
     return (
       <BannerComponent>
-        <div>What </div>
+        <Box fontSize="md" color="text200">
+          Banner
+        </Box>
       </BannerComponent>
     )
   },
@@ -61,7 +76,9 @@ export const BannerBody: Story = {
     return (
       <BannerComponent>
         <BannerBodyComponent>
-          <div>What </div>
+          <Box fontSize="md" color="text200">
+            Banner Body
+          </Box>
         </BannerBodyComponent>
       </BannerComponent>
     )
@@ -82,57 +99,79 @@ export const BannerImage: Story = {
 
 export const BannerGridCell: Story = {
   render: () => {
-    const PAGE_WHAT_IS_ETH = "page-what-is-ethereum"
     return (
       <BannerComponent>
-        <BannerGridCellComponent>
-          <Box fontSize="5xl" mb={4} lineHeight={1}>
-            4k+
-          </Box>
-          <Box fontSize="md" color="text200">
-            {getTranslation(
-              "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
-              PAGE_WHAT_IS_ETH
-            )}
-            <Text as="span" whiteSpace="nowrap">
-              &nbsp;
-              <Box as="span">
-                <Icon as={MdInfoOutline} verticalAlign="middle" />
-              </Box>
-            </Text>
-          </Box>
-        </BannerGridCellComponent>
+        <BannerBodyComponent>
+          <BannerGridCellComponent>
+            <Box fontSize="5xl" mb={4} lineHeight={1}>
+              4k+
+            </Box>
+            <Box fontSize="md" color="text200">
+              {getTranslation(
+                "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
+                PAGE_WHAT_IS_ETH
+              )}
+              <Text as="span" whiteSpace="nowrap">
+                &nbsp;
+                <Tooltip
+                  content={tooltipContent({
+                    apiUrl: "https://dappradar.com/rankings/protocol/ethereum",
+                    apiProvider: "State of the dapps",
+                    ariaLabel: "Read more about Ethereum projects stats",
+                  })}
+                >
+                  <Box as="span">
+                    <Icon as={MdInfoOutline} verticalAlign="middle" />
+                  </Box>
+                </Tooltip>
+              </Text>
+            </Box>
+          </BannerGridCellComponent>
+        </BannerBodyComponent>
       </BannerComponent>
     )
   },
 }
 
 export const BannerGrid: Story = {
   render: () => {
-    const PAGE_WHAT_IS_ETH = "page-what-is-ethereum"
     return (
       <BannerComponent>
-        <BannerGridComponent>
-          {Array.from({ length: 6 }, (_, i) => i + 1).map((item) => (
-            <BannerGridCellComponent key={item}>
-              <Box fontSize="5xl" mb={4} lineHeight={1}>
-                {item}k+
-              </Box>
-              <Box fontSize="md" color="text200">
-                {getTranslation(
-                  "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
-                  PAGE_WHAT_IS_ETH
-                )}
-                <Text as="span" whiteSpace="nowrap">
-                  &nbsp;
-                  <Box as="span">
-                    <Icon as={MdInfoOutline} verticalAlign="middle" />
-                  </Box>
-                </Text>
-              </Box>
-            </BannerGridCellComponent>
-          ))}
-        </BannerGridComponent>
+        <BannerBodyComponent>
+          <BannerGridComponent>
+            {Array.from({ length: 6 }, (_, i) => i + 1).map((item) => (
+              <BannerGridCellComponent key={item}>
+                <Box fontSize="5xl" mb={4} lineHeight={1}>
+                  {item}k+
+                </Box>
+                <Box fontSize="md" color="text200">
+                  {getTranslation(
+                    "page-what-is-ethereum-ethereum-in-numbers-stat-1-desc",
+                    PAGE_WHAT_IS_ETH
+                  )}
+                  <Text as="span" whiteSpace="nowrap">
+                    &nbsp;
+                    <Tooltip
+                      content={tooltipContent({
+                        apiUrl:
+                          "https://dappradar.com/rankings/protocol/ethereum",
+                        apiProvider: "State of the dapps",
+                        ariaLabel: "Read more about Ethereum projects stats",
+                      })}
+                    >
+                      <Box as="span">
+                        <Icon as={MdInfoOutline} verticalAlign="middle" />
+                      </Box>
+                    </Tooltip>
+                  </Text>
+                </Box>
+              </BannerGridCellComponent>
+            ))}
+          </BannerGridComponent>
+        </BannerBodyComponent>
+        <BannerImageComponent>
+          <Image src={stats} alt="" width={400} />
+        </BannerImageComponent>
       </BannerComponent>
     )
   },