New: Sistent Card Component + lint fixes

Signed-off-by: Anand-Theertha <[email protected]>

Author: Anand-Theertha

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

@@ -133,7 +133,7 @@ export const CardCode = () => {
             Meshery
           </Typography>
           <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. 
+          Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads.
           </Typography>
         </CardContent>
       </CardActions>
@@ -172,9 +172,7 @@ export const CardCode = () => {
         <a id="Identity">
           <h2>Card</h2>
         </a>
-        <p>The Card component is a UI element used to encapsulate information or actions related to a single topic,
-           typically in a visually separated, easily digestible format. It often includes elements like images, text,
-            and buttons to present content and enable quick interactions without navigating away from the card.</p>
+        <p>The Card component is a UI element used to encapsulate information or actions related to a single topic, typically in a visually separated, easily digestible format. It often includes elements like images, text, and buttons to present content and enable quick interactions without navigating away from the card.</p>
         <div className="filterBtns">
           <TabButton
             className={
@@ -212,15 +210,13 @@ export const CardCode = () => {
         </div>
         <div className="main-content">
           <p>
-          A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding,
-           navigating to another screen, or activating some other behavior.
+          A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, navigating to another screen, or activating some other behavior.
           </p>
           <a id="Outlined Card">
             <h2>Oultined Card Example</h2>
           </a>
           <p>
-          An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. 
-          Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. 
+          An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance.
           </p>
           <div className="showcase">
             <div className="items">
@@ -236,21 +232,19 @@ export const CardCode = () => {
               <h2>Main Action Cards</h2>
             </a>
             <p>
-          This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. 
-          For example, ont the website, users can tap anywhere on the card to open the full product page.
+          This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. For example, ont the website, users can tap anywhere on the card to open the full product page.
             </p>
             <div className="showcase">
               <div className="items">
-              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
-                <Card variant="outlined">{cardMainAction1}</Card>
-              </SistentThemeProvider>
+                <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                  <Card variant="outlined">{cardMainAction1}</Card>
+                </SistentThemeProvider>
               </div>
               <CodeBlock name="Container-fluid-md" code={codes[1]} />
             </div>
           </div>
           <p>
-          Cards can also include secondary actions, which should be positioned away 
-          from the primary action area to avoid unintentional interaction conflicts.
+          Cards can also include secondary actions, which should be positioned away from the primary action area to avoid unintentional interaction conflicts.
           </p>
           <div className="showcase">
             <div className="items">

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

@@ -48,7 +48,7 @@ export const CardGuidance = () => {
             Meshery
           </Typography>
           <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. 
+          Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads.
           </Typography>
         </CardContent>
       </CardActions>
@@ -140,10 +140,7 @@ export const CardGuidance = () => {
 
           <h3>Oultined Card</h3>
           <p>
-          Outlined cards are ideal for use in layouts that benefit from a subtle, modern look, such as in settings with light backgrounds where visual clarity is important.
-           They’re perfect for showcasing items like product listings, profiles, or dashboard summaries, as the minimal border keeps the focus on the content without adding
-            visual weight. 
-          </p>
+          Outlined cards are ideal for use in layouts that benefit from a subtle, modern look, such as in settings with light backgrounds where visual clarity is important. They’re perfect for showcasing items like product listings, profiles, or dashboard summaries, as the minimal border keeps the focus on the content without adding visual weight.</p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Card variant="outlined">{cardOutlined}</Card>
@@ -152,9 +149,7 @@ export const CardGuidance = () => {
 
           <h3>Main Action Cards</h3>
           <p>
-          This type of interactive card is well-suited for use in applications where quick access to more information 
-          or actions is important, such as dashboards, or product catalogs. 
-          For example, ont the website, users can tap anywhere on the card to open the full product page.
+          This type of interactive card is well-suited for use in applications where quick access to more information or actions is important, such as dashboards, or product catalogs. For example, ont the website, users can tap anywhere on the card to open the full product page.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -163,9 +158,7 @@ export const CardGuidance = () => {
           </Row>
 
           <p>
-          In usage, cards can incorporate secondary actions, like sharing, bookmarking, or viewing additional details, 
-          which are typically placed separately from the main action area. This separation prevents accidental taps or clicks,
-           allowing users to clearly distinguish between the primary function of the card (like opening a detailed view) and other supporting actions.
+          In usage, cards can incorporate secondary actions, like sharing, bookmarking, or viewing additional details, which are typically placed separately from the main action area. This separation prevents accidental taps or clicks, allowing users to clearly distinguish between the primary function of the card (like opening a detailed view) and other supporting actions.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -177,32 +170,22 @@ export const CardGuidance = () => {
             <h2>Labeling</h2>
           </a>
           <p>
-          For card components, clear labeling helps define the purpose and hierarchy of each card, 
-          making it easier for users to understand the content at a glance. 
-          Labels, like titles or category tags, can indicate the main topic or action associated with each card, 
-          improving navigation and usability within a grid of multiple cards.
+          For card components, clear labeling helps define the purpose and hierarchy of each card, making it easier for users to understand the content at a glance. Labels, like titles or category tags, can indicate the main topic or action associated with each card, improving navigation and usability within a grid of multiple cards.
           </p>
 
           <h3>Hierarchy and Visual Cues</h3>
           <p>
-          Cards benefit from a clear hierarchy, using typography, spacing, and color to guide users through the content. 
-          For instance, a card title in bold or larger text immediately draws attention, while secondary information is displayed 
-          with subdued colors.
+          Cards benefit from a clear hierarchy, using typography, spacing, and color to guide users through the content. For instance, a card title in bold or larger text immediately draws attention, while secondary information is displayed with subdued colors.
           </p>
 
           <h3>Interactivity and Feedback</h3>
           <p>
-          Cards often use hover effects, shadow adjustments, or subtle animations to indicate interactivity.
-           This feedback helps users identify clickable areas or interactive elements within the card, providing
-            a more engaging experience. 
+          Cards often use hover effects, shadow adjustments, or subtle animations to indicate interactivity. This feedback helps users identify clickable areas or interactive elements within the card, providing a more engaging experience.
           </p>
 
           <h3>Consistency in Style and Layout</h3>
           <p>
-          Cards should maintain a consistent style throughout an interface to ensure a unified look and feel. 
-          Consistency in aspects like font sizes, padding, border radii, and color schemes helps cards blend naturally 
-          into the overall UI design, improving readability and making interactions feel intuitive across 
-          different screens or sections.
+          Cards should maintain a consistent style throughout an interface to ensure a unified look and feel. Consistency in aspects like font sizes, padding, border radii, and color schemes helps cards blend naturally into the overall UI design, improving readability and making interactions feel intuitive across different screens or sections.
           </p>
 
         </div>

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { navigate } from "gatsby";
 import { useLocation } from "@reach/router";
-import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp"
-import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png"
+import MesheryLogo from "../../../../../assets/images/meshery/meshery-logo-light-text-side.webp";
+import KanvasLogo from "../../../../../assets/images/kanvas/icon-only/kanvas-icon-color.png";
 
-import { SistentThemeProvider, Card, CardActions, CardContent, CardHeader, CardMedia , Typography, Box, Button} from "@layer5/sistent";
+import { SistentThemeProvider, Card, CardActions, CardContent, CardHeader, CardMedia , Typography, Box, Button } from "@layer5/sistent";
 import TabButton from "../../../../../reusecore/Button";
 import { SistentLayout } from "../../sistent-layout";
 import { Row } from "../../../../../reusecore/Layout";
@@ -57,7 +57,7 @@ const SistentCard = () => {
             Meshery
           </Typography>
           <Typography variant="body2" sx={{ color: "text.secondary" }}>
-          Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads. 
+          Meshery is an open-source cloud-native management platform designed to help users manage, monitor, and optimize the performance of service meshes and their workloads.
           </Typography>
         </CardContent>
       </CardActions>
@@ -69,7 +69,7 @@ const SistentCard = () => {
       <CardActions>
         <CardMedia
           component="img"
-          height="90" 
+          height="90"
           image={KanvasLogo}
           alt="Kanvas"
         />
@@ -89,17 +89,14 @@ const SistentCard = () => {
       </CardActions>
     </Card>
   );
-  
-
   return (
     <SistentLayout title="Card">
       <div className="content">
         <a id="Identity">
           <h2>Card</h2>
         </a>
-        <p>The Card component is a UI element used to encapsulate information or actions related to a single topic,
-           typically in a visually separated, easily digestible format. It often includes elements like images, text,
-            and buttons to present content and enable quick interactions without navigating away from the card.
+        <p>The Card component is a UI element used to encapsulate information or actions related to a single topic, typically in a visually separated, easily digestible format. It often includes elements like images, text, and buttons to present content and enable quick interactions without navigating away from the card.
+
         </p>
         <div className="filterBtns">
           <TabButton
@@ -138,11 +135,7 @@ const SistentCard = () => {
         </div>
         <div className="main-content">
           <p>
-            The card component is a versatile UI element commonly used in web and mobile applications.
-             It's designed to showcase content in a clean, concise, and visually organized manner.
-              Typically, a card groups related information, making it easy for users to digest and interact with.
-               It often includes an image or icon, title, description, and actionable buttons or links, all contained 
-               within a defined boundary that makes it visually distinct.
+            The card component is a versatile UI element commonly used in web and mobile applications. It's designed to showcase content in a clean, concise, and visually organized manner. Typically, a card groups related information, making it easy for users to digest and interact with. It often includes an image or icon, title, description, and actionable buttons or links, all contained within a defined boundary that makes it visually distinct.
           </p>
           <a id="Types of Cards">
             <h2>Types of Cards</h2>
@@ -151,8 +144,7 @@ const SistentCard = () => {
           </p>
           <h3>Outlined</h3>
           <p>
-          An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. 
-          Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance. 
+          An outlined card is a variation of the standard card component, often used to provide a lighter, more minimalist design. Instead of a solid background or shadow, an outlined card uses a border to define its boundaries, giving it a cleaner and more refined appearance.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
@@ -161,30 +153,25 @@ const SistentCard = () => {
           </Row>
 
           <h3>Main Action</h3>
-          <p>
-          1. A card often lets users interact with its entire surface to trigger its main function, 
-          whether it’s expanding, navigating to another screen, or activating some other behavior.
-          </p>
+          <p>1. A card often lets users interact with its entire surface to trigger its main function, whether it’s expanding, navigating to another screen, or activating some other behavior.</p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Card variant="outlined">{cardMainAction1}</Card>
             </SistentThemeProvider>
           </Row>
 
           <p>
-          2. Cards can also include secondary actions, which should be positioned away 
-          from the primary action area to avoid unintentional interaction conflicts.
+          2. Cards can also include secondary actions, which should be positioned away from the primary action area to avoid unintentional interaction conflicts.
           </p>
           <Row $Hcenter className="image-container">
             <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
               <Card variant="outlined">{cardMainAction2}</Card>
             </SistentThemeProvider>
           </Row>
 
-          <p> NOTE:
-            Cards may offer multiple actions, UI elements, and an overflow menu,
-             but it’s important to exercise restraint, as they are primarily designed to serve
-              as entry points to deeper and more comprehensive content.</p>
+          <p>
+          NOTE: Cards may offer multiple actions, UI elements, and an overflow menu, but it’s important to exercise restraint, as they are primarily designed to serve as entry points to deeper and more comprehensive content.
+          </p>
         </div>
       </div>
     </SistentLayout>