feat: page header component

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#854](https://github.com/alleslabs/celatone-frontend/pull/854) Create PageHeaderContainer component
 - [#851](https://github.com/alleslabs/celatone-frontend/pull/851) Add amp validator list page
 - [#848](https://github.com/alleslabs/celatone-frontend/pull/848) Change Initia's config to use the new chain IDs (mahalo-2, minimove-2, miniwasm-2)
 - [#847](https://github.com/alleslabs/celatone-frontend/pull/847) Add amp proposal details page

src/lib/components/PageContainer.tsx

@@ -1,12 +1,7 @@
 import type { BoxProps } from "@chakra-ui/react";
 import { Box } from "@chakra-ui/react";
-import type { ReactNode } from "react";
 
-interface PageContainerProps extends BoxProps {
-  children: ReactNode;
-}
-
-const PageContainer = ({ children, ...containerProps }: PageContainerProps) => (
+const PageContainer = ({ children, ...containerProps }: BoxProps) => (
   <Box
     as="main"
     p={{ base: "16px", md: "48px" }}

src/lib/components/PageHeaderContainer.tsx

@@ -0,0 +1,28 @@
+import type { FlexProps } from "@chakra-ui/react";
+import { Flex } from "@chakra-ui/react";
+
+const PageHeaderContainer = ({
+  children,
+  bgColor,
+  ...containerProps
+}: FlexProps) => (
+  <Flex
+    as="header"
+    direction="column"
+    gap={{ base: "24px", md: "32px" }}
+    px={{ base: "16px", md: "48px" }}
+    pt={{ base: "16px", md: "48px" }}
+    bgGradient={
+      bgColor
+        ? {
+            md: `linear(to-b, ${bgColor}, transparent)`,
+          }
+        : undefined
+    }
+    {...containerProps}
+  >
+    {children}
+  </Flex>
+);
+
+export default PageHeaderContainer;

src/lib/pages/validator-details/components/validator-top/index.tsx

@@ -22,13 +22,7 @@ export const ValidatorTop = ({
   totalVotingPower,
   singleStakingDenom,
 }: ValidatorTopProps) => (
-  <Flex
-    direction="column"
-    gap={5}
-    px={{ base: "16px", md: "48px" }}
-    pt={{ base: "16px", md: "48px" }}
-    bgGradient="linear(to-b, success.background, transparent)"
-  >
+  <>
     <Breadcrumb
       items={[
         {
@@ -97,5 +91,5 @@ export const ValidatorTop = ({
         />
       </Flex>
     </Flex>
-  </Flex>
+  </>
 );

src/lib/pages/validator-details/index.tsx

@@ -12,6 +12,7 @@ import {
 import { CustomTab } from "lib/components/CustomTab";
 import { Loading } from "lib/components/Loading";
 import PageContainer from "lib/components/PageContainer";
+import PageHeaderContainer from "lib/components/PageHeaderContainer";
 import { ErrorFetching, InvalidState } from "lib/components/state";
 import { useAssetInfos } from "lib/services/assetService";
 import { useValidatorData } from "lib/services/validatorService";
@@ -71,11 +72,13 @@ const ValidatorDetailsBody = ({
 
   return (
     <>
-      <ValidatorTop
-        info={data.info}
-        totalVotingPower={data.totalVotingPower}
-        singleStakingDenom={singleStakingDenom}
-      />
+      <PageHeaderContainer bgColor="success.background">
+        <ValidatorTop
+          info={data.info}
+          totalVotingPower={data.totalVotingPower}
+          singleStakingDenom={singleStakingDenom}
+        />
+      </PageHeaderContainer>
       <PageContainer>
         <Tabs
           index={Object.values(TabIndex).indexOf(tab)}

src/lib/pages/validators/index.tsx

@@ -6,6 +6,7 @@ import { AmpEvent, track } from "lib/amplitude";
 import { useGovConfig, useMobile } from "lib/app-provider";
 import InputWithIcon from "lib/components/InputWithIcon";
 import PageContainer from "lib/components/PageContainer";
+import PageHeaderContainer from "lib/components/PageHeaderContainer";
 import { Pagination } from "lib/components/pagination";
 import { usePaginator } from "lib/components/pagination/usePaginator";
 import { useDebounce } from "lib/hooks";
@@ -65,13 +66,7 @@ const Validators = () => {
   const scrollComponentId = "validator-table-header";
   return (
     <>
-      <Flex
-        direction="column"
-        gap={{ base: "24px", md: "32px" }}
-        px={{ base: "16px", md: "48px" }}
-        pt={{ base: "16px", md: "48px" }}
-        bgGradient={{ md: "linear(to-b, success.background, transparent)" }}
-      >
+      <PageHeaderContainer bgColor="success.background">
         <Flex direction="column" gap={1}>
           <Heading as="h5" variant="h5" color="text.main" fontWeight={600}>
             Validators
@@ -115,7 +110,7 @@ const Validators = () => {
             amptrackSection="validator-list-search"
           />
         </Flex>
-      </Flex>
+      </PageHeaderContainer>
       <PageContainer>
         <ValidatorsTable
           data={data}