Skip to content

Commit d3b0317

Browse files
DhanushNehruDhanushNehru
authored
Merge pull request #181 from JeevaRamanathan/footer/share-section
feat: added share feature in footer
2 parents 0592832 + 5fa3b0d commit d3b0317

File tree

3 files changed

+174
-28
lines changed

3 files changed

+174
-28
lines changed

‎package-lock.json‎

Lines changed: 39 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
"react-icons": "^5.2.1",
2020
"react-router-dom": "^6.23.1",
2121
"react-scripts": "5.0.1",
22+
"react-share": "^5.2.2",
2223
"styled-components": "^6.1.11"
2324
},
2425
"scripts": {

‎src/components/Footer.js‎

Lines changed: 134 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,153 @@
11
import React from "react";
2-
import { FaGithub, FaLinkedin } from "react-icons/fa";
2+
import { FaGithub, FaLinkedin } from "react-icons/fa";
33
import { GrInstagram } from "react-icons/gr";
44
import { FaXTwitter } from "react-icons/fa6";
55
import { IoLogoYoutube } from "react-icons/io";
6+
import {
7+
LinkedinIcon,
8+
LinkedinShareButton,
9+
PinterestIcon,
10+
PinterestShareButton,
11+
RedditIcon,
12+
RedditShareButton,
13+
TwitterShareButton,
14+
TwitterIcon,
15+
WhatsappIcon,
16+
WhatsappShareButton,
17+
} from "react-share";
618
import IconButton from "./IconButton";
719

820
function App() {
921
const containerStyle = {
1022
display: "flex",
1123
alignItems: "center",
24+
justifyContent: "space-between",
25+
gap: "1rem",
26+
flexDirection: "row",
27+
width: "100%",
28+
};
29+
30+
const iconStyle = { color: "white" };
31+
32+
const socialMediaStyle = {
33+
display: "flex",
34+
gap: "1rem",
1235
justifyContent: "center",
13-
gap: "1rem" // equivalent to gap-4
36+
marginLeft: "1rem",
37+
flex: 1,
38+
};
39+
40+
const shareStyle = {
41+
display: "flex",
42+
flexDirection: "column",
43+
alignItems: "flex-end",
1444
};
1545

16-
const iconStyle = { color: "white" }; // Style for white icons
46+
const madeWithStyle = {
47+
display: "flex",
48+
alignItems: "center",
49+
marginLeft: "0.5rem",
50+
};
1751

1852
return (
1953
<div style={containerStyle}>
20-
<a href="https://github.com/DhanushNehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
21-
<IconButton text="DhanushNehru">
22-
<FaGithub size={15} style={iconStyle} />
23-
</IconButton>
24-
</a>
25-
<a href="https://www.linkedin.com/in/dhanushnehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
26-
<IconButton text="dhanushnehru" color="#316FF6">
27-
<FaLinkedin size={15} style={iconStyle} />
28-
</IconButton>
29-
</a>
30-
<a href="https://www.instagram.com/dhanush_nehru/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
31-
<IconButton text="dhanush_nehru" color="#d62976">
32-
<GrInstagram size={15} style={iconStyle} />
33-
</IconButton>
34-
</a>
35-
<a href="https://x.com/Dhanush_Nehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
36-
<IconButton text="Dhanush_Nehru" color="black">
37-
<FaXTwitter size={15} style={iconStyle} />
38-
</IconButton>
39-
</a>
40-
<a href="https://www.youtube.com/@dhanushnehru" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}>
41-
<IconButton text="@dhanushnehru" color="#FF0000">
42-
<IoLogoYoutube size={15} style={iconStyle} />
43-
</IconButton>
44-
</a>
54+
<div style={madeWithStyle}>
55+
<span> Made with ❤️ by {" "}</span>
56+
<a
57+
href="https://www.github.com/DhanushNehru"
58+
style={{ color: "#4CAF50", marginLeft: "0.3rem" }}
59+
>
60+
Dhanush Nehru
61+
</a>
62+
</div>
63+
<div style={socialMediaStyle}>
64+
<a
65+
href="https://github.com/DhanushNehru"
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
style={{ textDecoration: "none" }}
69+
>
70+
<IconButton text="DhanushNehru">
71+
<FaGithub size={15} style={iconStyle} />
72+
</IconButton>
73+
</a>
74+
<a
75+
href="https://www.linkedin.com/in/dhanushnehru/"
76+
target="_blank"
77+
rel="noopener noreferrer"
78+
style={{ textDecoration: "none" }}
79+
>
80+
<IconButton text="dhanushnehru" color="#316FF6">
81+
<FaLinkedin size={15} style={iconStyle} />
82+
</IconButton>
83+
</a>
84+
<a
85+
href="https://www.instagram.com/dhanush_nehru/"
86+
target="_blank"
87+
rel="noopener noreferrer"
88+
style={{ textDecoration: "none" }}
89+
>
90+
<IconButton text="dhanush_nehru" color="#d62976">
91+
<GrInstagram size={15} style={iconStyle} />
92+
</IconButton>
93+
</a>
94+
<a
95+
href="https://x.com/Dhanush_Nehru"
96+
target="_blank"
97+
rel="noopener noreferrer"
98+
style={{ textDecoration: "none" }}
99+
>
100+
<IconButton text="Dhanush_Nehru" color="black">
101+
<FaXTwitter size={15} style={iconStyle} />
102+
</IconButton>
103+
</a>
104+
<a
105+
href="https://www.youtube.com/@dhanushnehru"
106+
target="_blank"
107+
rel="noopener noreferrer"
108+
style={{ textDecoration: "none" }}
109+
>
110+
<IconButton text="@dhanushnehru" color="#FF0000">
111+
<IoLogoYoutube size={15} style={iconStyle} />
112+
</IconButton>
113+
</a>
114+
</div>
115+
<div style={shareStyle}>
116+
<div className="flex space-x-2">
117+
<span>Share</span>
118+
<div>
119+
<RedditShareButton url={"custom-code-editor.vercel.app/"}>
120+
<RedditIcon size={32} round />
121+
</RedditShareButton>
122+
</div>
123+
<div>
124+
<WhatsappShareButton url={"custom-code-editor.vercel.app/"}>
125+
<WhatsappIcon size={32} round />
126+
</WhatsappShareButton>
127+
</div>
128+
<div>
129+
<LinkedinShareButton url={"custom-code-editor.vercel.app/"}>
130+
<LinkedinIcon size={32} round />
131+
</LinkedinShareButton>
132+
</div>
133+
<div>
134+
<PinterestShareButton
135+
media={"custom-code-editor.vercel.app/"}
136+
url={"custom-code-editor.vercel.app/"}
137+
>
138+
<PinterestIcon size={32} round />
139+
</PinterestShareButton>
140+
</div>
141+
<div>
142+
<TwitterShareButton
143+
url={"custom-code-editor.vercel.app/"}
144+
style={{ marginRight: "40px" }}
145+
>
146+
<TwitterIcon size={32} round />
147+
</TwitterShareButton>
148+
</div>
149+
</div>
150+
</div>
45151
</div>
46152
);
47153
}

0 commit comments

Comments
 (0)