@campxdev/react-blueprint 0.1.0

package/src/assets/images/icons.tsx

@@ -0,0 +1,193 @@
+import { useTheme } from "@mui/material";
+
+export const AppsIcon = () => {
+  return (
+    <svg
+      id="apps"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <path
+        id="Path_15109"
+        data-name="Path 15109"
+        d="M7,0H4A4,4,0,0,0,0,4V7a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V4A4,4,0,0,0,7,0ZM9,7A2,2,0,0,1,7,9H4A2,2,0,0,1,2,7V4A2,2,0,0,1,4,2H7A2,2,0,0,1,9,4Z"
+        fill="#d4483e"
+      />
+      <path
+        id="Path_15110"
+        data-name="Path 15110"
+        d="M20,0H17a4,4,0,0,0-4,4V7a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V4A4,4,0,0,0,20,0Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V4a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#f8d759"
+      />
+      <path
+        id="Path_15111"
+        data-name="Path 15111"
+        d="M7,13H4a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4H7a4,4,0,0,0,4-4V17A4,4,0,0,0,7,13Zm2,7a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2H7a2,2,0,0,1,2,2Z"
+        fill="#88b053"
+      />
+      <path
+        id="Path_15112"
+        data-name="Path 15112"
+        d="M20,13H17a4,4,0,0,0-4,4v3a4,4,0,0,0,4,4h3a4,4,0,0,0,4-4V17A4,4,0,0,0,20,13Zm2,7a2,2,0,0,1-2,2H17a2,2,0,0,1-2-2V17a2,2,0,0,1,2-2h3a2,2,0,0,1,2,2Z"
+        fill="#4baabe"
+      />
+    </svg>
+  );
+};
+
+export const HelpIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      id="message-question"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+    >
+      <g id="message-question-2" data-name="message-question">
+        <path
+          id="Vector"
+          d="M12.5,16.667H4.1A3.877,3.877,0,0,1,0,12.593V4.074A3.893,3.893,0,0,1,4.167,0H12.5a3.893,3.893,0,0,1,4.167,4.074v8.52A3.893,3.893,0,0,1,12.5,16.667Z"
+          transform="translate(1.667 2.025)"
+          fill="none"
+          stroke={color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          id="Vector-2"
+          data-name="Vector"
+          d="M2.245,6.086V5.8A2.119,2.119,0,0,1,3.382,4,2.073,2.073,0,0,0,4.491,2.245,2.245,2.245,0,0,0,0,2.245"
+          transform="translate(7.755 5.594)"
+          fill="none"
+          stroke={color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+        <path
+          id="Vector-3"
+          data-name="Vector"
+          d="M0,0H20V20H0Z"
+          fill="none"
+          opacity="0"
+        />
+        <path
+          id="Vector-4"
+          data-name="Vector"
+          d="M.5.5H.508"
+          transform="translate(9.499 14.414)"
+          fill="none"
+          stroke={color}
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="1.5"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const NotificationIcon = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="18.125"
+        height="20"
+        viewBox="0 0 18.125 20"
+      >
+        <path
+          id="bell_10_"
+          data-name="bell (10)"
+          d="M18.958,11.384l-1.583-5.7a7.767,7.767,0,0,0-15.064.395L1.085,11.595a4.166,4.166,0,0,0,4.067,5.07H6.08a4.166,4.166,0,0,0,8.166,0h.7a4.166,4.166,0,0,0,4.015-5.281Zm-8.795,6.948a2.5,2.5,0,0,1-2.346-1.666H12.51A2.5,2.5,0,0,1,10.163,18.332Zm6.771-4.32A2.481,2.481,0,0,1,14.944,15H5.152a2.5,2.5,0,0,1-2.44-3.042L3.937,6.444a6.1,6.1,0,0,1,11.832-.31l1.583,5.7a2.481,2.481,0,0,1-.418,2.181Z"
+          transform="translate(-0.986 -0.002)"
+          fill="#121212"
+        />
+      </svg>
+    </>
+  );
+};
+
+export const ExamResultIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="14.3"
+        height="20.3"
+        viewBox="0 0 15.3 20.3"
+      >
+        <path
+          id="mobile"
+          d="M13.833,0H7.167A4.172,4.172,0,0,0,3,4.167V15.833A4.172,4.172,0,0,0,7.167,20h6.667A4.172,4.172,0,0,0,18,15.833V4.167A4.172,4.172,0,0,0,13.833,0Zm2.5,15.833a2.5,2.5,0,0,1-2.5,2.5h-2.5V17.5a.833.833,0,1,0-1.667,0v.833h-2.5a2.5,2.5,0,0,1-2.5-2.5V4.167a2.5,2.5,0,0,1,2.5-2.5h6.667a2.5,2.5,0,0,1,2.5,2.5Zm-2.5-2.5a.833.833,0,0,1-.833.833H8A.833.833,0,1,1,8,12.5h5A.833.833,0,0,1,13.833,13.333Zm-5-2.5A.833.833,0,0,0,9.667,10V9.167h1.667V10A.833.833,0,0,0,13,10V6.667a2.5,2.5,0,1,0-5,0V10A.833.833,0,0,0,8.833,10.833Zm1.667-5a.833.833,0,0,1,.833.833V7.5H9.667V6.667A.833.833,0,0,1,10.5,5.833Z"
+          transform="translate(-2.85 0.15)"
+          stroke-width="0.3"
+          fill={color}
+        />
+      </svg>
+    </>
+  );
+};
+
+export const CareerIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18.3"
+      height="20.3"
+      viewBox="0 0 20.3 20.3"
+    >
+      <path
+        id="briefcase"
+        d="M15.833,3.333h-.917A4.174,4.174,0,0,0,10.833,0H9.167A4.174,4.174,0,0,0,5.083,3.333H4.167A4.172,4.172,0,0,0,0,7.5v8.333A4.172,4.172,0,0,0,4.167,20H15.833A4.172,4.172,0,0,0,20,15.833V7.5a4.172,4.172,0,0,0-4.167-4.167ZM9.167,1.667h1.667A2.5,2.5,0,0,1,13.18,3.333H6.82A2.5,2.5,0,0,1,9.167,1.667ZM4.167,5H15.833a2.5,2.5,0,0,1,2.5,2.5V10H1.667V7.5A2.5,2.5,0,0,1,4.167,5ZM15.833,18.333H4.167a2.5,2.5,0,0,1-2.5-2.5V11.667h7.5V12.5a.833.833,0,0,0,1.667,0v-.833h7.5v4.167A2.5,2.5,0,0,1,15.833,18.333Z"
+        transform="translate(0.15 0.15)"
+        fill={color}
+        stroke-width="0.3"
+      />
+    </svg>
+  );
+};
+
+export const ClogWheelIcon = () => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16.595"
+      height="20"
+      viewBox="0 0 17.995 20"
+    >
+      <g
+        id="settings_11_"
+        data-name="settings (11)"
+        transform="translate(-1.203)"
+      >
+        <path
+          id="Path_1375"
+          data-name="Path 1375"
+          d="M11.333,8a3.333,3.333,0,1,0,3.333,3.333A3.333,3.333,0,0,0,11.333,8Zm0,5A1.667,1.667,0,1,1,13,11.333,1.667,1.667,0,0,1,11.333,13Z"
+          transform="translate(-1.133 -1.333)"
+          fill={color}
+        />
+        <path
+          id="Path_1376"
+          data-name="Path 1376"
+          d="M17.945,11.583l-.37-.213a7.583,7.583,0,0,0,0-2.742l.37-.213a2.5,2.5,0,1,0-2.5-4.333l-.371.214A7.481,7.481,0,0,0,12.7,2.927V2.5a2.5,2.5,0,1,0-5,0v.427A7.481,7.481,0,0,0,5.327,4.3l-.373-.216a2.5,2.5,0,1,0-2.5,4.333l.37.213a7.583,7.583,0,0,0,0,2.742l-.37.213a2.5,2.5,0,0,0,2.5,4.333l.371-.214A7.481,7.481,0,0,0,7.7,17.072V17.5a2.5,2.5,0,1,0,5,0v-.428A7.481,7.481,0,0,0,15.074,15.7l.373.215a2.5,2.5,0,1,0,2.5-4.333ZM15.822,8.437a5.873,5.873,0,0,1,0,3.125.833.833,0,0,0,.387.944l.9.522a.834.834,0,1,1-.833,1.444l-.9-.523a.833.833,0,0,0-1.012.138,5.82,5.82,0,0,1-2.7,1.563.833.833,0,0,0-.626.807V17.5a.833.833,0,0,1-1.667,0V16.457a.833.833,0,0,0-.626-.807,5.82,5.82,0,0,1-2.7-1.566.833.833,0,0,0-1.013-.138l-.9.523a.833.833,0,1,1-.833-1.443l.9-.522a.833.833,0,0,0,.387-.944,5.873,5.873,0,0,1,0-3.125.833.833,0,0,0-.388-.941l-.9-.522a.834.834,0,0,1,.833-1.444l.9.523a.833.833,0,0,0,1.012-.134,5.82,5.82,0,0,1,2.7-1.562.833.833,0,0,0,.626-.811V2.5a.833.833,0,1,1,1.667,0V3.543a.833.833,0,0,0,.626.808,5.82,5.82,0,0,1,2.7,1.566.833.833,0,0,0,1.012.137l.9-.522a.833.833,0,1,1,.833,1.443l-.9.522a.833.833,0,0,0-.386.941Z"
+          transform="translate(0 0)"
+          fill={color}
+        />
+      </g>
+    </svg>
+  );
+};

