## Feature Examples

### Structure
- description: Component consists of four areas: media, URL address, title, and description.
- example:
```jsx
<SocialPreview
  title="Title"
  description="Description"
  previewUrl="WWW.SITE-NAME.COM"
  media={<Image height="360px" borderRadius="0px" />}
/>;
```

### Size
- description: Choose the size of the preview from:  - \`large\` - use for a preview generated by common social media platforms.\ - \`small\` - use as alternative size for the Twitter platform only.
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SocialPreview
    title="Large Size"
    description="Description"
    previewUrl="www.site-name.com"
    media={<Image width="100%" height="360px" borderRadius="0px" />}
  />
  <SocialPreview
    size="small"
    skin="twitter"
    title="Small Size"
    description="Description"
    previewUrl="www.site-name.com"
    media={<Image width="100%" height="100%" borderRadius="11px 0 0 11px" />}
  />
</StorybookComponents.Stack>;
```

### Skin
- description: Render preview for different social media platforms:\ - \`social\` - use for a preview generated by common social media platforms.\ - \`twitter\` - use to display a specific preview for twitter social media platform only
- example:
```jsx
<StorybookComponents.Stack flexDirection="column">
  <SocialPreview
    skin="social"
    title="Social Skin"
    description="Description"
    previewUrl="www.site-name.com"
    media={<Image width="100%" height="360px" borderRadius="0px" />}
  />
  <SocialPreview
    skin="twitter"
    title="Twitter Skin"
    description="Description"
    previewUrl="www.site-name.com"
    media={<Image width="100%" height="360px" borderRadius="11px 11px 0 0" />}
  />
</StorybookComponents.Stack>;
```

## Common Use Case Examples

### Blog Post Share
- description: In combination with Inputs, Social Preview allows site owners to tailor their blog posts' appearance on social media.
- example:
```jsx
<Box direction="vertical" align="left">
  <Text>Preview on Twitter</Text>
  <Tooltip
    fixed
    content={
      <Text light>
        It takes time for changes you make to show live on Twitter. You can also
        manually refresh them. <a>Find out how</a>
      </Text>
    }
  >
    <Text>
      <a>When will changes show live?</a>
    </Text>
  </Tooltip>

  <Box padding="SP1 0 SP4 0" width="100%">
    <SocialPreview
      title="Now You Can Blog from Everywhere!"
      description="We’ve made it quick and convenient for you to manage your blog from anywhere. In this blog post we’ll share the ways you can post to your Wix Blog."
      previewUrl="YOUR-SITE-HERE.COM"
      media={
        <ImageViewer
          height="360px"
          width="100%"
          removeRoundedBorders
          imageUrl="TravelExample7.jpg"
        />
      }
    />
  </Box>

  <Box direction="vertical" width="100%" gap="SP5">
    <FormField label="Social title">
      <Input defaultValue="Now You Can Blog From Everywhere!" />
    </FormField>
    <FormField label="Social description">
      <InputArea
        rows={3}
        defaultValue="We’ve made it quick and convenient for you to manage your blog from anywhere. In this blog post we’ll share the ways you can post to your Wix Blog."
      />
    </FormField>
  </Box>
</Box>;
```