message: refactor(blog): use LinkBox
diff: @@ -3,32 +3,16 @@ import {
  Box,
  Heading,
  HStack,
  + LinkBox,
  Tag,
  Text,
  useColorModeValue,
  - VStack,
  } from "@chakra-ui/react"
  import format from "date-fns/format"
  import parseISO from "date-fns/parseISO"
  import Link from "next/link"
  import { BlogPost } from "utils/get-blog-posts"
  -// TODO replace with `breakout` prop
  -// see https://github.com/chakra-ui/chakra-ui/pull/1717
  -const breakoutLinkStyle = {
  - position: "static",
  - "&::before": {
  - content: "''",
  - cursor: "inherit",
  - display: "block",
  - position: "absolute",
  - top: 0,
  - left: 0,
  - width: "100%",
  - height: "100%",
  - },
  -}
  -
  export type BlogPostCardProps = {
  post: BlogPost
  }
  @@ -40,8 +24,12 @@ export const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
  const readableDate = format(parseISO(post.date), "MMMM dd, yyyy")
  return (
  - <VStack
  - as="article"
  + <Link href={post.slug} passHref>
  + <LinkBox
  + href={post.slug}
  + breakout
  + tabIndex={0}
  + cursor="pointer"
  position="relative"
  p={4}
  border="1px"
  @@ -51,11 +39,7 @@ export const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
  >
  <header>
  <Heading as="h2" size="md">
  - <Link href={post.slug}>
  - <Box as="a" __css={breakoutLinkStyle} tabIndex={0} cursor="pointer">
  {post.title}
  - </Box>
  - </Link>
  </Heading>
  <Box as="aside" fontSize="xs">
  <Text as="span" color={secondaryColor}>
  @@ -79,6 +63,7 @@ export const BlogPostCard: React.FC<BlogPostCardProps> = ({ post }) => {
  ))}
  </HStack>
  </footer>
  - </VStack>
  + </LinkBox>
  + </Link>
  )
  }
  