Add Popper component to the sistent components page #5955

src/components/SistentNavigation/content.js

@@ -58,4 +58,19 @@ export const content = [
     link: "/projects/sistent/components/paper/code",
     text: "Paper",
   },
+  {
+    id: 18,
+    link: "/projects/sistent/components/popper",
+    text: "Popper",
+  },
+  {
+    id: 19,
+    link: "/projects/sistent/components/popper/guidance",
+    text: "Popper",
+  },
+  {
+    id: 20,
+    link: "/projects/sistent/components/popper/code",
+    text: "Popper",
+  },
 ];

src/pages/projects/sistent/components/popper/code.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { PooperCode } from "../../../../../sections/Projects/Sistent/components/popper/code";
+
+const PopperCodePage = () => {
+  return <PooperCode />;
+};
+
+export default PopperCodePage;

src/pages/projects/sistent/components/popper/guidance.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { PopperGuidance } from "../../../../../sections/Projects/Sistent/components/popper/guidance";
+
+const PopperGuidancePage = () => {
+  return <PopperGuidance />;
+};
+
+export default PopperGuidancePage;

src/pages/projects/sistent/components/popper/index.js

@@ -0,0 +1,8 @@
+import React from "react";
+import { SistentPopper } from "../../../../../sections/Projects/Sistent/components/popper";
+
+const SistentPopperPage = () => {
+  return <SistentPopper />;
+};
+
+export default SistentPopperPage;

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

@@ -37,6 +37,13 @@ const componentsData = [
       "The Paper component offers an elevated surface with shadow effects, following Material Design’s elevation system.",
     url: "/projects/sistent/components/paper",
   },
+  {
+    id: 5,
+    name: "Popper",
+    description:
+      "A popper is a tooltip that appears when a user interacts with an element.",
+    url: "/projects/sistent/components/popper",
+  },
 ];
 
 const SistentComponents = () => {