From e2c56be61fdcb67c7daeacb485837b1c32ab6f3c Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Sat, 15 Jun 2024 21:01:04 +0530
Subject: [PATCH] feat: breakpoint button

---
 .../atoms/buttons/BreakpointButton.tsx        | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 src/components/atoms/buttons/BreakpointButton.tsx

diff --git a/src/components/atoms/buttons/BreakpointButton.tsx b/src/components/atoms/buttons/BreakpointButton.tsx
new file mode 100644
index 00000000..d9d6d483
--- /dev/null
+++ b/src/components/atoms/buttons/BreakpointButton.tsx
@@ -0,0 +1,31 @@
+import { IconButton } from "@mui/material";
+import { Circle } from "@mui/icons-material";
+import React, { FC } from "react";
+
+interface BreakpointButtonProps {
+  handleClick: () => void;
+  size?: "small" | "medium" | "large";
+  changeColor?: boolean;
+}
+
+export const BreakpointButton =
+  ({ handleClick, size, changeColor }: BreakpointButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={size || "small"} onClick={handleClick}
+    sx={{
+      "&:hover": {
+        background: 'transparent',
+      }
+    }}
+    >
+      <Circle  sx={{
+        fontSize: '1rem',
+        marginLeft: '5px',
+        color: changeColor ? 'red': 'gray',
+        "&:hover": {
+          color: changeColor ? 'darkRed' : 'dimgray',
+        }
+      }}/>
+    </IconButton>
+  );
+};