components#NotSupported TypeScript Examples
The following examples show how to use
components#NotSupported.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.tsx From webapis-playground with MIT License | 6 votes |
|
function WebShare() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<Button leftIcon={<FaShareAlt />} onClick={run}>
Share
</Button>
);
}
Example #2
| Source File: index.tsx From webapis-playground with MIT License | 6 votes |
|
function Vibration() {
const [status, setStatus] = React.useState<'start' | 'stop'>('stop');
let toggle = () => setStatus(prev => (prev === 'stop' ? 'start' : 'stop'));
React.useEffect(() => {
run(status);
}, [status]);
let isVibrating = status === 'start';
if (!hasSupport()) {
return <NotSupported />;
}
return (
<Button
leftIcon={isVibrating ? <MdVibration /> : <MdStayPrimaryPortrait />}
onClick={toggle}
>
{`${isVibrating ? 'Stop' : 'Start'} vibration`}
</Button>
);
}
Example #3
| Source File: index.tsx From webapis-playground with MIT License | 6 votes |
|
function FullScreen() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-center md:tw-items-start
"
>
<div id="js-api--fullscreen" className=" tw-mb-4">
<img
src="https://res.cloudinary.com/atapas/image/upload/v1602226996/artists/Rock_oz3kq1.png"
alt="The Rock"
width="200px"
height="200px"
/>
</div>
<Button leftIcon={<FaExpand />} onClick={run}>
Go Fullscreen
</Button>
</div>
);
}
Example #4
| Source File: index.tsx From webapis-playground with MIT License | 6 votes |
|
function FullScreen() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-center
"
>
<Button id="js-picture--button" onClick={run}>
Enter Picture-in-Picture mode
</Button>
<video
id="js-picture--video"
className="tw-w-full tw-mt-4 tw-rounded-lg"
src="https://res.cloudinary.com/atapas/video/upload/v1620052733/demos/earth_rotating_g1xv0f.mp4"
muted
autoPlay
loop
/>
</div>
);
}
Example #5
| Source File: index.tsx From webapis-playground with MIT License | 5 votes |
|
function ImageCapture() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-start
"
>
<div className="tw-grid tw-grid-cols-2 tw-gap-2 md:tw-space-x-4 md:tw-flex md:tw-gap-0">
<Button leftIcon={<FaPlayCircle />} onClick={run.onGetUserMedia}>
Start the stream
</Button>
<Button leftIcon={<FaStopCircle />} onClick={run.onStop}>
Stop
</Button>
<Button leftIcon={<FaHandHolding />} onClick={run.onGrabFrame}>
Grab frame
</Button>
<Button leftIcon={<FaPhotoVideo />} onClick={run.onTakePhoto}>
Take a photo
</Button>
</div>
<div
className="
tw-flex
tw-flex-col
tw-w-full
tw-mt-6
tw-overflow-hidden
tw-border
tw-border-gray-200
tw-rounded-lg
"
>
<div
className="
tw-aspect-w-16
tw-aspect-h-9
"
>
<video id="js-resize--content" className="tw-w-full" autoPlay />
</div>
<span
id="js-image--error"
className="
tw-p-4
tw-border-t
tw-border-gray-200
tw-font-semibold
tw-text-gray-600
"
>
Frame
</span>
</div>
<div className="tw-mt-4">
<canvas id="js-image--frame" className="tw-inline-block"></canvas>
<canvas id="js-image--photo" className="tw-inline-block"></canvas>
</div>
</div>
);
}
Example #6
| Source File: index.tsx From webapis-playground with MIT License | 5 votes |
|
function WebSpeech() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-start
"
>
<div className="tw-space-x-4">
<Button leftIcon={<FaVoicemail />} onClick={run()?.onStartListen}>
Start listening
</Button>
<Button leftIcon={<FaStopCircle />} onClick={run()?.onStopListen}>
Stop
</Button>
</div>
<div
className="
tw-flex
tw-flex-col
tw-w-full
tw-mt-6
tw-overflow-hidden
tw-border
tw-border-gray-200
tw-rounded-lg
"
>
<div
className="
tw-p-4
tw-prose
tw-text-gray-600
"
>
<span id="js-speech--interim" className="tw-font-bold" />
<span id="js-speech--final" />
</div>
<span
className="
tw-p-4
tw-border-t
tw-border-gray-200
tw-font-semibold
tw-text-gray-600
"
>
Transcript
</span>
</div>
</div>
);
}
Example #7
| Source File: index.tsx From webapis-playground with MIT License | 5 votes |
|
function ScreenCapture() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-start
"
>
<div className="tw-space-x-4">
<Button leftIcon={<FaPlayCircle />} onClick={run.onCapture}>
Start Capture
</Button>
<Button leftIcon={<FaStopCircle />} onClick={run.onStop}>
Stop capture
</Button>
</div>
<div
className="
tw-flex
tw-flex-col
tw-w-full
tw-mt-6
tw-overflow-hidden
tw-border
tw-border-gray-200
tw-rounded-lg
"
>
<div
className="
tw-aspect-w-16
tw-aspect-h-9
"
>
<video id="js-screen--video" className="tw-w-full" autoPlay />
</div>
<span
className="
tw-p-4
tw-border-t
tw-border-gray-200
tw-font-semibold
tw-text-gray-600
"
>
Live preview
</span>
</div>
</div>
);
}
Example #8
| Source File: index.tsx From webapis-playground with MIT License | 5 votes |
|
function Resize() {
React.useEffect(() => {
run.init();
}, []);
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
"
>
<span
className="
tw-text-base
tw-italic
tw-mb-2
"
>
Drag me to resize the image
</span>
<input
type="range"
min="0"
max="100"
onChange={event => run.resize(event)}
/>
<div
className="
tw-flex
tw-flex-col
tw-mt-6
tw-overflow-hidden
tw-border
tw-border-gray-200
tw-rounded-lg
"
>
<div
className="
tw-aspect-w-16
tw-aspect-h-9
"
>
<iframe
id="js-resize--content"
src="https://giphy.com/embed/5ZjcaQbIzDXsk"
frameBorder="0"
className="tw-pointer-events-none tw-m-auto tw-w-[50%]"
/>
</div>
<span
id="js-resize--value"
className="
tw-p-4
tw-border-t
tw-border-gray-200
tw-font-semibold
tw-text-gray-600
"
>
50%
</span>
</div>
</div>
);
}
Example #9
| Source File: index.tsx From webapis-playground with MIT License | 5 votes |
|
function FileSystem() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
"
>
<div className="tw-space-x-4">
<Button
id="js-button--text"
leftIcon={<FiFileText />}
onClick={run.text}
>
Select a text file
</Button>
<Button
id="js-button--image"
leftIcon={<FiImage />}
onClick={run.image}
>
Select an image file
</Button>
</div>
<div
id="js-api--filesystem"
className="
tw-hidden
tw-flex-col
tw-mt-4
tw-overflow-hidden
tw-border
tw-border-gray-200
tw-rounded-lg
"
>
<p
id="js-content--text"
className="
tw-p-4
tw-prose
tw-text-gray-600
"
></p>
<div id="js-content--image"></div>
<span
id="js-filename"
className="
tw-p-4
tw-border-t
tw-border-gray-200
tw-font-semibold
tw-text-gray-600
"
></span>
</div>
</div>
);
}
Example #10
| Source File: index.tsx From webapis-playground with MIT License | 5 votes |
|
function Clipboard() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-space-y-4
"
>
<div
className="
tw-flex
tw-space-x-2
"
>
<Input
id="js-input--copy"
type="text"
name="copy"
placeholder="Write Something..."
/>
<Button onClick={run.onCopy}>Copy</Button>
</div>
<div
className="
tw-flex
tw-space-x-2
"
>
<Input
id="js-input--paste"
type="text"
name="paste"
placeholder="Click paste"
readOnly
/>
<Button onClick={run.onPaste}>Paste</Button>
</div>
</div>
);
}
Example #11
| Source File: index.tsx From webapis-playground with MIT License | 5 votes |
|
function Broadcast() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div className="tw-flex tw-flex-col">
<span
className="
tw-text-base
tw-italic
tw-mb-8
"
>
Open this page in a new tab. Then hit the <b>Send Message</b> button
from one tab to recieve the message in another tab. Try it out, gonna be
fun!
</span>
<div className="tw-flex tw-flex-col">
<div>
<Button leftIcon={<IoMdSend />} onClick={run}>
Send Message
</Button>
</div>
<div
className="
tw-flex
tw-flex-col
tw-mt-4
tw-overflow-hidden
tw-border
tw-border-gray-200
tw-rounded-lg
"
>
<span
className="
tw-p-4
tw-border-b
tw-border-gray-200
tw-font-semibold
tw-text-gray-600
"
>
Message received:
</span>
<span
id="js-broadcast--receiver"
className="
tw-p-4
tw-prose
tw-text-gray-600
"
></span>
</div>
</div>
</div>
);
}
Example #12
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function Battery() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-center md:tw-items-start
"
>
<Button onClick={run}>Get Battery Status</Button>
<div
className="
tw-shadow
tw-overflow-hidden
tw-border-b
tw-border-gray-200
sm:tw-rounded-lg
tw-mt-4
"
>
<table
className="
tw-w-full
tw-min-w-full
tw-divide-y
tw-divide-gray-200
"
>
<thead className="tw-bg-gray-100">
<tr>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Property
</th>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Value
</th>
</tr>
</thead>
<tbody
className="
tw-bg-white
tw-divide-y
tw-divide-gray-200
"
>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Charging
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-battery--charging"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Level
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
<Tag id="js-battery--level">Unknow</Tag>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
Example #13
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function Network() {
const [data] = React.useState<
NetworkInformation & {
effectiveType?: 'readonly';
rtt?: 'readonly';
downlink?: 'readonly';
downlinksMax?: 'readonly';
saveData?: 'readonly';
}
>(run());
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-shadow
tw-overflow-hidden
tw-border-b
tw-border-gray-200
sm:tw-rounded-lg
"
>
<table
className="
tw-w-full
tw-min-w-full
tw-divide-y
tw-divide-gray-200
"
>
<thead className="tw-bg-gray-100">
<tr>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Property
</th>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Value
</th>
</tr>
</thead>
<tbody
className="
tw-bg-white
tw-divide-y
tw-divide-gray-200
"
>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Network Type
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.effectiveType || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Round Trip Time(rtt)
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.rtt || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Bandwidth estimate(in MBPS)
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.downlink || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Max Bandwidth estimate(in MBPS)
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.downlinksMax || UNKNOWN_STRING}
</span>
</td>
</tr>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Save data enabled
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.saveData ? (
<Tag className="tw-bg-green-500 hover:tw-bg-green-600">
Yes
</Tag>
) : (
<Tag className="tw-bg-red-500 hover:tw-bg-red-600">No</Tag>
)}
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Device Connection Type
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
{data?.type || UNKNOWN_STRING}
</span>
</td>
</tr>
</tbody>
</table>
</div>
);
}
Example #14
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function Geolocation() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-flex-col
tw-items-start
"
>
<Button leftIcon={<FaLocationArrow />} onClick={run}>
Get my location
</Button>
<div
className="
tw-shadow
tw-overflow-hidden
tw-border-b
tw-border-gray-200
sm:tw-rounded-lg
tw-mt-4
"
>
<table
className="
tw-w-full
tw-min-w-full
tw-divide-y
tw-divide-gray-200
"
>
<thead className="tw-bg-gray-100">
<tr>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Property
</th>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Value
</th>
</tr>
</thead>
<tbody
className="
tw-bg-white
tw-divide-y
tw-divide-gray-200
"
>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Latitude
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--latitude"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Logintude
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--longitude"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Accurate
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--accuracy"
className="
tw-text-sm
tw-text-gray-900
"
>
Unknow
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Opengraph
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
id="js-geolocation--longitude"
className="
tw-text-sm
tw-text-gray-900
"
>
<Tag
id="js-geolocation--opengraph"
as="a"
href=""
rel="noopener noreferrer"
target="_blank"
>
open in new tab
</Tag>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
Example #15
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function FontLoading() {
const [currentFont, setCurrentFont] = React.useState<string>('Roboto');
if (!hasSupport()) {
return <NotSupported />;
}
const onFontChange = (event: ChangeEvent<HTMLInputElement>) => {
run(event.target.value);
setCurrentFont(event.target.value);
};
return (
<div
className="
tw-flex
tw-flex-col
tw-items-start
"
>
<div className="tw-flex">
<div>
<input
type="radio"
name="font"
id="roboto"
value="Roboto"
className="
tw-hidden
"
onChange={onFontChange}
/>
<label
htmlFor="roboto"
className={`
tw-border
tw-px-4
tw-py-3
tw-rounded-tl-lg
tw-rounded-bl-lg
tw-cursor-pointer
tw-text-base
tw-font-semibold
${
currentFont === 'Roboto'
? `tw-text-white
tw-bg-blue-500
tw-border-blue-500
hover:tw-bg-blue-500
`
: '`tw-text-gray-700`'
}
tw-transition
tw-ease-in
tw-duration-300
hover:tw-bg-blue-50
`}
>
Roboto
</label>
</div>
<div>
<input
type="radio"
name="font"
id="opensans"
value="OpenSans"
className="
tw-hidden
"
onChange={onFontChange}
/>
<label
htmlFor="opensans"
className={`
tw-border
tw-border-r-0
tw-border-l-0
tw-px-4
tw-py-3
tw-cursor-pointer
tw-text-base
tw-font-semibold
${
currentFont === 'OpenSans'
? `tw-text-white
tw-bg-blue-500
tw-border-blue-500
hover:tw-bg-blue-500
`
: '`tw-text-gray-700`'
}
tw-transition
tw-ease-in
tw-duration-300
hover:tw-bg-blue-50
`}
>
Open Sans
</label>
</div>
<div>
<input
type="radio"
name="font"
id="festive"
value="Festive"
className="
tw-hidden
"
onChange={onFontChange}
/>
<label
htmlFor="festive"
className={`
tw-border
tw-px-4
tw-py-3
tw-rounded-tr-lg
tw-rounded-br-lg
tw-cursor-pointer
tw-text-base
tw-font-semibold
${
currentFont === 'Festive'
? `tw-text-white
tw-bg-blue-500
tw-border-blue-500
hover:tw-bg-blue-500
`
: '`tw-text-gray-700`'
}
tw-transition
tw-ease-in
tw-duration-300
hover:tw-bg-blue-50
`}
>
Festive
</label>
</div>
</div>
<span
className="tw-mt-8 tw-prose-lg tw-text-gray-600"
style={{ fontFamily: currentFont }}
>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugiat aliquid
doloremque, nulla animi dolores libero perferendis quas, at nemo
laudantium laborum aperiam! Libero quaerat quibusdam repudiandae eveniet
odit quas commodi.
</span>
</div>
);
}
Example #16
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function FullScreen() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<div
className="
tw-flex
tw-space-x-4
"
>
<div
id="js-drag--area-1"
className="
tw-flex
tw-p-2
tw-w-[100px]
tw-h-[100px]
tw-border-2
tw-border-blue-500
tw-rounded-xl
tw-transition
tw-ease-in
tw-duration-150
"
onDrop={run.onDrop}
onDragOver={run.onDragOver}
onDragEnter={run.onDragEnter}
onDragLeave={run.onDragLeave}
>
<div
id="js-drag--box"
className="
tw-flex
tw-w-full
tw-h-full
tw-bg-blue-500
tw-rounded-lg
tw-cursor-[grab]
"
draggable
onDragStart={run.onDrag}
/>
</div>
<div
id="js-drag--area-2"
className="
tw-flex
tw-p-2
tw-w-[100px]
tw-h-[100px]
tw-border-2
tw-border-blue-100
tw-rounded-xl
tw-transition
tw-ease-in
tw-duration-150
"
onDrop={run.onDrop}
onDragOver={run.onDragOver}
onDragEnter={run.onDragEnter}
onDragLeave={run.onDragLeave}
/>
<div
id="js-drag--area-3"
className="
tw-flex
tw-p-2
tw-w-[100px]
tw-h-[100px]
tw-border-2
tw-border-blue-100
tw-rounded-xl
tw-transition
tw-ease-in
tw-duration-150
"
onDrop={run.onDrop}
onDragOver={run.onDragOver}
onDragEnter={run.onDragEnter}
onDragLeave={run.onDragLeave}
/>
<div
id="js-drag--area-4"
className="
tw-flex
tw-p-2
tw-w-[100px]
tw-h-[100px]
tw-border-2
tw-border-blue-100
tw-rounded-xl
tw-transition
tw-ease-in
tw-duration-150
"
onDrop={run.onDrop}
onDragOver={run.onDragOver}
onDragEnter={run.onDragEnter}
onDragLeave={run.onDragLeave}
/>
</div>
);
}
Example #17
| Source File: index.tsx From webapis-playground with MIT License | 4 votes |
|
function WebPayments() {
if (!hasSupport()) {
return <NotSupported />;
}
return (
<React.Fragment>
<span
className="
tw-block
tw-text-base
tw-italic
tw-mb-8
"
>
Feel free to try out this information for purchase(Dont worry, it is all
FAKE!!! ?)
</span>
<div
className="
tw-shadow
tw-overflow-hidden
tw-border-b
tw-border-gray-200
sm:tw-rounded-lg
"
>
<table
className="
tw-w-full
tw-min-w-full
tw-divide-y
tw-divide-gray-200
"
>
<thead className="tw-bg-gray-100">
<tr>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Property
</th>
<th
scope="col"
className="
tw-px-6
tw-py-3
tw-text-left
tw-text-xs
tw-font-medium
tw-text-gray-500
tw-uppercase
tw-tracking-wider
"
>
Value
</th>
</tr>
</thead>
<tbody
className="
tw-bg-white
tw-divide-y
tw-divide-gray-200
"
>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Credit Card Number
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
5115883692618333
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Name on the Card
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
Jhon Doe
</span>
</td>
</tr>
<tr>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
Card Expiry
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
3020
</span>
</td>
</tr>
<tr className="tw-bg-gray-50">
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<div
className="
tw-text-sm
tw-text-gray-900
"
>
CVV
</div>
</td>
<td
className="
tw-px-6
tw-py-4
tw-whitespace-nowrap
"
>
<span
className="
tw-text-sm
tw-text-gray-900
"
>
007
</span>
</td>
</tr>
</tbody>
</table>
</div>
<span id="js-payment--message"></span>
<div className="tw-flex tw-mt-4 tw-justify-end">
<Button leftIcon={<RiShoppingCart2Fill />} onClick={run}>
Click here to buy
</Button>
</div>
</React.Fragment>
);
}