package/src/assets/images/index.ts

@@ -0,0 +1,25 @@
+import admin from "./admin.png";
+import campxLogoPrimary from "./campx_logo__full_primary.png";
+import collegex from "./collegex.png";
+import commutex from "./commutex.png";
+
+import enrollx from "./enrollx.png";
+
+import examx from "./examx.png";
+
+import hostelx from "./hostelx.png";
+import payx from "./payx.png";
+
+import peoplex from "./pepolex.png";
+
+export {
+  admin,
+  campxLogoPrimary,
+  collegex,
+  commutex,
+  enrollx,
+  examx,
+  hostelx,
+  payx,
+  peoplex,
+};

package/src/assets/images/svg/commutex_small.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.391" height="35" viewBox="0 0 25.391 35">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#6a2886"/>
+      <stop offset="1" stop-color="#8234a4"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4867" data-name="Group 4867" transform="translate(-152.7 -249.981)">
+    <path id="Union_49" data-name="Union 49" d="M16.86,35l-4.188-5.765L8.483,35H.085L0,34.938,11.873,18.6H.008V16.408H11.931L4.267,5.87l0,0L0,0,0,0H8.531l4.188,5.764L16.907,0h8.4l.086.062L13.514,16.408H25.383V18.6H13.463L21.124,29.13l0,0L25.391,35l0,0Z" transform="translate(152.7 249.981)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/assets/images/svg/enroll_logo.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="177.011" height="195.229" viewBox="0 0 177.011 195.229">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#007ab1"/>
+      <stop offset="1" stop-color="#149ecd"/>
+    </linearGradient>
+  </defs>
+  <path id="Union_61" data-name="Union 61" d="M0,195.229H.009L0,195.215l23.664-32.567.009.013L70.934,97.615h46.6l.474.344-70.671,97.27ZM87.442,156.1l42.5-58.487h46.6l.474.344L134.768,156.1Zm89.1-58.487h0Zm0,0h-46.6L87.381,39.042h47.325L177.011,97.27Zm-105.6,0L23.673,32.568l-.009.013L0,.013.009,0H47.337l70.671,97.27-.474.344ZM106.356.022h0ZM106.357.022Zm-47.346,0L59,.013,59.014,0h47.327l.016.021H59.011ZM0,0H.009Z" fill="url(#linear-gradient)"/>
+</svg>

