Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

added documentation of Link Component #6013

Closed
wants to merge 3 commits into from
Closed

added documentation of Link Component #6013

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f575572
added documentation of Link Component
NishantSinghhhhh Oct 20, 2024
e4eae56
Merge branch 'master' into Link_Documentation
NishantSinghhhhh Oct 21, 2024
43c69fc
Merge branch 'master' into Link_Documentation
sudhanshutech Oct 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions src/pages/projects/sistent/components/link/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from "react";
import { LinkCode } from "../../../../../sections/Projects/Sistent/components/link/code";

const LinkCodePage = () => {
return <LinkCode />;
};

export default LinkCodePage;
8 changes: 8 additions & 0 deletions src/pages/projects/sistent/components/link/guidance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from "react";
import { LinkGuidancePage } from "../../../../../sections/Projects/Sistent/components/link/guidance";

const LinkGuidance = () => {
return <LinkGuidancePage />;
};

export default LinkGuidance;
8 changes: 8 additions & 0 deletions src/pages/projects/sistent/components/link/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import React from "react";
import SistentLink from "../../../../../sections/Projects/Sistent/components/link";

const SistentButtonPage = () => {
return <SistentLink />;
};

export default SistentButtonPage;
20 changes: 20 additions & 0 deletions src/sections/Projects/Sistent/components/links/code-block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, { useState } from "react";
import Code from "../../../../../components/CodeBlock";

export const CodeBlock = ({ name, code }) => {
const [showCode, setShowCode] = useState(false);
const onChange = () => {
setShowCode((prev) => !prev);
};
return (
<div className="show-code">
<input type="checkbox" name={name} id={name} onChange={onChange} />
<label htmlFor={name} className="label">
Show Code
</label>
{showCode && (
<Code codeString={code} language="javascript" />
)}
</div>
);
};
316 changes: 316 additions & 0 deletions src/sections/Projects/Sistent/components/links/code.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,316 @@
import React from "react";
import { navigate } from "gatsby";
import { useLocation } from "@reach/router";

import { SistentThemeProvider, Link } from "@layer5/sistent";
import { CodeBlock } from "./code-block";
// import { FaArrowRight } from "@react-icons/all-files/fa/FaArrowRight";
import { SistentLayout } from "../../sistent-layout";

import TabButton from "../../../../../reusecore/Button";
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";

const codes = [
`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="Your Link"
style={{
textDecoration: "none",
border: "1px solid black",
padding: "6px",
marginLeft: "10px",
}}
>
Simple Link
</Link>
</SistentThemeProvider>`,

`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="Your Path"
style={{
textDecoration: "none",
border: "1px solid blue",
color: "blue",
padding: "6px",
marginLeft: "10px",
}}
>
Customized Link 1
</Link>
</SistentThemeProvider>`,

`<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="Your Path"
style={{
textDecoration: "underline",
color: "blue",
padding: "6px",
marginLeft: "10px",
}}
>
Underlined Link
</Link>
</SistentThemeProvider>
`,

` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="Your Path"
style={{
textDecoration: "none",
color: "green",
fontWeight: "bold",
fontSize: "16px",
padding: "6px",
marginLeft: "10px",
borderBottom: "2px dashed green",
}}
>
Customized Link
</Link>
</SistentThemeProvider>`,

` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="/path-to-file.zip"
download="file.zip"
style={{
color: "blue",
fontWeight: "bold",
fontSize: "16px",
padding: "6px",
marginLeft: "10px",
borderBottom: "2px solid blue",
}}
>
Download File
</Link>
</SistentThemeProvider>`,

` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="https://your-link.com"
target="_blank"
rel="noopener noreferrer"
style={{
textDecoration: "underline",
color: "blue",
padding: "6px",
marginLeft: "10px",
}}
>
Visit Secure Link
</Link>
</SistentThemeProvider>`
];

export const LinkCode = () => {
const location = useLocation();
const { isDark } = useStyledDarkMode();

return (
<SistentLayout title="Link" >
<div className="content">
<a id="Identity">
<h2>Link</h2>
</a>
<p>
</p>
<div className="filterBtns">
<TabButton
className={
location.pathname === "/projects/sistent/components/link"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/components/link")}
title="Overview"
/>
<TabButton
className={
location.pathname ===
"/projects/sistent/components/link/guidance"
? "active"
: ""
}
onClick={() =>
navigate("/projects/sistent/components/link/guidance")
}
title="Guidance"
/>
<TabButton
className={
location.pathname === "/projects/sistent/components/link/code"
? "active"
: ""
}
onClick={() => navigate("/projects/sistent/identity/color/code")}
title="Code"
/>
</div>
<div className="main-content">
<p>
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.
</p>
<a id="Simple Link">
<h2>Simple Link</h2>
</a>
<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>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="your path"
style={{
textDecoration: "none",
border: "1px solid black",
padding: "6px",
marginLeft: "10px",
}}
>
Simple Link
</Link>
</SistentThemeProvider>
</div>
<CodeBlock name="simple-link" code={codes[0]} />
</div>
<a id="Customized Links">
<h2>Customized Links</h2>
</a>
<p>
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.
</p>

<h3>Colored Link</h3>
<p>
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.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link href="Your Path"
style={{
textDecoration: "none",
border: "1px solid blue",
color: "blue",
padding: "6px",
marginLeft: "10px",
}}
>
Colored Link
</Link>
</SistentThemeProvider>
</div>
<CodeBlock name="Colored-link" code={codes[1]} />
</div>

<h3>Underlined Link</h3>
<p>
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.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="Your Path"
style={{
textDecoration: "underline",
color: "blue",
padding: "6px",
border: "1px solid blue",
marginLeft: "10px",
}}
>
Underlined Link
</Link>
</SistentThemeProvider>
</div>
<CodeBlock name="underlined-link" code={codes[2]} />
</div>

<h3>Customized Link </h3>
<p>
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.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="Your Path"
style={{
textDecoration: "none",
color: "green",
fontWeight: "bold",
fontSize: "16px",
padding: "6px",
marginLeft: "10px",
borderBottom: "2px dashed green",
}}
>
Customized Link
</Link>
</SistentThemeProvider>
</div>
<CodeBlock name="customized-link" code={codes[3]} />
</div>

<h3>Download Link</h3>
<p>
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.
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="/path-to-file.zip"
download="file.zip"
style={{
textDecoration: "none",
color: "blue",
fontWeight: "bold",
fontSize: "16px",
padding: "6px",
marginLeft: "10px",
borderBottom: "2px solid blue",
}}
>
Download File
</Link>
</SistentThemeProvider>
</div>
<CodeBlock name="download-link" code={codes[4]} />
</div>

<a id="Security Considerations">
<h2>Security Considerations</h2>
</a>
<p>
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
</p>
<div className="showcase">
<div className="items">
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
<Link
href="https://your-link.com" // Replace with the actual link
target="_blank"
rel="noopener noreferrer"
style={{
textDecoration: "underline",
color: "blue",
padding: "6px",
marginLeft: "10px",
}}
>
Visit Secure Link
</Link>
</SistentThemeProvider>
</div>
<CodeBlock name="secure_links" code={codes[5]} />
</div>
</div>
</div>
</SistentLayout>
);
};
Loading
Loading