wix-style-react/src/TestimonialList/docs/TestimonialList.examples.js

wix-style-react

export const _structure = `
<TestimonialList
  testimonials={[
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
  ]}
/>;
`;

export const _numberOfColumns = `
<TestimonialList
  cols={2}
  testimonials={[
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
    {
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },{
      avatar: <Avatar name="Author Name" size="size60" />,
      text: 'This is a testimonial on your product or service',
      authorName: 'Author Name',
    },
  ]}
/>;

`;

export const _listWithoutAvatars = `
<TestimonialList
  cols={4}
  testimonials={[
    {
      text: 'I love it! This product is exactly what I needed.',
      authorName: 'Andrew Miller',
    },
    {
      text: 'Amazing! It helped me to solve my problems.',
      authorName: 'Carolyn Jones',
    },
    {
      text: 'A perfect tool for my everyday tasks. Saves me so much time!',
      authorName: 'Harry Pike',
    }
    ,
    {
      text: 'This tool changed the way I work.',
      authorName: 'Jessica  Flint',
    },
  ]}
/>;
`;

export const _marketingPage = `
<Box backgroundColor="D80">
  <MarketingPageLayout
    content={
      <Box height="612px" verticalAlign="middle">
        <MarketingPageLayoutContent
          title="Reach the Right Shoppers on Facebook & Instagram"
          subtitle="Get set up and Wix’s AI will take care of the rest"
          content={
            <Text>
              <ul>
                <li>Show your ad to the people most likely to buy</li>
                <li>Test your ad non-stop to see what’s working </li>
                <li>Optimize your budget to get you the best results </li>
              </ul>
            </Text>
          }
          actions={
            <Box gap="12px">
              <Button>Start Now</Button>
              <Button priority="secondary" prefixIcon={<Icons.PlayFilled />}>
                Get to Know Wix's AI
              </Button>
            </Box>
          }
        />
      </Box>
    }
    image={<Image src="shoppers.png" />}
    footer={
      <TestimonialList
        testimonials={[
          {
            id: '0001',
            avatar: <Avatar name="Guy in glasses" size="size60" />,
            text: 'I love it! It helped me to increase the sales.',
            authorName: 'John Smith',
          },
          {
            id: '0002',
            avatar: <Avatar name="Person with a hat" size="size60" />,
            text: 'Amazing! It is simple to use, I had no struggle to setup.',
            authorName: 'Templeton Peck',
          },
          {
            id: '0003',
            avatar: <Avatar name="Smiling lady" size="size60" />,
            text: 'A perfect tool for creating ad campaigns that sell.',
            authorName: 'Bosco B.A.',
          },
        ]}
      />
    }
  />
</Box>;
`;