## Feature Examples

### Structure
- description: Social post preview consists of these content areas:\ - Profile image that represents the user's social media account. Add image URL with \`profileImageSrc\` prop.\ - \`profileName\` - username in Facebook or Instagram.\ - \`caption\` - textual content of the post, including plain text, hashtags and links.\ - \`media\` - visual content of the post.\ \ Note that \`profileName\`, \`caption\`, and \`media\` containers are nodes, i.e., they accept any components as their children.
- example:
```jsx
<SocialPostPreview
  skin="facebook"
  caption={
    <>
      Caption text! <a>#hashtag</a>
      <br />
      <a>http://link.com</a>
    </>
  }
  media={
    <StorybookComponents.Placeholder height={330}>
      Media container
    </StorybookComponents.Placeholder>
  }
  profileName="Profile Name"
/>;
```

### Skin
- description: Control the appearance and purpose of the component using \`skin\` prop.\ - \`facebook\` (default) - visualizes content as posted on Facebook.\ - \`instagram\` - visualizes content as posted on Instagram.
- example:
```jsx
<StorybookComponents.Stack>
  <SocialPostPreview
    skin="facebook"
    caption={
      <>
        Facebook skin <a>#hashtag</a>
        <br />
        <a>http://link.com</a>
      </>
    }
    media={
      <StorybookComponents.Placeholder height={330}>
        Media container
      </StorybookComponents.Placeholder>
    }
    profileName="Profile Name"
  />
  <SocialPostPreview
    skin="instagram"
    caption={
      <>
        Instagram skin <a>#hashtag</a>
      </>
    }
    media={
      <StorybookComponents.Placeholder height={330}>
        Media container
      </StorybookComponents.Placeholder>
    }
    profileName="Profile Name"
  />
</StorybookComponents.Stack>;
```

### Caption
- description: Add a message to the post with `caption` prop. Use standard `<a>` and `<br>` tags to format post hashtags and links (see `<Text/>` story for more guidance). Note that a link can only be added for posts on Facebook (`skin='facebook'`).
- example:
```jsx
<SocialPostPreview
  skin="facebook"
  caption={
    <>
      This is plain text{' '}
      <a>
        #hashtag_with_
        <a />
        _tag
      </a>
      <br />
      <a>http://link.com</a>
    </>
  }
  media={
    <StorybookComponents.Placeholder height={330}>
      Media container
    </StorybookComponents.Placeholder>
  }
  profileName="Profile Name"
/>;
```

### Media
- description: Include visual content for a post by adding an `<Image/>` component to the \`media\` container.
- example:
```jsx
<SocialPostPreview
  skin="facebook"
  caption={
    <>
      Caption text! <a>#hashtag</a>
      <br />
      <a>http://link.com</a>
    </>
  }
  media={<Image src="https://bit.ly/3bzJvGn" borderRadius="0px" />}
  profileName="Profile Name"
