Add snapshot testing

This commit is contained in:
2023-11-21 14:48:09 +07:00
parent 04ef95754c
commit 9ff60a7770
17 changed files with 944 additions and 0 deletions
@@ -0,0 +1,207 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AppLayout testing snapshot render 1`] = `
<div
className="sc-iCoHzw jFLeHb"
>
<header
className="sc-dlniIP cClxoS"
>
<p>
Hi,
Admin
!
</p>
<ul
className="sc-gtsqUy gOWXQs"
>
<li>
<button
className="sc-bdnyFh bxHnoO"
iconStyle={
{
"size": "23px",
}
}
isHaveChildren={false}
style={
{
"backgroundColor": undefined,
"color": undefined,
"fontSize": undefined,
}
}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
/>
<path
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
/>
</svg>
<span />
</button>
</li>
<li>
<button
className="sc-bdnyFh bxHnoO"
iconStyle={
{
"size": "23px",
}
}
isHaveChildren={false}
style={
{
"backgroundColor": undefined,
"color": undefined,
"fontSize": undefined,
}
}
>
<svg
aria-hidden="true"
fill="none"
height="1em"
stroke="currentColor"
strokeWidth="2"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span />
</button>
</li>
</ul>
</header>
<aside
className="sc-jSFipO ejTmsl"
>
<h1
className="sc-gKAaef hNxcoF"
>
Hotel Management
</h1>
<nav
className="sc-hKFymg eIMPQI"
>
<a
className="sc-eCAqax hQZHUY"
href="/dashboard"
onClick={[Function]}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
/>
</svg>
<span>
Dashboard
</span>
</a>
<a
className="sc-eCAqax hQZHUY"
href="/user"
onClick={[Function]}
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
/>
</svg>
<span>
User
</span>
</a>
<a
className="sc-eCAqax hQZHUY"
href="/room"
onClick={[Function]}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 16 16"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
/>
</svg>
<span>
Room
</span>
</a>
</nav>
</aside>
<main
className="sc-fujznN cdRedX"
/>
</div>
`;
@@ -0,0 +1,44 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ButtonIcon testing snapshot render 1`] = `
<button
className="sc-bdnyFh bxHnoO"
iconStyle={
{
"size": "23px",
}
}
isHaveChildren={false}
style={
{
"backgroundColor": undefined,
"color": undefined,
"fontSize": undefined,
}
}
>
<svg
aria-hidden="true"
fill="none"
height="1em"
stroke="currentColor"
strokeWidth="2"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span />
</button>
`;
@@ -0,0 +1,28 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConfirmMessage testing snapshot render 1`] = `
<div
className="sc-bdnyFh dukbvo"
>
<p>
Hello World!
</p>
<div>
<button
className="sc-gtsqUy eZzwwl"
disabled={true}
onClick={[Function]}
variations="danger"
>
Delete
</button>
<button
className="sc-gtsqUy JDRgw"
disabled={true}
variations="secondary"
>
Cancel
</button>
</div>
</div>
`;
@@ -0,0 +1,72 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Form testing snapshot render 1`] = `
<form
className="sc-bdnyFh bzxSLR"
onSubmit={[Function]}
>
<div
className="sc-dlniIP gZHESL"
>
<label
className="sc-hKFymg ddFGOI"
>
Name
</label>
<div>
<input
className="sc-jSFipO enjwJE"
id="name"
type="text"
/>
<p
className="sc-eCAqax bvOWPP"
>
This is error message
</p>
</div>
</div>
<div
className="sc-dlniIP gZHESL"
>
<label
className="sc-hKFymg ddFGOI"
>
Price
</label>
<div>
<input
className="sc-jSFipO enjwJE"
id="price"
type="text"
/>
<p
className="sc-eCAqax bvOWPP"
>
This is error message
</p>
</div>
</div>
<div
className="sc-gtsqUy idhRSV"
>
<button
className="sc-gKAaef sc-jrsKJM gifCOZ KLoQf"
disabled={true}
name="submit"
type="submit"
variations="primary"
>
Confirm
</button>
<button
className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
onClick={[Function]}
type="button"
variations="secondary"
>
Close
</button>
</div>
</form>
`;
@@ -0,0 +1,101 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Header testing snapshot render 1`] = `
<header
className="sc-dlniIP cClxoS"
>
<p>
Hi,
Nezumi
!
</p>
<ul
className="sc-gtsqUy gOWXQs"
>
<li>
<button
className="sc-bdnyFh bxHnoO"
iconStyle={
{
"size": "23px",
}
}
isHaveChildren={false}
style={
{
"backgroundColor": undefined,
"color": undefined,
"fontSize": undefined,
}
}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
/>
<path
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
/>
</svg>
<span />
</button>
</li>
<li>
<button
className="sc-bdnyFh bxHnoO"
iconStyle={
{
"size": "23px",
}
}
isHaveChildren={false}
style={
{
"backgroundColor": undefined,
"color": undefined,
"fontSize": undefined,
}
}
>
<svg
aria-hidden="true"
fill="none"
height="1em"
stroke="currentColor"
strokeWidth="2"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span />
</button>
</li>
</ul>
</header>
`;
@@ -0,0 +1,92 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`HeaderMenu testing snapshot render 1`] = `
<ul
className="sc-gtsqUy gOWXQs"
>
<li>
<button
className="sc-bdnyFh bxHnoO"
iconStyle={
{
"size": "23px",
}
}
isHaveChildren={false}
style={
{
"backgroundColor": undefined,
"color": undefined,
"fontSize": undefined,
}
}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 512 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
/>
<path
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
/>
</svg>
<span />
</button>
</li>
<li>
<button
className="sc-bdnyFh bxHnoO"
iconStyle={
{
"size": "23px",
}
}
isHaveChildren={false}
style={
{
"backgroundColor": undefined,
"color": undefined,
"fontSize": undefined,
}
}
>
<svg
aria-hidden="true"
fill="none"
height="1em"
stroke="currentColor"
strokeWidth="2"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
<span />
</button>
</li>
</ul>
`;
@@ -0,0 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Menus snapshot testing render 1`] = `
<div
className="sc-bdnyFh cumhtC"
>
<button
aria-label="Menu item 123"
className="sc-dlniIP jergss"
onClick={[Function]}
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
clipRule="evenodd"
d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
fillRule="evenodd"
/>
</svg>
</button>
</div>
`;
@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Message testing snapshot render 1`] = `
<p
className="sc-bdnyFh fIKUZt"
>
This is a message!
</p>
`;
@@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Modal testing snapshot render 1`] = `
<button
className="sc-eCAqax jeAcqZ"
onClick={[Function]}
variations="primary"
>
Add room
</button>
`;
@@ -0,0 +1,94 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Nav testing snapshot render 1`] = `
<nav
className="sc-bdnyFh gGCifp"
>
<a
className="sc-gtsqUy gbSQWi"
href="/dashboard"
onClick={[Function]}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
/>
</svg>
<span>
Dashboard
</span>
</a>
<a
className="sc-gtsqUy gbSQWi"
href="/user"
onClick={[Function]}
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
/>
</svg>
<span>
User
</span>
</a>
<a
className="sc-gtsqUy gbSQWi"
href="/room"
onClick={[Function]}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 16 16"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
/>
</svg>
<span>
Room
</span>
</a>
</nav>
`;
@@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Order.test /> render 1`] = `
<div
className="sc-bdnyFh aZFGz"
>
<button
active={true}
className="sc-gtsqUy fohQqJ"
disabled={true}
onClick={[Function]}
>
Option 1
</button>
<button
active={false}
className="sc-gtsqUy bwnpRq"
disabled={false}
onClick={[Function]}
>
Option 2
</button>
</div>
`;
@@ -0,0 +1,9 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Search testing snapshot render 1`] = `
<input
className="sc-bdnyFh eAgOPb"
onChange={[Function]}
placeholder="Search placeholder..."
/>
`;
@@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Select testing snapshot render 1`] = `
<select
aria-label="Sort"
className="sc-bdnyFh dqXTRP"
onChange={[Function]}
value="Temp value"
>
<option
value="Value 1"
>
Option 1
</option>
<option
value="Value 2"
>
Option 2
</option>
</select>
`;
@@ -0,0 +1,103 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Sidebar testing snapshot render 1`] = `
<aside
className="sc-dlniIP dfcuiS"
>
<h1
className="sc-hKFymg iQEJzQ"
>
Hotel Management
</h1>
<nav
className="sc-bdnyFh gGCifp"
>
<a
className="sc-gtsqUy gbSQWi"
href="/dashboard"
onClick={[Function]}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M0 0h24v24H0z"
fill="none"
/>
<path
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
/>
</svg>
<span>
Dashboard
</span>
</a>
<a
className="sc-gtsqUy gbSQWi"
href="/user"
onClick={[Function]}
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
/>
</svg>
<span>
User
</span>
</a>
<a
className="sc-gtsqUy gbSQWi"
href="/room"
onClick={[Function]}
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
{
"color": undefined,
}
}
viewBox="0 0 16 16"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
/>
</svg>
<span>
Room
</span>
</a>
</nav>
</aside>
`;
@@ -0,0 +1,21 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<SortBy.test /> render 1`] = `
<select
aria-label="Sort"
className="sc-bdnyFh dqXTRP"
onChange={[Function]}
value=""
>
<option
value="Value 1"
>
Option 1
</option>
<option
value="Value 2"
>
Option 2
</option>
</select>
`;
@@ -0,0 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table testing snapshot render 1`] = `
<div
className="sc-bdnyFh eEibLN"
>
<div
className="sc-gtsqUy sc-eCAqax eucOOU hcIWQg"
columns="10% 35% 30% 15% 10%"
>
<div>
Column 1
</div>
<div>
Column 2
</div>
</div>
<div
className="sc-dlniIP EYkDq"
>
<div
className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
columns="10% 35% 30% 15% 10%"
>
<div>
1
</div>
<div>
Nezumi
</div>
<div>
123
</div>
<div />
</div>
<div
className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
columns="10% 35% 30% 15% 10%"
>
<div>
2
</div>
<div>
Loi Phan
</div>
<div>
453
</div>
<div />
</div>
</div>
</div>
`;
@@ -0,0 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Toast testing snapshot render 1`] = `
<div
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
{
"bottom": 16,
"left": 16,
"margin": "8px",
"pointerEvents": "none",
"position": "fixed",
"right": 16,
"top": 16,
"zIndex": 2000,
}
}
/>
`;