Added some changes to code and guidance page

Signed-off-by: Ritesh Hiremath <ritesh@Riteshs-MacBook-Air.local>
layer5io · Oct 28, 2024 · 9ef8c58 · 9ef8c58
1 parent 3d33509
commit 9ef8c58
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 4 deletions.
diff --git a/src/sections/Projects/Sistent/components/circularprogress/code.js b/src/sections/Projects/Sistent/components/circularprogress/code.js
@@ -4,13 +4,15 @@ import { useLocation } from "@reach/router";
 import {
   SistentThemeProvider,
   CircularProgress,
+  Box,
 } from "@layer5/sistent";
 import { Row } from "../../../../../reusecore/Layout";
 import { SistentLayout } from "../../sistent-layout";
 import { CodeBlock } from "../button/code-block";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
-
+import WarningIcon from "@mui/icons-material/Warning";
+import ReportIcon from "@mui/icons-material/Report";
 const codes = [
   `<SistentThemeProvider>
       <CircularProgress />
@@ -44,6 +46,18 @@ const codes = [
       <CircularProgress color="success" />
       <CircularProgress color="inherit" />
   </SistentThemeProvider>`,
+  `
+   import ReportIcon from "@mui/icons-material/Report";
+   import WarningIcon from "@mui/icons-material/Warning";
+
+  <Box sx={{ display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap" }}>
+      <CircularProgress color="warning">
+        <WarningIcon color="warning" />
+      </CircularProgress>
+      <CircularProgress color="error" sx={{ "--CircularProgress-size": "80px" }}>
+        <ReportIcon color="error" />
+      </CircularProgress>
+  </Box>`
 
 ];
 
@@ -219,6 +233,59 @@ export const CircularprogressCode = () => {
             <div className="showcase">
               <CodeBlock name="color-variation-circular-progress" code={codes[4]} />
             </div>
+
+
+            <a id="Circular image Examples">
+              <h3>Circular Progress with Centered Icon Overlay Examples</h3>
+            </a>
+            <p>
+            By default, any children nested inside the Circular Progress will be centered, allowing icons or text to overlay seamlessly.
+            </p>
+
+
+            <br></br>
+            <Row $Hcenter className="image-container">
+              <SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
+                <Box sx={{ display: "flex", gap: 4, alignItems: "center", flexWrap: "wrap" }}>
+
+                  <Box position="relative" display="inline-flex">
+                    <CircularProgress color="warning" size={60} />
+                    <Box
+                      top={0}
+                      left={0}
+                      bottom={0}
+                      right={0}
+                      position="absolute"
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      <WarningIcon color="warning" />
+                    </Box>
+                  </Box>
+
+
+                  <Box position="relative" display="inline-flex">
+                    <CircularProgress color="error" size={60} />
+                    <Box
+                      top={0}
+                      left={0}
+                      bottom={0}
+                      right={0}
+                      position="absolute"
+                      display="flex"
+                      alignItems="center"
+                      justifyContent="center"
+                    >
+                      <ReportIcon color="error" />
+                    </Box>
+                  </Box>
+                </Box>
+              </SistentThemeProvider>
+            </Row>
+            <div className="showcase">
+              <CodeBlock name="image-circular-progress" code={codes[5]} />
+            </div>
           </SistentThemeProvider>
         </div>
       </div>

diff --git a/src/sections/Projects/Sistent/components/circularprogress/guidance.js b/src/sections/Projects/Sistent/components/circularprogress/guidance.js
@@ -7,13 +7,15 @@ import { Row } from "../../../../../reusecore/Layout";
 import TabButton from "../../../../../reusecore/Button";
 import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
 
+
 export const CircularprogressGuidance = () => {
   const { isDark } = useStyledDarkMode();
   const location = useLocation();
 
   const [size, setSize] = useState(40); // default size
   const [thickness, setThickness] = useState(4); // default thickness
-
+  const maxSize = 80;
+  const maxThickness = 10;
   return (
     <SistentLayout title="Circular Progress">
       <div className="content">
@@ -90,7 +92,11 @@ export const CircularprogressGuidance = () => {
                 label="Increase Size"
                 size="medium"
                 style={{ marginLeft: "20px" }}
-                onClick={() => setSize(size + 10)} // Increase size on click
+                onClick={() => {
+                  if (size < maxSize) {
+                    setSize(size + 10);
+                  }
+                }}
               />
             </SistentThemeProvider>
           </Row>
@@ -111,7 +117,11 @@ export const CircularprogressGuidance = () => {
                 label="Increase Thickness"
                 size="medium"
                 style={{ marginLeft: "20px" }}
-                onClick={() => setThickness(thickness + 2)}
+                onClick={() => {
+                  if (thickness < maxThickness) {
+                    setThickness(thickness + 2);
+                  }
+                }}
               />
             </SistentThemeProvider>
           </Row>