@wix/design-system/dist/docs/components/SocialPreviewExamples.md

@wix/design-system

## 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:</br>
        &emsp;- `large` - use for a preview generated by common social media platforms.<br/>
        &emsp;- `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:<br/>
      &emsp;- `social` - use for a preview generated by common social media platforms.<br/>
      &emsp;- `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>;
```