package/src/assets/images/svg/exams_small.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="33.975" height="35" viewBox="0 0 33.975 35">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d86b00"/>
+      <stop offset="1" stop-color="#ed9035"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4349" data-name="Group 4349" transform="translate(-342.295 -263.508)">
+    <path id="Subtraction_34" data-name="Subtraction 34" d="M33.973,35H25.488l0,0L0,35l0,0,4.242-5.838,0,0L12.717,17.5,4.244,5.839l0,0L0,0,0,0H33.973l0,0L29.732,5.841l0,0L21.257,17.5,29.73,29.161l0,0L33.975,35l0,0ZM16.987,23.3,13.43,28.2l7.11,0L16.987,23.3ZM13.43,6.8l3.557,4.9L20.539,6.8l-7.109,0Z" transform="translate(342.295 263.508)" fill="url(#linear-gradient)"/>
+    <rect id="Rectangle_4307" data-name="Rectangle 4307" width="0.404" height="14.649" transform="translate(359.08 273.686)" fill="#16161d"/>
+  </g>
+</svg>

package/src/assets/images/svg/help-icon.svg

@@ -0,0 +1,8 @@
+<svg id="message-question" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+  <g id="message-question-2" data-name="message-question">
+    <path id="Vector" d="M12.5,16.667H4.1A3.877,3.877,0,0,1,0,12.593V4.074A3.893,3.893,0,0,1,4.167,0H12.5a3.893,3.893,0,0,1,4.167,4.074v8.52A3.893,3.893,0,0,1,12.5,16.667Z" transform="translate(1.667 2.025)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-2" data-name="Vector" d="M2.245,6.086V5.8A2.119,2.119,0,0,1,3.382,4,2.073,2.073,0,0,0,4.491,2.245,2.245,2.245,0,0,0,0,2.245" transform="translate(7.755 5.594)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <path id="Vector-3" data-name="Vector" d="M0,0H20V20H0Z" fill="none" opacity="0"/>
+    <path id="Vector-4" data-name="Vector" d="M.5.5H.508" transform="translate(9.499 14.414)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>