/>;
```

## Common Use Case Examples

### Preview before Publishing a Social Post
- description: Add the component next to the form where users edit their Facebook or Instagram post content.
- example:
```jsx
() => {
  const initialState = {
    caption:
      'Serving you on the desert now. Come join us in the Summer Festival!',
    hashtags: ['#anywhere', '#janedoe'],
  };

  const accounts = [
    {
      id: 0,
      displayName: 'Jane Doe Restaurant',
      avatarUrl: 'https://bit.ly/2S1oL3q',
    },
    { id: 1, displayName: 'JD Dinner', avatarUrl: 'https://bit.ly/2S0T1LM' },
  ];
  const sitePages = ['/Home Page', '/Lunch Menu', '/Dinner Menu'];
  const imageUrl = 'https://bit.ly/3uWKs3c';
  const [selectedAccount, setSelectedAccount] = React.useState(accounts[0]);
  const [caption, setCaption] = React.useState(initialState.caption);
  const [hashtags, setHashtags] = React.useState(initialState.hashtags);
  const [linkedPage, setLinkedPage] = React.useState(sitePages[0]);
  const links = [
    'http://wix.to/xlGkrTl',
    'http://wix.to/xlXsfYx',
    'http://wix.to/zyGtbTk',
  ];
  const [linkToPage, setLinkToPage] = React.useState(links[0]);

  const renderAccountLabel = (account) => (
    <Box verticalAlign="middle">
      <Avatar
        imgProps={{
          src: account.avatarUrl,
        }}
        size="size30"
      />
      <Box marginLeft={2} maxWidth={180}>
        <Text
          size="medium"
          ellipsis
          showTooltip={false}
          light={account.id === selectedAccount.id}
        >
          {account.displayName}
        </Text>
      </Box>
    </Box>
  );

  const renderCardHeader = () => (
    <Box gap={1} paddingLeft={4} paddingTop={3} paddingBottom={3}>
      <Box color="blue">
        <Icons.Facebook />
      </Box>
      <DropdownBase
        maxWidth={288}
        options={accounts.map((account) => ({
          id: account.id,
          value: renderAccountLabel(account),
        }))}
        selectedId={selectedAccount.id}
        onSelect={({ id }) => {
          setSelectedAccount(accounts.find((account) => account.id === id));
        }}
      >
        {({ toggle }) => (
          <Box>
            <TextButton
              onClick={toggle}
              skin="dark"
              weight="normal"
              suffixIcon={<Icons.ChevronDown />}
            >
              {selectedAccount.displayName}
            </TextButton>
          </Box>
        )}
      </DropdownBase>
    </Box>
  );

  const renderRadioGroup = () => (
    <FormField label="When:">
      <RadioGroup value="0" disabledRadios={['1']}>
        <RadioGroup.Radio value="0">
          <Text size="medium" weight="thin">
            Now
          </Text>
        </RadioGroup.Radio>
        <RadioGroup.Radio value="1">
          <Text size="medium" weight="thin" skin="disabled">
            {'Schedule '}
          </Text>
          <TextButton
            size="medium"
            weight="thin"
            skin="premium"
            underline="always"
          >
            Upgrade Ascend
          </TextButton>
        </RadioGroup.Radio>
      </RadioGroup>
    </FormField>
  );

  const renderSmallImage = () => (
    <FormField label="Image">
      <Image width={84} height={84} src={imageUrl} />
    </FormField>
  );

  const renderCaption = () => (
    <Box direction="vertical" width="100%">
      <FormField label="Caption">
        <InputArea
          value={caption}
          onChange={(e) => setCaption(e.target.value)}
          size="medium"
        />
      </FormField>
    </Box>
  );

  const renderHashtags = () => (
    <Box direction="vertical" width="100%">
      <FormField label="Hashtags">
        <MultiSelect
          tags={hashtags.map((hashtag, index) => ({
            id: index.toString(),
            label: hashtag,
          }))}
          size="medium"
          onManuallyInput={(hash) => setHashtags(hashtags.concat(hash))}
          onRemoveTag={(index) =>
            setHashtags(
              hashtags.filter((_, _index) => index !== _index.toString()),
            )
          }
        />
      </FormField>
    </Box>
  );

  const renderLinkedPage = () => (
    <Box direction="vertical" width="100%">
      <FormField label="Linked Page">
        <AutoComplete
          options={sitePages.map((page, index) => ({
            id: index,
            value: page,
          }))}
          value={linkedPage}
          onSelect={(selectedIndex) => {
            setLinkedPage(String(selectedIndex.value));
            setLinkToPage(links[selectedIndex.id]);
          }}
        />
      </FormField>
    </Box>
  );

  const renderShareForm = () => (
    <Box direction="vertical" gap={4} padding={4} align="left" width="60%">
      {renderRadioGroup()}
      {renderSmallImage()}
      {renderCaption()}
      {renderHashtags()}
      {renderLinkedPage()}
    </Box>
  );

  return (
    <Card>
      {renderCardHeader()}
      <Card.Divider />
      <Box width="100%">
        {renderShareForm()}
        <Divider direction="vertical" />
        <Box
          direction="vertical"
          backgroundColor={'rgba(135, 135, 135, 0.05)'}
          gap={1}
          paddingTop={4}
          paddingLeft={5}
          paddingRight={5}
          width="40%"
        >
          <FormField
            label="Preview"
            infoContent="This is how your post will look like on Facebook"
          >
            <SocialPostPreview
              skin="facebook"
              profileName={selectedAccount.displayName}
              profileImageSrc={selectedAccount.avatarUrl}
              caption={
                <>
                  {caption.length > 0 && (
                    <>
                      {caption}
                      <br />
                    </>
                  )}
                  {hashtags.length > 0 && (
                    <>
                      <a>{hashtags.join(' ')}</a>
                      <br />
                    </>
                  )}
                  <a>{linkToPage}</a>
                </>
              }
              media={<Image src={imageUrl} borderRadius="0px" />}
            />
          </FormField>
        </Box>
      </Box>
    </Card>
  );
};
```