Separator

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 47.22%, rgba(224, 225, 226, 0.15625) 94.44%)"
        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>
      </VSeparator />
      <Text align="center">
        This is after the HSeparator
      </Text>
  )
}

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 (
    <Flex alignItems="center" width="100%" height="100px">
      <Text align="center" mr="20px">
        This is before the VSeparator
      </Text>
      <Flex
        w="1px"
        height="100%"
        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>
      <Separator />
      <Text align="center">
        This is after the VSeparator
      </Text>
  )
}