adding route for playground

Client/src/Pages/PlayGround/PlayGround.jsx

@@ -4,6 +4,15 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
 import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField";
 import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField";
+import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
+import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
+import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
+import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
+import PlayGroundCharts from "./PlayGround-Charts";
+import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
+import PlayGroundTooltips from "./PlayGround-Tooltips";
 
 // This Component is just for the development and test
 // purposes and just to see what my components look like while development
@@ -34,20 +43,19 @@ function PlayGround() {
         icon={<HelpOutlineIcon />}
         helperText="This is a hint text to help user."
       />
-      <br />
+
       <hr />
       {/* Now, illustration of the Website text fields */}
-      <br />
+
       <WebsiteTextField hintText="This is a hint text to help user." />
       <WebsiteTextField
         hasCopyButton={true}
         hintText="This is a hint text to help user."
       />
-      <br />
-      <br />
+
       <hr />
       {/* Now, illustration of the Description text fields */}
-      <br />
+
       <DescriptionTextField
         hasError={false}
         hintText="This is a hint text to help user."
@@ -56,6 +64,61 @@ function PlayGround() {
         hasError={true}
         hintText="This is a hint text to help user."
       />
+      <AnnouncementsDualButtonWithIcon
+        icon={
+          <div className="info-icon-frame">
+            <InfoOutlinedIcon style={{ fill: "#344054" }} />
+          </div>
+        }
+        subject="We’ve just released a new feature"
+        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
+        pariatur, ipsum dolor."
+        esc="Dismiss"
+        primary="View changes"
+      />
+
+      <AnnouncementsDualButtonWithIcon
+        icon={<ComplexAlert theme="red" />}
+        subject="There was a problem with that action"
+        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
+        pariatur, ipsum dolor."
+        esc="Dismiss"
+        primary="Learn more"
+      />
+
+      <AnnouncementsDualButtonWithIcon
+        icon={<ComplexAlert theme="green" />}
+        subject="Successfully updated profile"
+        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
+        pariatur, ipsum dolor."
+        esc="Dismiss"
+        primary="Learn more"
+      />
+
+      <AnnouncementsDualButton
+        subject="We’ve just released a new feature"
+        body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
+          pariatur, ipsum dolor."
+        esc="Dismiss"
+        primary="View changes"
+      />
+
+      <AnnouncementsMessageBar message="New employee created successfully" />
+
+      <AnnouncementUpdateSubscription
+        title="We’ve just released a new update!"
+        text="Check out the all new dashboard view. Pages and now load faster."
+        cancel="Dismiss"
+        positive="Changelog"
+        header="Subscribe to updates"
+        button="Subscribe"
+      />
+      <hr />
+      <PlayGroundCharts />
+      <hr />
+      <PlayGroundPopupModals />
+      <hr />
+      <PlayGroundTooltips />
     </div>
   );
 }