feat: new version tip

src/common/component/NewVersion.js

@@ -0,0 +1,33 @@
+// import React from 'react'
+import toast from "react-hot-toast";
+import styled from "styled-components";
+const Styled = styled.span`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  strong {
+    white-space: nowrap;
+    font-weight: bold;
+    /* padding-right: 5px; */
+  }
+  .btns {
+    gap: 5px;
+    display: flex;
+  }
+`;
+import Button from "./styled/Button";
+export default function NewVersion({ id, handleUpdate }) {
+  return (
+    <Styled>
+      <strong>New Version</strong> Available
+      <div className="btns">
+        <Button className="mini main" onClick={handleUpdate}>
+          Update
+        </Button>
+        <Button className="mini cancel" onClick={() => toast.dismiss(id)}>
+          Dismiss
+        </Button>
+      </div>
+    </Styled>
+  );
+}

src/common/component/styled/Button.js

@@ -29,6 +29,11 @@ const StyledButton = styled.button`
     font-size: 14px;
     line-height: 20px;
   }
+  &.mini {
+    padding: 4px 10px;
+    font-size: 12px;
+    line-height: 18px;
+  }
   &.danger {
     border: none;
     background-color: #ef4444;