Reviews
Review with images
import { Container, Heading, Flex, Text } from '@chakra-ui/react';
import Card from './card';
const reviewData = {
imageSrc: '/assets/images/projects/airbnb/review-image.jpg',
avatarSrc: '',
review: `What a wonderful little cottage! More spacious and adorable than the
pictures show. We never met our hosts, but we felt welcomed and...`,
name: 'Lesley',
country: 'United Kingdom'
};
const Reviews = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Heading as="h3" size="lg" fontWeight="bold" textAlign="left" mb={{ base: '4', md: '2' }}>
What guests are saying about homes in the United States
</Heading>
<Flex alignItems={{ base: 'start', md: 'center' }}>
<svg
viewBox="0 0 24 24"
role="presentation"
aria-hidden="true"
focusable="false"
style={{ height: '24px', width: '24px', fill: '#FFB400' }}
>
<path
d="m21.95 9.48a.84.84 0 0 0 -.87-.48h-4.62a.5.5 0 0 0 0 1l4.14.01-4.81 4.17a.5.5 0 0 0 -.14.57l2.65 6.38-6.07-3.72a.5.5 0 0 0 -.52 0l-6.08 3.72 2.65-6.37a.5.5 0 0 0 -.13-.57l-4.75-4.18h5.75a.5.5 0 0 0 .46-.3l2.37-5.37 1.58 3.57a.5.5 0 0 0 .91-.41l-1.72-3.88a.8.8 0 0 0 -1.56-.01l-2.38 5.39h-5.9a.83.83 0 0 0 -.87.48.85.85 0 0 0 .32.96l4.85 4.25-2.78 6.67a.81.81 0 0 0 .16.98.66.66 0 0 0 .43.15 1.1 1.1 0 0 0 .56-.18l6.37-3.91 6.38 3.92a.81.81 0 0 0 .99.03c.15-.12.37-.41.15-1l-2.77-6.66 4.92-4.26a.84.84 0 0 0 .31-.95zm-.78.53h-.01"
fill="#484848"
></path>
<path d="m11 21.5a.5.5 0 1 1 -.5-.5.5.5 0 0 1 .5.5zm-3.5-15.5a.5.5 0 1 0 .5.5.5.5 0 0 0 -.5-.5zm15 10h-.5v-.5a.5.5 0 0 0 -1 0v .5h-.5a.5.5 0 0 0 0 1h .5v.5a.5.5 0 0 0 1 0v-.5h.5a.5.5 0 0 0 0-1zm-15-13h-.5v-.5a.5.5 0 0 0 -1 0v .5h-.5a.5.5 0 0 0 0 1h .5v.5a.5.5 0 0 0 1 0v-.5h.5a.5.5 0 0 0 0-1zm10.22 7.54a.84.84 0 0 0 -.17-.02q-.28-.01-3.19 0a .6.6 0 0 1 -.55-.35l-1.5-3.23a.42.42 0 0 0 -.75 0l-1.81 4.14a2.92 2.92 0 0 0 4.12 3.72l.46-.26 3.49-2.99.16-.18a.5.5 0 0 0 -.26-.82z"></path>
</svg>
<Text pl={2} textAlign="left">
United States homes were <strong>rated 4.8 out of 5 stars</strong> with{' '}
<strong>42,500,000+ reviews</strong>
</Text>
</Flex>
<Flex
as="section"
alignItems="start"
justifyContent="between"
flexDirection={{ base: 'column', md: 'row' }}
my={{ base: '1.5rem', md: '2.5rem' }}
>
{Array.from(Array(3).keys()).map((id) => {
return <Card key={id} {...reviewData} />;
})}
</Flex>
</Container>
);
};
export default Reviews;
import { Box, Flex, Text, Image, Avatar, useColorModeValue } from '@chakra-ui/react';
interface CardProps {
imageSrc: string;
avatarSrc: string;
review: string;
name: string;
country: string;
}
const Card = ({ imageSrc, avatarSrc, review, name, country }: CardProps) => {
return (
<Box
as="article"
width={{ base: '100%', md: 1 / 3 }}
px={{ md: '0.5rem' }}
mb={{ base: '6', md: '0' }}
>
<Image alt="header image" src={imageSrc} objectFit="cover" borderRadius="0.25rem" w="100%" />
<Flex my={3} alignItems="center" justifyContent="start">
{Array.from(Array(4).keys()).map((id) => {
return <Star key={id} />;
})}
</Flex>
<Text
color={useColorModeValue('gray.700', 'gray.400')}
fontSize="0.87rem"
textAlign="left"
lineHeight="1.375"
fontWeight="300"
>
{review}
</Text>
<Flex my={4} alignItems="center" justifyContent="start">
<Avatar size="md" name="avatar" src={avatarSrc} />
<Flex pl="4" fontSize="sm" flexDirection="column" alignItems="start">
<Text fontWeight="bold">{name}</Text>
<Text>{country}</Text>
</Flex>
</Flex>
</Box>
);
};
const Star = () => {
return (
<svg
style={{
width: '1rem',
height: '1rem',
fill: '#008F94',
marginRight: '0.25rem'
}}
viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M972 380c9 28 2 50-20 67L725 619l87 280c11 39-18 75-54 75-12 0-23-4-33-12L499 790 273 962a58 58 0 0 1-78-12 50 50 0 0 1-8-51l86-278L46 447c-21-17-28-39-19-67 8-24 29-40 52-40h280l87-279c7-23 28-39 52-39 25 0 47 17 54 41l87 277h280c24 0 45 16 53 40z" />
</svg>
);
};
export default Card;
Simple Reviews
import {
Container,
Heading,
Flex,
Text,
Stack,
HStack,
Avatar,
useColorModeValue
} from '@chakra-ui/react';
const reviewData = [
{
avatarSrc: 'https://s.gravatar.com/avatar/4f9135f54df98fe894a9f9979d600a87?s=80',
review: `What a wonderful little cottage! More spacious and adorable than the What a wonderful little cottage! More spacious and adorable than the
pictures show. We never met our hosts and...`,
stars: 3,
userName: 'Ahmad',
dateTime: '2 months ago'
},
{
avatarSrc: '',
review: `What a wonderful little cottage! More spacious and adorable than the
pictures show. We never met our hosts, but we felt welcomed and...`,
stars: 4,
userName: 'Ali',
dateTime: '1 months ago'
},
{
avatarSrc: '',
review: `What a wonderful little cottage! More spacious and adorable than the
pictures show. We never met our hosts, but we felt welcomed and...`,
stars: 2,
userName: 'Zac',
dateTime: '4 months ago'
}
];
const SimpleReview = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Flex justifyContent="center">
<Heading as="h3" size="lg" fontWeight="bold" textAlign="left" mb={{ base: '4', md: '2' }}>
Recent Reviews
</Heading>
</Flex>
<Stack direction="column" spacing={5} my={4}>
{reviewData.map((review, index) => {
return (
<Stack key={index} direction="column" maxW="2xl">
<HStack spacing={3}>
<Avatar size="md" name={review.userName} src={review.avatarSrc} />
<Flex direction="column">
<Text fontWeight="bold" fontSize="md">
{review.userName}
</Text>
<Text fontWeight="light" fontSize="xs">
{review.dateTime}
</Text>
</Flex>
</HStack>
<Flex my={3} alignItems="center" justifyContent="start">
{Array.from(Array(review.stars).keys()).map((id) => {
return <Star key={id} fillColor="#EACA4E" />;
})}
{Array.from(Array(5 - review.stars).keys()).map((id) => {
return <Star key={id} fillColor="#e2e8f0" />;
})}
</Flex>
<Text
color={useColorModeValue('gray.700', 'gray.400')}
fontSize="0.87rem"
textAlign="left"
lineHeight="1.375"
fontWeight="300"
>
{review.review}
</Text>
</Stack>
);
})}
</Stack>
</Container>
);
};
const Star = ({ fillColor }: { fillColor: string }) => {
return (
<svg
style={{
width: '1rem',
height: '1rem',
fill: fillColor,
marginRight: '0.25rem'
}}
viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M972 380c9 28 2 50-20 67L725 619l87 280c11 39-18 75-54 75-12 0-23-4-33-12L499 790 273 962a58 58 0 0 1-78-12 50 50 0 0 1-8-51l86-278L46 447c-21-17-28-39-19-67 8-24 29-40 52-40h280l87-279c7-23 28-39 52-39 25 0 47 17 54 41l87 277h280c24 0 45 16 53 40z" />
</svg>
);
};
export default SimpleReview;
With rating chart
import {
Container,
Heading,
Box,
Flex,
Text,
Stack,
HStack,
Avatar,
useColorModeValue
} from '@chakra-ui/react';
const reviewData = [
{
avatarSrc: 'https://s.gravatar.com/avatar/4f9135f54df98fe894a9f9979d600a87?s=80',
review: `What a wonderful little cottage! More spacious and adorable than the What a wonderful little cottage! More spacious and adorable than the
pictures show. We never met our hosts and...`,
stars: 3,
userName: 'Ahmad',
dateTime: '2 months ago'
},
{
avatarSrc: '',
review: `What a wonderful little cottage! More spacious and adorable than the
pictures show. We never met our hosts, but we felt welcomed and...`,
stars: 4,
userName: 'Ali',
dateTime: '1 months ago'
},
{
avatarSrc: '',
review: `What a wonderful little cottage! More spacious and adorable than the
pictures show. We never met our hosts, but we felt welcomed and...`,
stars: 2,
userName: 'Zac',
dateTime: '4 months ago'
}
];
const ratingSummary = [
{ id: 1, rating: 5, percentage: '80%' },
{ id: 2, rating: 4, percentage: '65%' },
{ id: 3, rating: 3, percentage: '35%' },
{ id: 4, rating: 2, percentage: '75%' },
{ id: 5, rating: 1, percentage: '55%' }
];
const SimpleReview = () => {
return (
<Container maxW="5xl" p={{ base: 5, md: 10 }}>
<Box mb={8}>
<Heading as="h3" size="lg" fontWeight="bold" textAlign="left" mb={3}>
Audience rating summary
</Heading>
<Stack spacing={3}>
<Box>
<HStack spacing={3}>
<Flex alignItems="center" justifyContent="start">
{Array.from(Array(4).keys()).map((id) => {
return <Star key={id} fillColor="#EACA4E" />;
})}
{Array.from(Array(5 - 4).keys()).map((id) => {
return <Star key={id} fillColor="#e2e8f0" />;
})}
</Flex>
<Text fontWeight="bold" fontSize="lg">
4.0
</Text>
</HStack>
<Text fontWeight="bold" fontSize="md">
1355 ratings
</Text>
</Box>
<Stack direction="column" spacing={1}>
{ratingSummary.map((data) => {
return (
<HStack key={data.id} spacing={5}>
<Text fontWeight="bold" fontSize="md">
{data.rating}
</Text>
<Box w={{ base: '100%', md: '70%' }}>
<Box w="100%" bg={useColorModeValue('gray.300', 'gray.600')} rounded="md">
<Box w={data.percentage} h={3} bg="yellow.400" rounded="md"></Box>
</Box>
</Box>
<Text fontWeight="bold" fontSize="md">
{data.percentage}
</Text>
</HStack>
);
})}
</Stack>
</Stack>
</Box>
<Box>
<Heading as="h3" size="lg" fontWeight="bold" textAlign="left" mb={4}>
Audience reviews
</Heading>
<Stack direction="column" spacing={5}>
{reviewData.map((review, index) => {
return (
<Box key={index} maxW="2xl">
<HStack spacing={3} mb={2}>
<Avatar size="md" name={review.userName} src={review.avatarSrc} />
<Stack direction="column" spacing={2}>
<Text fontWeight="bold" fontSize="md">
{review.userName}
</Text>
<Flex alignItems="center" justifyContent="start">
{Array.from(Array(review.stars).keys()).map((id) => {
return <Star key={id} fillColor="#EACA4E" />;
})}
{Array.from(Array(5 - review.stars).keys()).map((id) => {
return <Star key={id} fillColor="#e2e8f0" />;
})}
</Flex>
</Stack>
</HStack>
<Text
color={useColorModeValue('gray.700', 'gray.400')}
fontSize="0.87rem"
textAlign="left"
lineHeight="1.375"
fontWeight="300"
>
{review.review}
</Text>
</Box>
);
})}
</Stack>
</Box>
</Container>
);
};
const Star = ({ fillColor }: { fillColor: string }) => {
return (
<svg
style={{
width: '1rem',
height: '1rem',
fill: fillColor,
marginRight: '0.25rem'
}}
viewBox="0 0 1000 1000"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M972 380c9 28 2 50-20 67L725 619l87 280c11 39-18 75-54 75-12 0-23-4-33-12L499 790 273 962a58 58 0 0 1-78-12 50 50 0 0 1-8-51l86-278L46 447c-21-17-28-39-19-67 8-24 29-40 52-40h280l87-279c7-23 28-39 52-39 25 0 47 17 54 41l87 277h280c24 0 45 16 53 40z" />
</svg>
);
};
export default SimpleReview;