package/src/assets/images/svg/hostel_small.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="50.761" height="35" viewBox="0 0 50.761 35">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#573dab"/>
+      <stop offset="1" stop-color="#7251dd"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4351" data-name="Group 4351" transform="translate(-270.758 -251.98)">
+    <path id="Subtraction_9" data-name="Subtraction 9" d="M8.724,17.99H0l0,0,4.361-6,0,0L12.981.127,17.251,6l0,0,.09.124L8.724,17.99ZM21.7.124h0L21.614,0h.047l.088.063L21.7.124Z" transform="translate(283.16 268.99)" fill="url(#linear-gradient)"/>
+    <path id="Union_40" data-name="Union 40" d="M8.724,35H0l0,0,4.362-6v0l8.618-11.861.02.028,3.762-5.179,0,0L25.383.127l.043.058.026-.036L38.368,17.927l-.008.006L46.4,29l0,0,4.361,6,0,0H42.037L33.418,23.136l0,0-4.363-6v0h0l-.044-.061,0,0-.858-1.18.011,0-2.759-3.8L21.126,17.99h-.041l-3.908,5.374L8.724,35h0Zm8-34.847L16.619,0l0,0h.218l-.111.152h0ZM34.107.124,34.016,0h.047l.087.064-.044.061Z" transform="translate(270.758 251.98)" fill="url(#linear-gradient)"/>
+    <path id="Subtraction_10" data-name="Subtraction 10" d="M21.661,17.99H13.073L4.472,6.152l4.361-6L21.749,17.927l-.087.063ZM.109.152h0L0,0,0,0H.219L.109.152Z" transform="translate(287.377 268.989)" fill="url(#linear-gradient)"/>
+  </g>
+</svg>

