Skip to content

Commit f575572

Browse files
NishantSinghhhhhNishantSinghhhhh
committed
added documentation of Link Component
Signed-off-by: NishantSinghhhhh <[email protected]>
1 parent 0d63372 commit f575572

File tree

7 files changed

+726
-0
lines changed

7 files changed

+726
-0
lines changed

‎src/pages/projects/sistent/components/link/code.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import { LinkCode } from "../../../../../sections/Projects/Sistent/components/link/code";
3+
4+
const LinkCodePage = () => {
5+
return <LinkCode />;
6+
};
7+
8+
export default LinkCodePage;

‎src/pages/projects/sistent/components/link/guidance.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import { LinkGuidancePage } from "../../../../../sections/Projects/Sistent/components/link/guidance";
3+
4+
const LinkGuidance = () => {
5+
return <LinkGuidancePage />;
6+
};
7+
8+
export default LinkGuidance;

‎src/pages/projects/sistent/components/link/index.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from "react";
2+
import SistentLink from "../../../../../sections/Projects/Sistent/components/link";
3+
4+
const SistentButtonPage = () => {
5+
return <SistentLink />;
6+
};
7+
8+
export default SistentButtonPage;

‎src/sections/Projects/Sistent/components/links/code-block.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { useState } from "react";
2+
import Code from "../../../../../components/CodeBlock";
3+
4+
export const CodeBlock = ({ name, code }) => {
5+
const [showCode, setShowCode] = useState(false);
6+
const onChange = () => {
7+
setShowCode((prev) => !prev);
8+
};
9+
return (
10+
<div className="show-code">
11+
<input type="checkbox" name={name} id={name} onChange={onChange} />
12+
<label htmlFor={name} className="label">
13+
Show Code
14+
</label>
15+
{showCode && (
16+
<Code codeString={code} language="javascript" />
17+
)}
18+
</div>
19+
);
20+
};

