feat: Adding avatar component for sistent project

package.json

@@ -64,7 +64,7 @@
     "gatsby-plugin-image": "^3.11.0",
     "gatsby-plugin-loadable-components-ssr": "^4.3.2",
     "gatsby-plugin-manifest": "^5.11.0",
-    "gatsby-plugin-mdx": "3.20.0",
+    "gatsby-plugin-mdx": "^3.20.0",
     "gatsby-plugin-meta-redirect": "github:layer5labs/gatsby-plugin-meta-redirect",
     "gatsby-plugin-preload-fonts": "^4.11.0",
     "gatsby-plugin-robots-txt": "^1.8.0",

src/sections/Company/Contact/index.js

@@ -7,7 +7,7 @@ import Partner_Icon from "../../../assets/images/contact/partner.svg";
 import Contact_Icon from "../../../assets/images/contact/contact.svg";
 import CardOutline from "../../../components/Card-Outline";
 import ContactPageWrapper from "./contactpage.style";
-import ContactForm from "../../../components/ContactForm";
+// import ContactForm from "../../../components/ContactForm";
 import CommonForm from "../../../components/CommonForm";
 
 const ContactPage = () => {

src/sections/General/Faq/index.js

@@ -20,7 +20,7 @@ import { IoIosArrowUp } from "@react-icons/all-files/io/IoIosArrowUp";
 import data from "../../../assets/data/faq";
 
 import FaqSectionWrapper from "./faqSection.style";
-import ContactFormModal from "../../../components/Contact-Modal";
+// import ContactFormModal from "../../../components/Contact-Modal";
 
 const Faq = (props) => {
 

src/sections/Projects/Sistent/components/avatar/code-block.js

@@ -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>
+  );
+};

src/sections/Projects/Sistent/components/avatar/code.js

