feat: move buttons to ui directory

src/components/ui/buttons/AddButton.tsx

@@ -0,0 +1,36 @@
+import { IconButton } from "@mui/material";
+import { Add } from "@mui/icons-material";
+import React, { FC } from "react";
+
+interface AddButtonProps {
+  handleClick: () => void;
+  size?: "small" | "medium" | "large";
+  title?: string;
+  disabled?: boolean;
+  hoverEffect?: boolean;
+  style?: React.CSSProperties;
+}
+
+export const AddButton: FC<AddButtonProps> = (
+  { handleClick,
+    size,
+    title,
+    disabled = false,
+    hoverEffect = true,
+    style
+  }) => {
+  return (
+    <IconButton
+      aria-label="add"
+      size={size || "small"}
+      onClick={handleClick}
+      disabled={disabled}
+      sx={hoverEffect
+        ? { ...style, '&:hover': { background: 'rgba(0, 0, 0, 0.05)', color: 'rgba(0, 0, 0, 0.54)' } }
+        : { ...style, '&:hover': { color: '#1976d2', backgroundColor: 'white' } }
+      }
+    >
+      <Add />  {title}
+    </IconButton>
+  );
+};

src/components/ui/buttons/BreakpointButton.tsx

@@ -0,0 +1,30 @@
+import { IconButton } from "@mui/material";
+import { Circle } from "@mui/icons-material";
+
+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>
+    );
+  };

src/components/ui/buttons/ClearButton.tsx

@@ -0,0 +1,17 @@
+import { IconButton } from "@mui/material";
+import { Clear } from "@mui/icons-material";
+import React, { FC } from "react";
+
+interface ClearButtonProps {
+  handleClick: () => void;
+  size?: "small" | "medium" | "large";
+}
+
+export const ClearButton: FC<ClearButtonProps> = ({ handleClick, size }) => {
+  return (
+    <IconButton aria-label="add" size={size || "small"} onClick={handleClick}
+      sx={{ color: 'inherit', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
+      <Clear />
+    </IconButton>
+  );
+};

src/components/ui/buttons/EditButton.tsx

@@ -0,0 +1,17 @@
+import { IconButton } from "@mui/material";
+import { Edit } from "@mui/icons-material";
+import React, { FC } from "react";
+
+interface EditButtonProps {
+  handleClick: () => void;
+  size?: "small" | "medium" | "large";
+}
+
+export const EditButton: FC<EditButtonProps> = ({ handleClick, size }) => {
+  return (
+    <IconButton aria-label="add" size={size || "small"} onClick={handleClick}
+      sx={{ color: 'inherit', '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
+      <Edit />
+    </IconButton>
+  );
+};

src/components/ui/buttons/RemoveButton.tsx

@@ -0,0 +1,17 @@
+import { IconButton } from "@mui/material";
+import { Remove } from "@mui/icons-material";
+import React, { FC } from "react";
+
+interface RemoveButtonProps {
+  handleClick: () => void;
+  size?: "small" | "medium" | "large";
+}
+
+export const RemoveButton: FC<RemoveButtonProps> = ({ handleClick, size }) => {
+  return (
+    <IconButton aria-label="add" size={size || "small"} onClick={handleClick}
+      sx={{ '&:hover': { color: '#1976d2', backgroundColor: 'transparent' } }}>
+      <Remove />
+    </IconButton>
+  );
+};

src/components/ui/buttons/buttons.tsx

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { useThemeMode } from '../../../context/theme-provider';
+
+export const NavBarButton = styled.button<{ disabled: boolean, mode: 'light' | 'dark' }>`
+    margin-left: 10px;
+    margin-right: 5px;
+    padding: 0;
+    border: none;
+    background-color: ${mode => mode ? '#333' : '#ffffff'};
+    cursor: ${({ disabled }) => disabled ? 'default' : 'pointer'};
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    outline: none;
+    color: ${mode => mode ? '#ffffff' : '#333333'};
+`;
+
+export const UrlFormButton = styled.button`
+    position: absolute;
+    top: 0;
+    right: 10px;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    cursor: pointer;
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+    outline: none;
+    // color: #333;
+    
+    // &:hover {
+    //   background-color: #ddd;
+    // },
+    
+    // &:active {
+    //   background-color: #d0d0d0;
+    // },
+`;