package/src/assets/images/svg/index.ts

@@ -0,0 +1,19 @@
+import commuteSmall from "./commutex_small.svg";
+import enrollSmall from "./enroll_logo.svg";
+import examsSmall from "./exams_small.svg";
+import helpIcon from "./help-icon.svg";
+import hostelSmall from "./hostel_small.svg";
+import payxSmall from "./payx_small.svg";
+import peopleSmall from "./people_small.svg";
+import squareSmall from "./square_small.svg";
+
+export {
+  commuteSmall,
+  enrollSmall,
+  examsSmall,
+  helpIcon,
+  hostelSmall,
+  payxSmall,
+  peopleSmall,
+  squareSmall,
+};

package/src/assets/images/svg/payx_small.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.634" height="35" viewBox="0 0 24.634 35">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.222" y1="1" x2="0.787" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#88b053"/>
+      <stop offset="1" stop-color="#50840b"/>
+    </linearGradient>
+  </defs>
+  <g id="Group_4350" data-name="Group 4350" transform="translate(-1597.6 -781.549)">
+    <g id="Group_4461" data-name="Group 4461" transform="translate(1597.6 781.55)">
+      <g id="Group_4460" data-name="Group 4460" transform="translate(0 0)">
+        <path id="Subtraction_8" data-name="Subtraction 8" d="M8.75,17.991,21.775.063,21.688,0H13.1L4.389,11.988l0,0-4.361,6,0,0H8.75Z" transform="translate(2.859 17.009)" fill="url(#linear-gradient)"/>
+        <path id="Subtraction_8-2" data-name="Subtraction 8" d="M13.051,0,.026,17.927l.087.063H8.7L17.412,6l0,0,4.361-6,0,0H13.051Z" transform="translate(-0.026 0)" fill="url(#linear-gradient)"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/assets/images/svg/people_small.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="46.624" height="35.002" viewBox="0 0 46.624 35.002">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#d0002b"/>
+      <stop offset="1" stop-color="#ea4a6b"/>
+    </linearGradient>
+  </defs>
+  <path id="Union_1" data-name="Union 1" d="M-1718.525-7459l-5.5-7.575-1.032,1.42,4.429,6.071-.113.083h-20l0,0,4.479-6.165-1.023-1.408-5.5,7.574H-1754l0,0,5.6-7.715,0,0,11.076-15.242.085.116,6.578,9.018,6.616-9.017.065-.089,16.6,22.845-.111.083Zm-10.1-30.589a4.412,4.412,0,0,1,4.41-4.412,4.413,4.413,0,0,1,4.412,4.412,4.413,4.413,0,0,1-4.412,4.413A4.413,4.413,0,0,1-1728.62-7489.589Zm-13.114,0a4.412,4.412,0,0,1,4.412-4.412,4.412,4.412,0,0,1,4.41,4.412,4.412,4.412,0,0,1-4.41,4.413A4.413,4.413,0,0,1-1741.735-7489.589Z" transform="translate(1753.999 7494.002)" fill="url(#linear-gradient)"/>
+</svg>

package/src/assets/images/svg/squareSmall.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#596e79"/>
+      <stop offset="1" stop-color="#7c909b"/>
+    </linearGradient>
+  </defs>
+  <path id="Subtraction_7" data-name="Subtraction 7" d="M-5678.321,8264.99h-13.18v-13.234h6.563v6.672h6.617v6.563Zm21.82,0h-13.18v-6.562h6.617v-6.672h6.563v13.234Zm0-21.875h-6.562v-6.562h-6.617v-6.562h13.18v13.125Zm-28.437,0h-6.562V8229.99h13.18v6.563h-6.617v6.563Z" transform="translate(5691.501 -8229.99)" fill="url(#linear-gradient)"/>
+</svg>