@@ -0,0 +1,71 @@
+import React from "react";
+import { Avatar, SistentThemeProvider } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import { CodeBlock } from "./code-block";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const codes = [
+  `  <SistentThemeProvider>
+       <Avatar src="https://via.placeholder.com/150" alt="User Avatar" size="small" />
+  </SistentThemeProvider>`,
+  `  <SistentThemeProvider>
+       <Avatar src="https://via.placeholder.com/150" alt="User Avatar" size="medium" />
+  </SistentThemeProvider>`,
+  `  <SistentThemeProvider>
+       <Avatar src="https://via.placeholder.com/150" alt="User Avatar" size="large" />
+  </SistentThemeProvider>`
+];
+
+const AvatarComponent = () => {
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Avatar">
+      <div className="content">
+        <a id="Identity">
+          <h2>Avatar</h2>
+        </a>
+        <p>
+          The Avatar component is used to represent a user profile with an image or initials.
+        </p>
+        <div className="filterBtns">
+          <TabButton title="Overview" />
+          <TabButton title="Guidance" />
+          <TabButton title="Code" />
+        </div>
+        <div className="main-content">
+          <h3>Small Avatar</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Avatar src="https://via.placeholder.com/150" alt="User Avatar" size="small" />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="small-avatar" code={codes[0]} />
+          </div>
+          <h3>Medium Avatar</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Avatar src="https://via.placeholder.com/150" alt="User Avatar" size="medium" />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="medium-avatar" code={codes[1]} />
+          </div>
+          <h3>Large Avatar</h3>
+          <div className="showcase">
+            <div className="items">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Avatar src="https://via.placeholder.com/150" alt="User Avatar" size="large" />
+              </SistentThemeProvider>
+            </div>
+            <CodeBlock name="large-avatar" code={codes[2]} />
+          </div>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default AvatarComponent;

src/sections/Projects/Sistent/components/avatar/guidance.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { SistentLayout } from "../../sistent-layout";
+
+const AvatarGuidance = () => {
+  return (
+    <SistentLayout title="Avatar Guidance">
+      <div className="content">
+        <a id="Identity">
+          <h2>Avatar Usage Guidelines</h2>
+        </a>
+        <p>
+          The Avatar component is used to represent a user with an image, initials, or an icon. It is commonly used in user profiles, chat applications, and dashboards.
+        </p>
+        <h3>Best Practices</h3>
+        <ul>
+          <li>Ensure the avatar is visually distinguishable and represents the user clearly.</li>
+          <li>Use high-quality images for a professional appearance.</li>
+          <li>Fallback to initials or a placeholder image when the user image is unavailable.</li>
+          <li>Keep the size appropriate to the UI layout (e.g., small for chat bubbles, large for profile pages).</li>
+        </ul>
+        <h3>Accessibility Considerations</h3>
+        <ul>
+          <li>Provide an <code>alt</code> attribute describing the avatar for screen readers.</li>
+          <li>Ensure sufficient contrast between the avatar and background.</li>
+          <li>Use tooltips or labels to provide additional context when necessary.</li>
+        </ul>
+        <h3>Examples of Usage</h3>
+        <p>
+          Avatars can be used in multiple scenarios, including:
+        </p>
+        <ul>
+          <li>Displaying user profiles in a navigation bar.</li>
+          <li>Representing senders in a messaging interface.</li>
+          <li>Showing participants in a collaborative workspace.</li>
+        </ul>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default AvatarGuidance;

src/sections/Projects/Sistent/components/avatar/index.js

@@ -0,0 +1,105 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+
+import { SistentThemeProvider, Avatar } from "@layer5/sistent";
+import TabButton from "../../../../../reusecore/Button";
+import { SistentLayout } from "../../sistent-layout";
+import { Row } from "../../../../../reusecore/Layout";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+
+const SistentAvatar = () => {
+  const location = useLocation();
+  const { isDark } = useStyledDarkMode();
+
+  return (
+    <SistentLayout title="Avatar">
+      <div className="content">
+        <a id="Identity">
+          <h2>Avatar</h2>
+        </a>
+        <p>
+          Avatars are used to represent users and entities. They can display
+          images, icons, or initials based on the context.
+        </p>
+        <div className="filterBtns">
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/avatar"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/avatar")}
+            title="Overview"
+          />
+          <TabButton
+            className={
+              location.pathname ===
+              "/projects/sistent/components/avatar/guidance"
+                ? "active"
+                : ""
+            }
+            onClick={() =>
+              navigate("/projects/sistent/components/avatar/guidance")
+            }
+            title="Guidance"
+          />
+          <TabButton
+            className={
+              location.pathname === "/projects/sistent/components/avatar/code"
+                ? "active"
+                : ""
+            }
+            onClick={() => navigate("/projects/sistent/components/avatar/code")}
+            title="Code"
+          />
+        </div>
+        <div className="main-content">
+          <h3>Image Avatar</h3>
+          <p>
+            Image avatars display profile pictures, logos, or other user
+            images.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Avatar src="https://via.placeholder.com/150" alt="User Avatar" />
+            </SistentThemeProvider>
+          </Row>
+          <h3>Initials Avatar</h3>
+          <p>
+            When an image is unavailable, avatars can display user initials.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Avatar>JS</Avatar>
+            </SistentThemeProvider>
+          </Row>
+          <h3>Icon Avatar</h3>
+          <p>
+            Avatars can also use icons when representing users or objects.
+          </p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Avatar>
+                <span role="img" aria-label="user-icon">
+                  👤
+                </span>
+              </Avatar>
+            </SistentThemeProvider>
+          </Row>
+          <h3>Sizes</h3>
+          <p>Avatars come in different sizes to suit various use cases.</p>
+          <Row $Hcenter className="image-container">
+            <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+              <Avatar src="https://via.placeholder.com/150" alt="Small" sx={{ width: 32, height: 32 }} />
+              <Avatar src="https://via.placeholder.com/150" alt="Medium" sx={{ width: 48, height: 48 }} />
+              <Avatar src="https://via.placeholder.com/150" alt="Large" sx={{ width: 64, height: 64 }} />
+            </SistentThemeProvider>
+          </Row>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default SistentAvatar;

src/sections/Projects/Sistent/components/content.js

@@ -111,6 +111,14 @@ const componentsData = [
     url: "/projects/sistent/components/pagination",
     src: "/pagination",
   },
+  {
+    id: 15,
+    name: "Avatar",
+    description:
+        "Avatar component represents a user profile with an image or initials, commonly used in user interfaces for identification.",
+    url: "/projects/sistent/components/avatar",
+    src: "/avatar",
+  },
 ];
 
 module.exports = { componentsData };