Emulation/mario_kart_8_website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/mario_kart_8_website.git synced 2024-05-18 12:50:58 -04:00
Code Issues Packages Projects Releases Wiki Activity

Add temporary toast to explain error codes that may be encountered during MK8

Browse source
This commit is contained in:
Rambo6Glaz 2024-04-23 11:32:18 +02:00
parent 968e813e39
commit ba3acd8c20
1 changed files with 31 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
components/StaticToast.tsx
View file

@ -1,23 +1,36 @@
import Toast from 'react-bootstrap/Toast';
import ToastContainer from 'react-bootstrap/ToastContainer';
import { useState } from "react";
import Toast from "react-bootstrap/Toast";
import ToastContainer from "react-bootstrap/ToastContainer";
export interface StaticPopoverProps {
title: string | JSX.Element;
body: string | JSX.Element;
align_center?: boolean;
title: string | JSX.Element;
body: string | JSX.Element;
align_center?: boolean;
}
export const StaticToast: React.FC<StaticPopoverProps> = ({ title, body, align_center }) => {
return (
<ToastContainer className={"p-3" + (align_center ? " text-center" : "")} position="bottom-end" style={{ zIndex: 1, position: 'fixed' }}>
<Toast>
<Toast.Header closeButton={false}>
{title}
</Toast.Header>
<Toast.Body>
{body}
</Toast.Body>
</Toast>
</ToastContainer>
)
}
const [showSecondToast, setShowSecondToast] = useState(true);
return (
<>
<ToastContainer className={"p-3" + (align_center ? " text-center" : "")} position="bottom-end" style={{ zIndex: 1, position: "fixed" }}>
<Toast show={showSecondToast} onClose={() => setShowSecondToast(false)} style={{ zIndex: "initial" }}>
<Toast.Header>
<strong>🟠 Temporary reminder</strong>
</Toast.Header>
<Toast.Body>
<p>
These errors <strong>are not linked to MK8:</strong>
</p>
<li>101-xxxx are linked to the Friend server</li>
<li>118-xxxx are linked to P2P (PIA)</li>
</Toast.Body>
</Toast>
<Toast>
<Toast.Header closeButton={false}>{title}</Toast.Header>
<Toast.Body>{body}</Toast.Body>
</Toast>
</ToastContainer>
</>
);
};