changing export to default

Signed-off-by: Vidit Kushwaha <[email protected]>
layer5io · Nov 18, 2024 · c14f06c · c14f06c
1 parent c622456
commit c14f06c
Show file tree

Hide file tree

Showing 17 changed files with 206 additions and 101 deletions.
diff --git a/src/sections/Projects/Sistent/components/button/code.js b/src/sections/Projects/Sistent/components/button/code.js
@@ -35,12 +35,12 @@ const codes = [
   </SistentThemeProvider>`,
 ];
 
-export const ButtonCode = () => {
+const ButtonCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="Button" >
+    <SistentLayout title="Button">
       <div className="content">
         <a id="Identity">
           <h2>Button</h2>
@@ -177,3 +177,5 @@ export const ButtonCode = () => {
     </SistentLayout>
   );
 };
+
+export default ButtonCode;
diff --git a/src/sections/Projects/Sistent/components/button/guidance.js b/src/sections/Projects/Sistent/components/button/guidance.js
@@ -8,7 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const ButtonGuidance = () => {
+const ButtonGuidance = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -195,3 +195,5 @@ export const ButtonGuidance = () => {
     </SistentLayout>
   );
 };
+
+export default ButtonGuidance;
diff --git a/src/sections/Projects/Sistent/components/container/code.js b/src/sections/Projects/Sistent/components/container/code.js
@@ -44,7 +44,7 @@ const codes = [
 `,
 ];
 
-export const ContainerCode = () => {
+const ContainerCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -217,3 +217,5 @@ export const ContainerCode = () => {
     </SistentLayout>
   );
 };
+
+export default ContainerCode;
diff --git a/src/sections/Projects/Sistent/components/container/guidance.js b/src/sections/Projects/Sistent/components/container/guidance.js
@@ -8,7 +8,7 @@ import { SistentLayout } from "../../sistent-layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const ContainerGuidancePage = () => {
+const ContainerGuidancePage = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -162,3 +162,5 @@ export const ContainerGuidancePage = () => {
     </SistentLayout>
   );
 };