package/src/assets/images/svg/square_small.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="35" viewBox="0 0 35 35">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#596e79"/>
+      <stop offset="1" stop-color="#7c909b"/>
+    </linearGradient>
+  </defs>
+  <path id="Subtraction_7" data-name="Subtraction 7" d="M-5678.321,8264.99h-13.18v-13.234h6.563v6.672h6.617v6.563Zm21.82,0h-13.18v-6.562h6.617v-6.672h6.563v13.234Zm0-21.875h-6.562v-6.562h-6.617v-6.562h13.18v13.125Zm-28.437,0h-6.562V8229.99h13.18v6.563h-6.617v6.563Z" transform="translate(5691.501 -8229.99)" fill="url(#linear-gradient)"/>
+</svg>

package/src/components/DropDownMenu/DropDownButton.tsx

@@ -0,0 +1,30 @@
+import { KeyboardArrowDown } from "@mui/icons-material";
+import { ButtonProps, CircularProgress } from "@mui/material";
+import { StyledDropDownButton } from "./styles";
+
+export default function DropDownButton({
+  button,
+  handleClick,
+  loading,
+}: {
+  loading?: boolean;
+  button?: {
+    label?: string;
+    buttonProps?: ButtonProps;
+  };
+  handleClick: any;
+}) {
+  return (
+    <StyledDropDownButton
+      onClick={handleClick}
+      variant="outlined"
+      disabled={loading}
+      endIcon={
+        loading ? <CircularProgress size="20px" /> : <KeyboardArrowDown />
+      }
+      {...button?.buttonProps}
+    >
+      {button?.label}
+    </StyledDropDownButton>
+  );
+}

package/src/components/DropDownMenu/DropDownIcon.tsx

@@ -0,0 +1,31 @@
+import { MoreVert } from "@mui/icons-material";
+import { IconButtonProps } from "@mui/material";
+import { ReactNode } from "react";
+import { StyledIconButton } from "./styles";
+
+const defaultIcon = {
+  icon: <MoreVert color="primary" />,
+  outlined: true,
+};
+
+export default function DropDownIcon({
+  icon = defaultIcon,
+  handleClick,
+}: {
+  icon?: {
+    icon?: ReactNode;
+    iconProps?: IconButtonProps;
+    outlined?: boolean;
+  };
+  handleClick: any;
+}) {
+  return (
+    <StyledIconButton
+      outlined={icon?.outlined ?? false}
+      onClick={handleClick}
+      {...icon.iconProps}
+    >
+      {icon.icon}
+    </StyledIconButton>
+  );
+}

package/src/components/DropDownMenu/DropDownMenu.stories.tsx

