function AirbnbExample() {
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 maxWidth="max-w-sm" margin="mx-auto">
<Image
src={property.imageUrl}
alt={property.imageAlt}
width="w-full"
htmlWidth="800"
htmlHeight="533"
borderRadius="rounded-t-lg"
/>
<Box
padding="p-6"
borderWidth={['border', 'border-t-0']}
borderColor="border-gray-200"
borderRadius="rounded-b-lg"
>
<Box display="flex" alignItems="items-center">
<Badge appearance="success">New</Badge>
<Box
textColor="text-gray-500"
fontWeight="font-semibold"
letterSpacing="tracking-wide"
fontSize="text-xs"
textTransform="uppercase"
margin="ml-2"
>
{property.beds} beds • {property.baths} baths
</Box>
</Box>
<Heading as="h4" size="sm" margin="my-1" truncate>
{property.title}
</Heading>
<Box>
{property.formattedPrice}
<Text as="span" textColor="text-gray-500" fontSize="text-sm">
/ wk
</Text>
</Box>
<Box display="flex" alignItems="items-center" margin="mt-2" space="space-x-2">
<Box display="flex" space="space-x-1">
{Array.from(Array(5)).map((_, i) => (
<Icon name="star" key={i} textColor={i < property.rating ? 'text-blue-500' : 'text-gray-300'} />
))}
</Box>
<Box as="span" color="text-gray-600" fontSize="text-sm">
{property.reviewCount} reviews
</Box>
</Box>
</Box>
</Box>
);
}