update ActionCard and EthVideo components

Author: wackerow

src/components/ActionCard.tsx

@@ -1,17 +1,16 @@
-import React, { ReactNode } from "react"
-import { StaticImageData } from "next/image"
+import type { ReactNode } from "react"
 import {
   Box,
-  BoxProps,
+  type BoxProps,
   Flex,
   Heading,
   LinkBox,
-  LinkBoxProps,
+  type LinkBoxProps,
   LinkOverlay,
   useColorModeValue,
 } from "@chakra-ui/react"
 
-import { Image } from "@/components/Image"
+import { Image, type ImageProps } from "@/components/Image"
 import { BaseLink } from "@/components/Link"
 import Text from "@/components/OldText"
 
@@ -27,19 +26,19 @@ const linkFocusStyles: BoxProps = {
   textDecoration: "none",
 }
 
-export interface IProps extends Omit<LinkBoxProps, "title"> {
-  children?: React.ReactNode
+export type ActionCardProps = Omit<LinkBoxProps, "title"> & {
+  children?: ReactNode
   to: string
   alt?: string
-  image: StaticImageData
+  image: ImageProps["src"]
   title: ReactNode
   description?: ReactNode
   className?: string
   isRight?: boolean
   isBottom?: boolean
 }
 
-const ActionCard: React.FC<IProps> = ({
+const ActionCard = ({
   to,
   alt,
   image,
@@ -49,8 +48,8 @@ const ActionCard: React.FC<IProps> = ({
   className,
   isRight,
   isBottom = true,
-  ...rest
-}) => {
+  ...props
+}: ActionCardProps) => {
   const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")
 
   return (
@@ -64,7 +63,7 @@ const ActionCard: React.FC<IProps> = ({
       _focus={linkBoxFocusStyles}
       className={className}
       m={4}
-      {...rest}
+      {...props}
     >
       <Flex
         h="260px"
@@ -77,12 +76,8 @@ const ActionCard: React.FC<IProps> = ({
       >
         <Image
           src={image}
-          width={320}
+          width={220}
           alt={alt || ""}
-          maxH="257px"
-          maxW={{ base: "311px", sm: "372px" }}
-          minW="100px"
-          minH="100px"
           style={{ objectFit: "cover" }}
         />
       </Flex>

src/components/EthVideo.tsx

@@ -1,21 +1,20 @@
-import React from "react"
 import { Box, useColorModeValue } from "@chakra-ui/react"
 
-import darkVideo from "../../public/ethereum-hero-dark.mp4"
-import lightVideo from "../../public/ethereum-hero-light.mp4"
+import darkVideo from "@/public/ethereum-hero-dark.mp4"
+import lightVideo from "@/public/ethereum-hero-light.mp4"
 
-export interface IProps {
+type EthVideoProps = {
   className?: string
   videoSrc?: string
 }
 
-const EthVideo: React.FC<IProps> = ({ className, videoSrc }) => {
+const EthVideo = ({ videoSrc }: EthVideoProps) => {
   const videoFile = useColorModeValue(lightVideo, darkVideo)
 
-  const src = videoSrc ? videoSrc : videoFile
+  const src = videoSrc || videoFile
 
   return (
-    <Box className={className}>
+    <Box>
       <video
         id="hero-video"
         width="100%"