@@ -0,0 +1,139 @@
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { IconButton } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { HelpIcon } from "../../assets/images/icons";
+import DropDownButton from "./DropDownButton";
+import DropDownIcon from "./DropDownIcon";
+import DropDownMenu, { DropDownMenuProps } from "./DropDownMenu";
+import MenuItemButton from "./MenuItemButton";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof DropDownMenu> = {
+  title: "Navigation/DropDownMenu",
+  component: DropDownMenu,
+  tags: ["autodocs"],
+  argTypes: {
+    anchor: {
+      description:
+        "A function that returns a React node used as the dropdown anchor. It provides a method to open the dropdown.",
+      control: "object",
+    },
+    menuProps: {
+      description: 'Props to pass to the Menu component, except for "open".',
+      control: "object",
+    },
+    menuListProps: {
+      description: "Props to pass to the MenuList component.",
+      control: "object",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof DropDownMenu>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <DropDownButton
+        button={{
+          label: "Options",
+          buttonProps: { variant: "contained", color: "primary" },
+        }}
+        handleClick={open}
+        loading={false}
+      />
+    ),
+    menu: [
+      <MenuItemButton
+        icon={<HelpIcon />}
+        label={"Register"}
+        onClick={() => {
+          console.log("hi");
+        }}
+      />,
+
+      <MenuItemButton
+        label={"Active Devices"}
+        onClick={() => {
+          console.log("hi");
+        }}
+      />,
+    ],
+  },
+};
+
+// Story with Button Loading
+export const WithButtonLoading: Story = {
+  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <DropDownButton
+        button={{
+          label: "Options",
+          buttonProps: { variant: "contained", color: "primary" },
+        }}
+        handleClick={open}
+        loading={true}
+      />
+    ),
+    menu: [
+      <MenuItemButton
+        icon={<HelpIcon />}
+        label={"Register"}
+        onClick={() => {
+          window.open("/payment", "_blank");
+        }}
+      />,
+
+      <MenuItemButton
+        icon={<HelpIcon />}
+        label={"Register"}
+        onClick={() => {
+          console.log("hi");
+        }}
+      />,
+    ],
+  },
+};
+
+// Story with Default Icon
+export const WithDefaultIcon: Story = {
+  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <DropDownIcon handleClick={open} />
+    ),
+    menu: [
+      <MenuItemButton
+        label={"Student Payments"}
+        onClick={() => {
+          window.open("/payment", "_blank");
+        }}
+      />,
+    ],
+  },
+};
+
+// Story with Icon
+export const WithIcon: Story = {
+  render: (args: DropDownMenuProps) => <DropDownMenu {...args} />,
+  args: {
+    anchor: ({ open }: { open: (e: any) => void }) => (
+      <DropDownIcon
+        handleClick={open}
+        icon={{
+          icon: (
+            <IconButton>
+              <MoreVertIcon />
+            </IconButton>
+          ),
+          iconProps: { color: "secondary" },
+          outlined: false,
+        }}
+      />
+    ),
+  },
+};

package/src/components/DropDownMenu/DropDownMenu.tsx

@@ -0,0 +1,65 @@
+import { Divider, Menu, MenuListProps, MenuProps } from "@mui/material";
+import { ReactNode, useState } from "react";
+
+export interface DropDownMenuProps {
+  anchor: (props: { open: (e: any) => void }) => ReactNode;
+  menu: ReactNode[];
+  menuProps?: Omit<MenuProps, "open">;
+  menuListProps?: MenuListProps;
+}
+
+const DropDownMenu = ({
+  menuProps,
+  menu = [],
+  menuListProps,
+  anchor,
+}: DropDownMenuProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {anchor({ open: handleClick })}
+
+      <Menu
+        elevation={0}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "right",
+        }}
+        open={open}
+        onClose={handleClose}
+        transitionDuration={150}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "right",
+        }}
+        MenuListProps={{
+          ...menuListProps,
+        }}
+        {...menuProps}
+      >
+        {menu.map((item, index) => (
+          <>
+            {item}
+            <Divider flexItem sx={{ margin: "0 !important" }} />
+          </>
+        ))}
+      </Menu>
+    </>
+  );
+};
+export default DropDownMenu;

package/src/components/DropDownMenu/MenuItemButton.tsx

@@ -0,0 +1,29 @@
+import { ListItemIcon, Typography } from "@mui/material";
+import { ReactNode } from "react";
+import { StyledMenuItem } from "./styles";
+
+export type MenuItemButtonProps = {
+  icon?: ReactNode;
+  label: ReactNode;
+  onClick: () => void;
+};
+
+const MenuItemButton = ({
+  icon,
+  label,
+  onClick,
+  ...props
+}: MenuItemButtonProps) => {
+  return (
+    <StyledMenuItem
+      sx={{ minWidth: "180px", width: "100%" }}
+      onClick={onClick}
+      {...props}
+    >
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <Typography variant="subtitle3">{label}</Typography>
+    </StyledMenuItem>
+  );
+};
+
+export default MenuItemButton;