Spread props in the Card component

Author: soheil

src/components/BeaconChainActions.tsx

@@ -97,8 +97,7 @@ const BeaconChainActions: React.FC = () => {
   return (
     <Box mb={16}>
       <Flex flexDir={{ base: "column", md: "row" }} pt={4}>
-        <Box
-          as={Card}
+        <Card
           w="full"
           ml={0}
           mr={{ base: 0, md: 4 }}
@@ -113,9 +112,8 @@ const BeaconChainActions: React.FC = () => {
           <ButtonLink variant="outline" to="/staking/">
             <Translation id="page-upgrades-index-staking-learn" />
           </ButtonLink>
-        </Box>
-        <Box
-          as={Card}
+        </Card>
+        <Card
           w="full"
           mr={0}
           ml={{ base: 0, md: 4 }}
@@ -126,7 +124,7 @@ const BeaconChainActions: React.FC = () => {
           <ButtonLink variant="outline" to="/upgrades/get-involved/">
             <Translation id="consensus-run-beacon-chain" />
           </ButtonLink>
-        </Box>
+        </Card>
       </Flex>
       <H3>
         <Translation id="consensus-explore" />

src/components/Card.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react"
-import { Flex, Heading, Text } from "@chakra-ui/react"
+import { ChakraProps, Flex, Heading, Text } from "@chakra-ui/react"
 import Emoji from "./Emoji"
 
-export interface IProps {
+export interface IProps extends ChakraProps {
   children?: React.ReactNode
   emoji?: string
   title?: ReactNode
@@ -16,6 +16,7 @@ const Card: React.FC<IProps> = ({
   description,
   children,
   className,
+  ...props
 }) => (
   <Flex
     direction="column"
@@ -28,6 +29,7 @@ const Card: React.FC<IProps> = ({
     borderColor="lightBorder"
     p={6}
     className={className}
+    {...props}
   >
     <div>
       {emoji && <Emoji fontSize="5xl" text={emoji} mb={4} />}