feat: Adding avatar component for sistent project

package.json

@@ -35,7 +35,7 @@
     "@fullcalendar/interaction": "^6.0.1",
     "@fullcalendar/react": "^6.1.8",
     "@layer5/meshery-design-embed": "^0.4.0",
-    "@layer5/sistent": "^0.14.147",
+    "@layer5/sistent": "^0.14.150",
     "@loadable/component": "^5.16.4",
     "@mdx-js/mdx": "1.6.22",
     "@mdx-js/react": "1.6.22",
@@ -133,4 +133,4 @@
     "rimraf": "^5.0.1",
     "webpack-cli": "^5.0.2"
   }
-}
+}

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.js

@@ -0,0 +1,124 @@
+import React, { useState } from "react";
+import { Avatar, SistentThemeProvider } from "@layer5/sistent";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
+import { CodeBlock } from "../button/code-block";
+
+const AvatarComponent = () => {
+  const { isDark } = useStyledDarkMode();
+  const [activeTab, setActiveTab] = useState("Overview");
+
+  const avatarExamples = [
+    {
+      title: "Image Avatar",
+      description: "Display user profile images",
+      code: `<Avatar 
+  src="/path/to/user-image.jpg" 
+  alt="User Name"
+/>`
+    },
+    {
+      title: "Initials Avatar",
+      description: "Use initials when image is unavailable",
+      code: `<Avatar>
+  JD
+</Avatar>`
+    },
+    {
+      title: "Icon Avatar",
+      description: "Use icons for generic representation",
+      code: `<Avatar>
+  <UserIcon />
+</Avatar>`
+    },
+    {
+      title: "Sized Avatars",
+      description: "Adjust avatar sizes for different contexts",
+      code: `<Avatar size="small" />
+<Avatar size="medium" />
+<Avatar size="large" />`
+    },
+    {
+      title: "Custom Styling",
+      description: "Apply custom styles and themes",
+      code: `<Avatar 
+  src="/image.jpg"
+  sx={{
+    border: '2px solid primary.main',
+    boxShadow: 2
+  }}
+/>`
+    }
+  ];
+
+  return (
+    <SistentLayout title="Avatar">
+      <div className="content">
+        <a id="Identity">
+          <h2>Avatar Component</h2>
+        </a>
+        <div className="filterBtns">
+          {"Overview Guidance Code".split(" ").map((tab) => (
+            <TabButton
+              key={tab}
+              title={tab}
+              className={activeTab === tab ? "active" : ""}
+              onClick={() => setActiveTab(tab)}
+            />
+          ))}
+        </div>
+        <p>
+          The Avatar component provides a flexible visual representation of users
+          or entities across digital interfaces, supporting images, initials, and icons.
+        </p>
+        {activeTab === "Code" && (
+          <div className="code-examples">
+            <h3>Avatar Implementation Variants</h3>
+            {avatarExamples.map((example, index) => (
+              <div key={index} className="code-example">
+                <h4>{example.title}</h4>
+                <p>{example.description}</p>
+                <CodeBlock
+                  name={`avatar-example-${index}`}
+                  code={example.code}
+                />
+                <div className="live-preview">
+                  <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                    {example.title === "Image Avatar" && (
+                      <Avatar src="https://via.placeholder.com/150" alt="User Avatar" />
+                    )}
+                    {example.title === "Initials Avatar" && (
+                      <Avatar>JD</Avatar>
+                    )}
+                    {example.title === "Icon Avatar" && (
+                      <Avatar>👤</Avatar>
+                    )}
+                    {example.title === "Sized Avatars" && (
+                      <>
+                        <Avatar size="small" src="https://via.placeholder.com/50" />
+                        <Avatar size="medium" src="https://via.placeholder.com/75" sx={{ mx: 2 }} />
+                        <Avatar size="large" src="https://via.placeholder.com/100" />
+                      </>
+                    )}
+                    {example.title === "Custom Styling" && (
+                      <Avatar
+                        src="https://via.placeholder.com/150"
+                        sx={{
+                          border: "2px solid primary.main",
+                          boxShadow: 2
+                        }}
+                      />
+                    )}
+                  </SistentThemeProvider>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default AvatarComponent;

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

@@ -0,0 +1,132 @@
+import React from "react";
+import { navigate } from "gatsby";
+import { useLocation } from "@reach/router";
+import { SistentLayout } from "../../sistent-layout";
+import TabButton from "../../../../../reusecore/Button";
+
+const Guidance = () => {
+  const location = useLocation();
+
+  return (
+    <SistentLayout title="Avatar">
+      <div className="content">
+        <a id="identity">
+          <h2>Avatar Usage Guidelines</h2>
+        </a>
+        <p>
+          The Avatar component represents a user using an image, initials, or an icon.
+          It is a crucial UI element for providing visual identity across digital platforms.
+        </p>
+
+        <div className="filterBtns">
+          <TabButton
+            className={location.pathname === "/projects/sistent/components/avatar/overview" ? "active" : ""}
+            onClick={() => navigate("/projects/sistent/components/avatar/overview")}
+            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">
+          <a id="BestPractices">
+            <h3>Best Practices</h3>
+          </a>
+          <ul>
+            <li>
+              <strong>Visual Representation:</strong> Choose clear, recognizable images that authentically represent the user or entity.
+            </li>
+            <li>
+              <strong>Fallback Mechanisms:</strong> Implement robust fallback strategies:
+              <code>
+                {"<Avatar src={userImage} alt={userName} fallback={<Avatar>{userInitials}</Avatar>}/>"}
+              </code>
+            </li>
+            <li>Maintain consistent avatar sizing and style across the application.</li>
+            <li>Optimize image resolution for performance and clarity.</li>
+          </ul>
+
+          <a id="Accessibility">
+            <h3>Accessibility Considerations</h3>
+          </a>
+          <ul>
+            <li>Mandatory <code>alt</code> text for screen reader compatibility.</li>
+            <li>Ensure 4.5:1 color contrast ratio for initials and icons.</li>
+            <li>Add meaningful aria labels for context.</li>
+          </ul>
+
+          <a id="PerformanceOptimization">
+            <h3>Performance Optimization</h3>
+          </a>
+          <ul>
+            <li>Use image compression techniques.</li>
+            <li>Implement lazy loading for avatar images.</li>
+            <li>Cache avatar images to reduce network requests.</li>
+            <li>
+              Example lazy loading implementation:
+              <code>
+                {"<Avatar loading=\"lazy\" src=\"/path/to/optimized/image.jpg\"/>"}
+              </code>
+            </li>
+          </ul>
+
+          <a id="AdvancedCustomization">
+            <h3>Advanced Customization</h3>
+          </a>
+          <ul>
+            <li>Theme-aware color generation for initial avatars.</li>
+            <li>Status indicators (online/offline/away).</li>
+            <li>
+              Example status badge:
+              <code>
+                {"<Avatar src={userImage} status=\"online\" statusProps={{ color: 'green', position: 'bottom-right' }}/>"}
+              </code>
+            </li>
+          </ul>
+
+          <a id="IntegrationPatterns">
+            <h3>Common Integration Patterns</h3>
+          </a>
+          <ul>
+            <li>User profile headers</li>
+            <li>Team member lists</li>
+            <li>Comment and messaging interfaces</li>
+            <li>Collaboration platform user representations</li>
+          </ul>
+
+          <a id="CodeSnippets">
+            <h3>Code Snippet: Flexible Avatar Usage</h3>
+          </a>
+          <pre><code>
+            {`// Image Avatar
+<Avatar src="/user-profile.jpg" alt="John Doe" />
+
+// Initials Avatar
+<Avatar>JD</Avatar>
+
+// Icon Avatar
+<Avatar>
+  <UserIcon />
+</Avatar>
+
+// Sized Avatars
+<Avatar size="small" />
+<Avatar size="medium" />
+<Avatar size="large" />
+`}
+          </code></pre>
+        </div>
+      </div>
+    </SistentLayout>
+  );
+};
+
+export default Guidance;