+
+export default ContainerGuidancePage;
diff --git a/src/sections/Projects/Sistent/components/link/code.js b/src/sections/Projects/Sistent/components/link/code.js
@@ -68,7 +68,7 @@ const codes = [
       </Link>
     </SistentThemeProvider>`,
 
-    ` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+  ` <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
       <Link
         href="https://your-link.com" 
         target="_blank"
@@ -81,21 +81,20 @@ const codes = [
       >
         Visit Secure Link
       </Link>
-    </SistentThemeProvider>`
+    </SistentThemeProvider>`,
 ];
 
-export const LinkCode = () => {
+const LinkCode = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
   return (
-    <SistentLayout title="Link" >
+    <SistentLayout title="Link">
       <div className="content">
         <a id="Identity">
           <h2>Link</h2>
         </a>
-        <p>
-        </p>
+        <p></p>
         <div className="filterBtns">
           <TabButton
             className={
@@ -108,8 +107,7 @@ export const LinkCode = () => {
           />
           <TabButton
             className={
-              location.pathname ===
-              "/projects/sistent/components/link/guidance"
+              location.pathname === "/projects/sistent/components/link/guidance"
                 ? "active"
                 : ""
             }
@@ -130,12 +128,20 @@ export const LinkCode = () => {
         </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.
+            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>
+          <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"}>
@@ -157,17 +163,23 @@ export const LinkCode = () => {
             <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.
+            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.
+            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"
+                <Link
+                  href="Your Path"
                   style={{
                     textDecoration: "none",
                     color: "blue",
@@ -184,7 +196,10 @@ export const LinkCode = () => {
 
           <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.
+            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">
@@ -197,7 +212,7 @@ export const LinkCode = () => {
                     marginLeft: "10px",
                   }}
                 >
-                 Underlined Link
+                  Underlined Link
                 </Link>
               </SistentThemeProvider>
             </div>
@@ -206,7 +221,10 @@ export const LinkCode = () => {
 
           <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.
+            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">
@@ -233,7 +251,9 @@ export const LinkCode = () => {
             <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
+            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">
@@ -259,3 +279,4 @@ export const LinkCode = () => {
     </SistentLayout>
   );
 };
+export default LinkCode;
diff --git a/src/sections/Projects/Sistent/components/link/guidance.js b/src/sections/Projects/Sistent/components/link/guidance.js
@@ -6,10 +6,10 @@ import { SistentThemeProvider, Link, ExternalLinkIcon } from "@layer5/sistent";
 import { SistentLayout } from "../../sistent-layout";
 
 import TabButton from "../../../../../reusecore/Button";
-import StyledButton  from "../../../../../reusecore/Button";
+import StyledButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const LinkGuidancePage = () => {
+const LinkGuidancePage = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
 
@@ -20,7 +20,8 @@ export const LinkGuidancePage = () => {
           <h2>Link</h2>
         </a>
         <p>
-        A link component is a navigational element that directs users to another page or section within an application.
+          A link component is a navigational element that directs users to
+          another page or section within an application.
         </p>
         <div className="filterBtns">
           <TabButton
@@ -34,8 +35,7 @@ export const LinkGuidancePage = () => {
           />
           <TabButton
             className={
-              location.pathname ===
-              "/projects/sistent/components/link/guidance"
+              location.pathname === "/projects/sistent/components/link/guidance"
                 ? "active"
                 : ""
             }
@@ -56,17 +56,20 @@ export const LinkGuidancePage = () => {
         </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.
+            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="Function">
             <h2>Function</h2>
           </a>
-          <p>
-            Links too have a lot many functions as:
-          </p>
+          <p>Links too have a lot many functions as:</p>
           <h3>Navigation Links</h3>
           <p>
-          These links help users navigate through a website, directing them to important sections or related content. They should be easily accessible and clearly labeled to enhance usability.
+            These links help users navigate through a website, directing them to
+            important sections or related content. They should be easily
+            accessible and clearly labeled to enhance usability.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -85,11 +88,18 @@ export const LinkGuidancePage = () => {
           </Row>
           <h3>Call to Action (CTA) Links</h3>
           <p>
-          CTA links encourage users to take specific actions, such as signing up for a newsletter or downloading a resource. They should stand out visually to attract user attention and drive engagement.
+            CTA links encourage users to take specific actions, such as signing
+            up for a newsletter or downloading a resource. They should stand out
+            visually to attract user attention and drive engagement.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-              <StyledButton  $primary $url="" className="button" $external={false}>
+              <StyledButton
+                $primary
+                $url=""
+                className="button"
+                $external={false}
+              >
                 <Link
                   href="https://layer5.io/projects/sistent/components/link/guidance" // Specify the path you want to navigate to
                   style={{
@@ -105,7 +115,10 @@ export const LinkGuidancePage = () => {
           </Row>
           <h3>External Links</h3>
           <p>
-          These links direct users to external websites. It’s important to provide clear indicators (like icons or different styles) that these links lead to external content, which helps users manage their navigation expectations.
+            These links direct users to external websites. It’s important to
+            provide clear indicators (like icons or different styles) that these
+            links lead to external content, which helps users manage their
+            navigation expectations.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -121,7 +134,9 @@ export const LinkGuidancePage = () => {
                   display: "inline-flex",
                   alignItems: "center",
                 }}
-                onMouseEnter={(e) => (e.target.style.textDecoration = "underline")}
+                onMouseEnter={(e) =>
+                  (e.target.style.textDecoration = "underline")
+                }
                 onMouseLeave={(e) => (e.target.style.textDecoration = "none")}
               >
                 Visit External Resource <ExternalLinkIcon />
@@ -133,22 +148,37 @@ export const LinkGuidancePage = () => {
             <h2>Labeling</h2>
           </a>
           <p>
-          Link labels are vital for communicating the action associated with the link. Labels should be concise, informative, and use action-oriented language (e.g., "Download Report," "Learn More") to guide users effectively.
+            Link labels are vital for communicating the action associated with
+            the link. Labels should be concise, informative, and use
+            action-oriented language (e.g., "Download Report," "Learn More") to
+            guide users effectively.
           </p>
           <h3>Case Style</h3>
           <p>
-          Consistency in the case style of link text improves readability and enhances the overall aesthetic of the website. Using a uniform style, such as sentence case or title case, contributes to a more professional appearance.
+            Consistency in the case style of link text improves readability and
+            enhances the overall aesthetic of the website. Using a uniform
+            style, such as sentence case or title case, contributes to a more
+            professional appearance.
           </p>
           <h3>Font Weight</h3>
           <p>
-          The weight of the font in link text can signify importance and attract user attention. A bolder font can indicate a primary action, while a lighter font may denote secondary options. Legibility is essential for ensuring that links are easy to read.
+            The weight of the font in link text can signify importance and
+            attract user attention. A bolder font can indicate a primary action,
+            while a lighter font may denote secondary options. Legibility is
+            essential for ensuring that links are easy to read.
           </p>
           <h3>Text Decoration</h3>
           <p>
-          Links typically use underlines to distinguish them from regular text. However, it’s important to maintain the underline for accessibility and usability, as users often associate underlined text with clickable links. Consider hover effects to provide visual feedback.
+            Links typically use underlines to distinguish them from regular
+            text. However, it’s important to maintain the underline for
+            accessibility and usability, as users often associate underlined
+            text with clickable links. Consider hover effects to provide visual
+            feedback.
           </p>
         </div>
       </div>
     </SistentLayout>
   );
 };
+
+export default LinkGuidancePage;
diff --git a/src/sections/Projects/Sistent/components/modal/code.js b/src/sections/Projects/Sistent/components/modal/code.js
@@ -80,7 +80,7 @@ const codes = [
     </Modal>`,
 ];
 
-export const ModalCode = () => {
+const ModalCode = () => {
   const [open, setOpen] = useState(false);
   const [actionOpen, setActionOpen] = useState(false);
   const location = useLocation();

diff --git a/src/sections/Projects/Sistent/components/modal/guidance.js b/src/sections/Projects/Sistent/components/modal/guidance.js
@@ -4,7 +4,7 @@ import TabButton from "../../../../../reusecore/Button";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
 
-export const ModalGuidance = () => {
+const ModalGuidance = () => {
   const location = useLocation();
   return (
     <SistentLayout title="Modal">

diff --git a/src/sections/Projects/Sistent/components/modal/index.js b/src/sections/Projects/Sistent/components/modal/index.js
@@ -8,7 +8,7 @@ import ConfirmationDarkBg from "../../../../../assets/images/app/projects/sisten
 import { Col, Row } from "../../../../../reusecore/Layout";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
-export const SistentModal = () => {
+const SistentModal = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
   return (

diff --git a/src/sections/Projects/Sistent/components/paper/index.js b/src/sections/Projects/Sistent/components/paper/index.js
@@ -6,7 +6,7 @@ import { useLocation } from "@reach/router";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 import { Paper, SistentThemeProvider } from "@layer5/sistent";
 
-export const SistentPaper = () => {
+const SistentPaper = () => {
   const location = useLocation();
   const { isDark } = useStyledDarkMode();
   return (