Skip to content

Commit bd62550

Browse files
yuriyyakymyuriyyakym
committed
Extract SocialShare component from story sharing
1 parent bba1924 commit bd62550

File tree

5 files changed

+151
-133
lines changed

5 files changed

+151
-133
lines changed

‎components/SocialShare/SocialShare.module.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.social {
2+
display: flex;
3+
flex-wrap: wrap;
4+
gap: $spacing-4;
5+
6+
&.withLabels {
7+
.socialButton {
8+
display: inline-flex;
9+
align-items: center;
10+
column-gap: $spacing-2;
11+
12+
&::after {
13+
content: attr(data-title);
14+
white-space: nowrap;
15+
}
16+
}
17+
}
18+
}
19+
20+
.socialIcon {
21+
width: 24px;
22+
}

‎components/SocialShare/SocialShare.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import classNames from 'classnames';
2+
import {
3+
FacebookShareButton,
4+
LinkedinShareButton,
5+
PinterestShareButton,
6+
RedditShareButton,
7+
TelegramShareButton,
8+
TwitterShareButton,
9+
WhatsappShareButton,
10+
} from 'react-share';
11+
12+
import {
13+
IconFacebook,
14+
IconLinkedin,
15+
IconPinterest,
16+
IconReddit,
17+
IconTelegram,
18+
IconTwitter,
19+
IconWhatsApp,
20+
} from '@/icons';
21+
import { type SharingOptions, SocialNetwork } from 'theme-settings';
22+
23+
import styles from './SocialShare.module.scss';
24+
25+
interface Props {
26+
url: string;
27+
className?: string;
28+
socialNetworks: SharingOptions['sharing_actions'];
29+
thumbnailUrl?: string;
30+
withLabels?: boolean;
31+
}
32+
33+
export function SocialShare({ className, socialNetworks, thumbnailUrl, url, withLabels }: Props) {
34+
return (
35+
<div className={classNames(className, styles.social, { [styles.withLabels]: withLabels })}>
36+
{socialNetworks.includes(SocialNetwork.LINKEDIN) && (
37+
<LinkedinShareButton
38+
data-title="Share on Linkedin"
39+
className={styles.socialButton}
40+
url={url}
41+
>
42+
<IconLinkedin className={styles.socialIcon} />
43+
</LinkedinShareButton>
44+
)}
45+
46+
{socialNetworks.includes(SocialNetwork.FACEBOOK) && (
47+
<FacebookShareButton
48+
data-title="Share on Facebook"
49+
className={styles.socialButton}
50+
url={url}
51+
>
52+
<IconFacebook className={styles.socialIcon} />
53+
</FacebookShareButton>
54+
)}
55+
56+
{socialNetworks.includes(SocialNetwork.TWITTER) && (
57+
<TwitterShareButton
58+
data-title="Share on X"
59+
className={styles.socialButton}
60+
url={url}
61+
>
62+
<IconTwitter className={styles.socialIcon} />
63+
</TwitterShareButton>
64+
)}
65+
66+
{socialNetworks.includes(SocialNetwork.PINTEREST) && thumbnailUrl && (
67+
<PinterestShareButton
68+
data-title="Share on Pinterest"
69+
className={styles.socialButton}
70+
media={thumbnailUrl}
71+
url={url}
72+
>
73+
<IconPinterest className={styles.socialIcon} />
74+
</PinterestShareButton>
75+
)}
76+
77+
{socialNetworks.includes(SocialNetwork.REDDIT) && (
78+
<RedditShareButton
79+
data-title="Share on Reddit"
80+
className={styles.socialButton}
81+
url={url}
82+
>
83+
<IconReddit className={styles.socialIcon} />
84+
</RedditShareButton>
85+
)}
86+
87+
{/* {socialNetworks.includes(SocialNetwork.MESSENGER) && (
88+
<FacebookMessengerShareButton data-title="Share on Messenger" className={styles.socialButton} appId="abc" url={url}>
89+
<IconMessenger className={styles.socialIcon} />
90+
</FacebookMessengerShareButton>
91+
)} */}
92+
93+
{socialNetworks.includes(SocialNetwork.WHATSAPP) && (
94+
<WhatsappShareButton
95+
data-title="Share on WhatsApp"
96+
className={styles.socialButton}
97+
url={url}
98+
>
99+
<IconWhatsApp className={styles.socialIcon} />
100+
</WhatsappShareButton>
101+
)}
102+
103+
{socialNetworks.includes(SocialNetwork.TELEGRAM) && (
104+
<TelegramShareButton
105+
data-title="Share on Telegram"
106+
className={styles.socialButton}
107+
url={url}
108+
>
109+
<IconTelegram className={styles.socialIcon} />
110+
</TelegramShareButton>
111+
)}
112+
113+
{/* {socialNetworks.includes(SocialNetwork.BLUESKY) && (
114+
Add it as soon as react-share merges the PR:
115+
https://github.com/nygardk/react-share/pull/549
116+
)} */}
117+
</div>
118+
);
119+
}

‎components/SocialShare/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { SocialShare } from './SocialShare';

‎modules/Story/Share/Share.module.scss‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,6 @@
1010
}
1111
}
1212

