Skip to content

Commit 77b021a

Browse files
yashsehgalyashsehgal
authored
Merge pull request #10 from DesignSystemsOSS/development
🚀Feat: Added Footer (#9)
2 parents 1fdeb25 + 6b936bb commit 77b021a

File tree

7 files changed

+415
-33
lines changed

7 files changed

+415
-33
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
},
1515
"scripts": {
1616
"start": "react-scripts start",
17-
"build": "react-scripts build",
17+
"build": "CI= react-scripts build",
1818
"test": "react-scripts test",
1919
"eject": "react-scripts eject"
2020
},

‎src/App.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { BrowserRouter, Route } from "react-router-dom";
2-
// import Footer from "./components/section-components/Footer";
2+
import Footer from "./components/section-components/Footer";
33
import Header from "./components/section-components/Header";
44
import './styles/index.css';
55
import Careers from "./views/Careers";
@@ -20,7 +20,7 @@ function App() {
2020
<Route path="/careers" exact component={Careers} />
2121
</BrowserRouter>
2222
{/* footer component */}
23-
{/* <Footer /> */}
23+
<Footer />
2424
</div>
2525
);
2626
}

‎src/components/section-components/Footer/__usefulLinks.json

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
[
2+
{
3+
"Home": "/",
4+
"Career": "/careers",
5+
"Team": "/team",
6+
"Contact": "/contact-us",
7+
"Eccentrictouch": "/products",
8+
9+
"LinkedIn": "https://www.linkedin.com/company/designsystemsoss/",
10+
"GitHub": "https://github.com/DesignSystemsOSS",
11+
"Twitter": "https://twitter.com/TDesignsystems",
12+
"Discord": "https://discord.gg/VcmnY4HTEc"
13+
}
14+
]

‎src/components/section-components/Footer/index.js

Lines changed: 146 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,153 @@
1-
import React from 'react';
2-
import './style.footer.css';
1+
import React from "react";
2+
import { useState } from "react";
3+
import "./style.footer.css";
4+
import LinksData from "./__usefulLinks.json";
5+
import Button from "../../widgets/Button";
36

47
export default function Footer() {
8+
const [footerLinksDetails] = useState(LinksData);
59
return (
610
<div className="footer">
7-
{/* <div className="logo-wrapper">
8-
<h1 className="demo-logo-icon">DS</h1>
9-
<p className="logo-title">The DesignSystems</p>
11+
<div className="footer-row-1">
12+
<div className="logo-container color-change-4x">
13+
<h1 className="demo-logo-icon">DS</h1>
14+
<p className="logo-title">The DesignSystems</p>
15+
</div>
16+
17+
<div className="footer-col-1">
18+
<div className="useful-links-section">
19+
<p className="useful-links-title links-title">
20+
<b>Useful links</b>
21+
</p>
22+
<div className="useful-links-list">
23+
{footerLinksDetails.map((data, index) => (
24+
<ul className="useful-links-list">
25+
<li className="useful-link-item" key={index}>
26+
<a href={data.Home}>Home</a>
27+
</li>
28+
<li className="useful-link-item" key={index}>
29+
<a href={data.Career}>Career</a>
30+
</li>
31+
<li className="useful-link-item" key={index}>
32+
<a href={data.Team}>Team</a>
33+
</li>
34+
<li className="useful-link-item" key={index}>
35+
<a href={data.Contact}>Contact Us</a>
36+
</li>
37+
</ul>
38+
))}
39+
</div>
40+
</div>
41+
42+
<div className="products-links-section">
43+
<p className="products-links-title links-title">
44+
<b>Products</b>
45+
</p>
46+
<div className="product-links-list">
47+
{footerLinksDetails.map((data, index) => (
48+
<ul className="products-links-list">
49+
<li className="products-links-item" key={index}>
50+
<a href={data.Eccentrictouch}>Eccentrictouch</a>
51+
</li>
52+
</ul>
53+
))}
54+
</div>
55+
</div>
56+
</div>
57+
58+
<div className="footer-col-2">
59+
<div className="connect-community">
60+
<p className="community-title gradient-text">
61+
Don't miss anything, Join our GitHub Organization and Discord
62+
Community
63+
</p>
64+
<div className="community-links-wrapper">
65+
<a
66+
href="https://github.com/DesignSystemsOSS"
67+
target="_blank"
68+
rel="noreferrer"
69+
>
70+
<Button
71+
type="outline"
72+
value="Join our Github Organization"
73+
startIcon="fab fa-github"
74+
/>
75+
</a>
76+
77+
<a
78+
href="https://discord.gg/VcmnY4HTEc"
79+
target="_blank"
80+
rel="noreferrer"
81+
>
82+
<Button
83+
type="primary"
84+
value="Join Discord Community"
85+
startIcon="fab fa-discord"
86+
/>
87+
</a>
88+
</div>
89+
</div>
90+
</div>
1091
</div>
11-
<div className="footer-col-1">
12-
<div className="useful-links-section">
13-
<p className="useful-links-title links-title">Useful links</p>
14-
<ul className="useful-links-list">
15-
<li className="useful-link-item"></li>
16-
</ul>
92+
93+
<div className="footer-row-2">
94+
<div className="social-links-container">
95+
{footerLinksDetails.map((data, index) => (
96+
<div className="social-links-list">
97+
<a
98+
href={data.LinkedIn}
99+
target="_blank"
100+
rel="noreferrer"
101+
key={index}
102+
className="color-change-4x"
103+
>
104+
<button type="button" className="fab fa-linkedin"></button>
105+
</a>
106+
107+
<a
108+
href={data.GitHub}
109+
target="_blank"
110+
rel="noreferrer"
111+
key={index}
112+
>
113+
<button
114+
type="button"
115+
className="fab fa-github social-link"
116+
></button>
117+
</a>
118+
119+
<a
120+
href={data.Twitter}
121+
target="_blank"
122+
rel="noreferrer"
123+
key={index}
124+
>
125+
<button type="button" className="fab fa-twitter"></button>
126+
</a>
127+
128+
<a
129+
href={data.Discord}
130+
target="_blank"
131+
rel="noreferrer"
132+
key={index}
133+
>
134+
<button type="button" className="fab fa-discord"></button>
135+
</a>
136+
</div>
137+
))}
138+
</div>
139+
<div className="privacy-copyright-links-title">
140+
<a href="#" target="_blank" rel="noreferrer">
141+
Privacy
142+
</a>
143+
<a href="#" target="_blank" rel="noreferrer">
144+
Terms
145+
</a>
146+
<p className="copyright-content">
147+
&copy;2021 The DesignSystems | All Rights Reserved
148+
</p>
17149
</div>
18-
</div> */}
150+
</div>
19151
</div>
20-
)
21-
}
152+
);
153+
}

‎src/components/section-components/Footer/style.footer.css

Lines changed: 153 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/section-components/Footer/style.footer.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)