‎src/sections/Projects/Sistent/components/links/code.js‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,316 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { SistentThemeProvider, Link } from "@layer5/sistent";
6+
import { CodeBlock } from "./code-block";
7+
// import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
8+
import { SistentLayout } from "../../sistent-layout";
9+
10+
import TabButton from "../../../../../reusecore/Button";
11+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
12+
13+
const codes = [
14+
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
15+
<Link
16+
href="Your Link"
17+
style={{
18+
textDecoration: "none",
19+
border: "1px solid black",
20+
padding: "6px",
21+
marginLeft: "10px",
22+
}}
23+
>
24+
Simple Link
25+
</Link>
26+
</SistentThemeProvider>`,
27+
28+
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
29+
<Link
30+
href="Your Path"
31+
style={{
32+
textDecoration: "none",
33+
border: "1px solid blue",
34+
color: "blue",
35+
padding: "6px",
36+
marginLeft: "10px",
37+
}}
38+
>
39+
Customized Link 1
40+
</Link>
41+
</SistentThemeProvider>`,
42+
43+
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
44+
<Link
45+
href="Your Path"
46+
style={{
47+
textDecoration: "underline",
48+
color: "blue",
49+
padding: "6px",
50+
marginLeft: "10px",
51+
}}
52+
>
53+
Underlined Link
54+
</Link>
55+
</SistentThemeProvider>
56+
`,
57+
58+
` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
59+
<Link
60+
href="Your Path"
61+
style={{
62+
textDecoration: "none",
63+
color: "green",
64+
fontWeight: "bold",
65+
fontSize: "16px",
66+
padding: "6px",
67+
marginLeft: "10px",
68+
borderBottom: "2px dashed green",
69+
}}
70+
>
71+
Customized Link
72+
</Link>
73+
</SistentThemeProvider>`,
74+
75+
` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
76+
<Link
77+
href="/path-to-file.zip"
78+
download="file.zip"
79+
style={{
80+
color: "blue",
81+
fontWeight: "bold",
82+
fontSize: "16px",
83+
padding: "6px",
84+
marginLeft: "10px",
85+
borderBottom: "2px solid blue",
86+
}}
87+
>
88+
Download File
89+
</Link>
90+
</SistentThemeProvider>`,
91+
92+
` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
93+
<Link
94+
href="https://your-link.com"
95+
target="_blank"
96+
rel="noopener noreferrer"
97+
style={{
98+
textDecoration: "underline",
99+
color: "blue",
100+
padding: "6px",
101+
marginLeft: "10px",
102+
}}
103+
>
104+
Visit Secure Link
105+
</Link>
106+
</SistentThemeProvider>`
107+
];
108+
109+
export const LinkCode = () => {
110+
const location = useLocation();
111+
const { isDark } = useStyledDarkMode();
112+
113+
return (
114+
<SistentLayout title="Link" >
115+
<div className="content">
116+
<a id="Identity">
117+
<h2>Link</h2>
118+
</a>
119+
<p>
120+
</p>
121+
<div className="filterBtns">
122+
<TabButton
123+
className={
124+
location.pathname === "/projects/sistent/components/link"
125+
? "active"
126+
: ""
127+
}
128+
onClick={() => navigate("/projects/sistent/components/link")}
129+
title="Overview"
130+
/>
131+
<TabButton
132+
className={
133+
location.pathname ===
134+
"/projects/sistent/components/link/guidance"
135+
? "active"
136+
: ""
137+
}
138+
onClick={() =>
139+
navigate("/projects/sistent/components/link/guidance")
140+
}
141+
title="Guidance"
142+
/>
143+
<TabButton
144+
className={
145+
location.pathname === "/projects/sistent/components/link/code"
146+
? "active"
147+
: ""
148+
}
149+
onClick={() => navigate("/projects/sistent/identity/color/code")}
150+
title="Code"
151+
/>
152+
</div>
153+
<div className="main-content">
154+
<p>
155+
Links are fundamental components in web navigation, allowing users to move between different pages or resources. Their design and implementation are crucial for creating a seamless browsing experience.
156+
</p>
157+
<a id="Simple Link">
158+
<h2>Simple Link</h2>
159+
</a>
160+
<p>The link can be presented in a simple format, primarily as underlined text that serves as a gateway to navigate users to other pages or resources, without any prominent styling or buttons attached to it.</p>
161+
<div className="showcase">
162+
<div className="items">
163+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
164+
<Link
165+
href="your path"
166+
style={{
167+
textDecoration: "none",
168+
border: "1px solid black",
169+
padding: "6px",
170+
marginLeft: "10px",
171+
}}
172+
>
173+
Simple Link
174+
</Link>
175+
</SistentThemeProvider>
176+
</div>
177+
<CodeBlock name="simple-link" code={codes[0]} />
178+
</div>
179+
<a id="Customized Links">
180+
<h2>Customized Links</h2>
181+
</a>
182+
<p>
183+
Customized Links enhance user experience by adapting their design and behavior to match the app’s theme. They can include personalized styles, hover effects, or icons, ensuring both visual consistency and improved usability across the website.
184+
</p>
185+
186+
<h3>Colored Link</h3>
187+
<p>
188+
Colored Links can help draw attention to key areas of a page. They are styled with custom colors to stand out and indicate their importance, enhancing navigation and usability.
189+
</p>
190+
<div className="showcase">
191+
<div className="items">
192+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
193+
<Link href="Your Path"
194+
style={{
195+
textDecoration: "none",
196+
border: "1px solid blue",
197+
color: "blue",
198+
padding: "6px",
199+
marginLeft: "10px",
200+
}}
201+
>
202+
Colored Link
203+
</Link>
204+
</SistentThemeProvider>
205+
</div>
206+
<CodeBlock name="Colored-link" code={codes[1]} />
207+
</div>
208+
209+
<h3>Underlined Link</h3>
210+
<p>
211+
Underlined Links, often referred to as ghost buttons, are styled primarily with text without any fills or borders. They utilize specific text styling and color to signify different states, making them easily identifiable and enhancing user navigation.
212+
</p>
213+
<div className="showcase">
214+
<div className="items">
215+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
216+
<Link
217+
href="Your Path"
218+
style={{
219+
textDecoration: "underline",
220+
color: "blue",
221+
padding: "6px",
222+
border: "1px solid blue",
223+
marginLeft: "10px",
224+
}}
225+
>
226+
Underlined Link
227+
</Link>
228+
</SistentThemeProvider>
229+
</div>
230+
<CodeBlock name="underlined-link" code={codes[2]} />
231+
</div>
232+
233+
<h3>Customized Link </h3>
234+
<p>
235+
Customized Links allow for distinct text styles and presentations that can enhance the user experience. By leveraging different styling properties, these links can be tailored to fit the design aesthetics of your application while maintaining functionality.
236+
</p>
237+
<div className="showcase">
238+
<div className="items">
239+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
240+
<Link
241+
href="Your Path"
242+
style={{
243+
textDecoration: "none",
244+
color: "green",
245+
fontWeight: "bold",
246+
fontSize: "16px",
247+
padding: "6px",
248+
marginLeft: "10px",
249+
borderBottom: "2px dashed green",
250+
}}
251+
>
252+
Customized Link
253+
</Link>
254+
</SistentThemeProvider>
255+
</div>
256+
<CodeBlock name="customized-link" code={codes[3]} />
257+
</div>
258+
259+
<h3>Download Link</h3>
260+
<p>
261+
Download Links are essential when you want to provide users with downloadable content such as files, PDFs, or documents. These links can be styled to clearly indicate a download action to the user.
262+
</p>
263+
<div className="showcase">
264+
<div className="items">
265+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
266+
<Link
267+
href="/path-to-file.zip"
268+
download="file.zip"
269+
style={{
270+
textDecoration: "none",
271+
color: "blue",
272+
fontWeight: "bold",
273+
fontSize: "16px",
274+
padding: "6px",
275+
marginLeft: "10px",
276+
borderBottom: "2px solid blue",
277+
}}
278+
>
279+
Download File
280+
</Link>
281+
</SistentThemeProvider>
282+
</div>
283+
<CodeBlock name="download-link" code={codes[4]} />
284+
</div>
285+
286+
<a id="Security Considerations">
287+
<h2>Security Considerations</h2>
288+
</a>
289+
<p>
290+
When utilizing links we should use them with the target="_blank" attribute, it's essential to implement rel="noopener" or rel="noreferrer" to enhance security and user privacy
291+
</p>
292+
<div className="showcase">
293+
<div className="items">
294+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
295+
<Link
296+
href="https://your-link.com" // Replace with the actual link
297+
target="_blank"
298+
rel="noopener noreferrer"
299+
style={{
300+
textDecoration: "underline",
301+
color: "blue",
302+
padding: "6px",
303+
marginLeft: "10px",
304+
}}
305+
>
306+
Visit Secure Link
307+
</Link>
308+
</SistentThemeProvider>
309+
</div>
310+
<CodeBlock name="secure_links" code={codes[5]} />
311+
</div>
312+
</div>
313+
</div>
314+
</SistentLayout>
315+
);
316+
};

0 commit comments

Comments
 (0)