Tristan Yang
42 lines
818 B
TypeScript
42 lines
818 B
TypeScript
import { FC } from "react";
|
|
import toast from "react-hot-toast";
|
|
import styled from "styled-components";
|
|
import Button from "./styled/Button";
|
|
|
|
const Styled = styled.span`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
strong {
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
}
|
|
.btns {
|
|
gap: 5px;
|
|
display: flex;
|
|
}
|
|
`;
|
|
|
|
interface Props {
|
|
id: string;
|
|
handleUpdate: () => void;
|
|
}
|
|
|
|
const Index: FC<Props> = ({ 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>
|
|
);
|
|
};
|
|
|
|
export default Index;
|