13-
.social {
14-
display: flex;
15-
flex-wrap: wrap;
16-
gap: $spacing-4;
17-
18-
&.withLabels {
19-
.socialButton {
20-
display: inline-flex;
21-
align-items: center;
22-
column-gap: $spacing-2;
23-
24-
&::after {
25-
content: attr(data-title);
26-
white-space: nowrap;
27-
}
28-
}
29-
}
30-
}
31-
32-
.socialIcon {
33-
width: 24px;
34-
}
35-
3613
.actions {
3714
display: flex;
3815
flex-wrap: wrap;

‎modules/Story/Share/Share.tsx‎

Lines changed: 9 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,12 @@
11
'use client';
22

33
import classNames from 'classnames';
4-
import {
5-
FacebookShareButton,
6-
LinkedinShareButton,
7-
PinterestShareButton,
8-
RedditShareButton,
9-
TelegramShareButton,
10-
TwitterShareButton,
11-
WhatsappShareButton,
12-
} from 'react-share';
134

145
import { Button } from '@/components/Button';
156
import { Divider } from '@/components/Divider';
16-
import {
17-
IconFacebook,
18-
IconFileDown,
19-
IconFolderDown,
20-
IconLink,
21-
IconLinkedin,
22-
IconPinterest,
23-
IconReddit,
24-
IconTelegram,
25-
IconText,
26-
IconTwitter,
27-
IconWhatsApp,
28-
} from '@/icons';
29-
import { type SharingOptions, SocialNetwork, type StoryActions } from 'theme-settings';
7+
import { SocialShare } from '@/components/SocialShare';
8+
import { IconFileDown, IconFolderDown, IconLink, IconText } from '@/icons';
9+
import type { SharingOptions, StoryActions } from 'theme-settings';
3010

3111
import styles from './Share.module.scss';
3212

@@ -67,93 +47,12 @@ export function Share({ actions, thumbnailUrl, sharingOptions, url }: Props) {
6747
[styles.inline]: socialShareButtonsCount === 1 && actionsButtonsCount === 1,
6848
})}
6949
>
70-
<div
71-
className={classNames(styles.social, {
72-
[styles.withLabels]: socialShareButtonsCount <= 2,
73-
})}
74-
>
75-
{socialNetworks.includes(SocialNetwork.LINKEDIN) && (
76-
<LinkedinShareButton
77-
data-title="Share on Linkedin"
78-
className={styles.socialButton}
79-
url={url}
80-
>
81-
<IconLinkedin className={styles.socialIcon} />
82-
</LinkedinShareButton>
83-
)}
84-
85-
{socialNetworks.includes(SocialNetwork.FACEBOOK) && (
86-
<FacebookShareButton
87-
data-title="Share on Facebook"
88-
className={styles.socialButton}
89-
url={url}
90-
>
91-
<IconFacebook className={styles.socialIcon} />
92-
</FacebookShareButton>
93-
)}
94-
95-
{socialNetworks.includes(SocialNetwork.TWITTER) && (
96-
<TwitterShareButton
97-
data-title="Share on X"
98-
className={styles.socialButton}
99-
url={url}
100-
>
101-
<IconTwitter className={styles.socialIcon} />
102-
</TwitterShareButton>
103-
)}
104-
105-
{socialNetworks.includes(SocialNetwork.PINTEREST) && thumbnailUrl && (
106-
<PinterestShareButton
107-
data-title="Share on Pinterest"
108-
className={styles.socialButton}
109-
media={thumbnailUrl}
110-
url={url}
111-
>
112-
<IconPinterest className={styles.socialIcon} />
113-
</PinterestShareButton>
114-
)}
115-
116-
{socialNetworks.includes(SocialNetwork.REDDIT) && (
117-
<RedditShareButton
118-
data-title="Share on Reddit"
119-
className={styles.socialButton}
120-
url={url}
121-
>
122-
<IconReddit className={styles.socialIcon} />
123-
</RedditShareButton>
124-
)}
125-
126-
{/* {socialNetworks.includes(SocialNetwork.MESSENGER) && (
127-
<FacebookMessengerShareButton data-title="Share on Messenger" className={styles.socialButton} appId="abc" url={url}>
128-
<IconMessenger className={styles.socialIcon} />
129-
</FacebookMessengerShareButton>
130-
)} */}
131-
132-
{socialNetworks.includes(SocialNetwork.WHATSAPP) && (
133-
<WhatsappShareButton
134-
data-title="Share on WhatsApp"
135-
className={styles.socialButton}
136-
url={url}
137-
>
138-
<IconWhatsApp className={styles.socialIcon} />
139-
</WhatsappShareButton>
140-
)}
141-
142-
{socialNetworks.includes(SocialNetwork.TELEGRAM) && (
143-
<TelegramShareButton
144-
data-title="Share on Telegram"
145-
className={styles.socialButton}
146-
url={url}
147-
>
148-
<IconTelegram className={styles.socialIcon} />
149-
</TelegramShareButton>
150-
)}
151-
152-
{/* {socialNetworks.includes(SocialNetwork.BLUESKY) && (
153-
Add it as soon as react-share merges the PR:
154-
https://github.com/nygardk/react-share/pull/549
155-
)} */}
156-
</div>
50+
<SocialShare
51+
socialNetworks={socialNetworks}
52+
url={url}
53+
thumbnailUrl={thumbnailUrl}
54+
withLabels={socialShareButtonsCount <= 2}
55+
/>
15756

15857
{actions && (
15958
<div className={styles.actions}>

0 commit comments

Comments
 (0)