Chakra UI Separator - Horizon UI

import { VSeparator, HSeparator } from "components/Separator/Separator"

function Example() {
  const property = {
    imageUrl: "https://bit.ly/2Z4KKcF",
    imageAlt: "Rear view of modern home with pool",
    beds: 3,
    baths: 2,
    title: "Modern home in city center in the heart of historic Los Angeles",
    formattedPrice: "$1,900.00",
    reviewCount: 34,
    rating: 4,
  }
  return (
    <Box>
      <Text align="center" mb="20px">
        This is before the HSeparator
      </Text>
      <Flex
        h="1px"
        w="100%"
        bg="linear-gradient(90deg, rgba(224, 225, 226, 0) 0%, #E0E1E2 49.52%, rgba(224, 225, 226, 0) 100%)"
        mb="20px"
      ></Flex>
      <Text align="center">This is after the HSeparator</Text>
    </Box>
  )
}

function Example() {
  return (
      <Text align="center" mb="20px">
        This is before the HSeparator
      </Text>
      </HSeparator>
      <Text align="center">
        This is after the HSeparator
      </Text>
  )
}

function Example() {
  return (
    <Flex alignItems="center" width="100%" height="100px">
      <Text align="center" mb="20px" mr="20px">
        This is before the VSeparator
      </Text>
      <Flex
        w="1px"
        bg="linear-gradient(0deg, rgba(224, 225, 226, 0) 0%, #E0E1E2 49.52%, rgba(224, 225, 226, 0.15625) 99.04%)"
        mr="20px"
      ></Flex>
      <Text align="center">This is after the VSeparator</Text>
    </Flex>
  )
}

function Example() {
  return (
      <Text align="center" mb="20px">
        This is before the VSeparator
      </Text>
      </VSeparator />
      <Text align="center">
        This is after the VSeparator
      </Text>
  )
}