mirror of
https://github.com/bluewave-labs/Checkmate.git
synced 2026-01-15 14:19:41 -06:00
Removed playground, prepare for release
This commit is contained in:
Alex Holliday
@@ -1,25 +0,0 @@
|
||||
import React from "react";
|
||||
import "./playGround.css";
|
||||
import Statistic from "../../Components/Charts/Statistics/Statistic";
|
||||
import ServerStatus from "../../Components/Charts/Servers/ServerStatus";
|
||||
|
||||
function PlayGroundCharts() {
|
||||
return (
|
||||
<>
|
||||
<div className="play-ground-charts">
|
||||
<Statistic title="Currently up for" value="4h 30m 2s" />
|
||||
<Statistic title="Last checked" value="15 seconds ago" />
|
||||
<Statistic title="Incidents" value="2" />
|
||||
<Statistic title="Certificate expiry" value="284 days" />
|
||||
</div>
|
||||
<div className="play-ground-charts-spacing" />
|
||||
<div className="play-ground-charts">
|
||||
<ServerStatus title="Up" value="4" state="up" />
|
||||
<ServerStatus title="Down" value="0" state="down" />
|
||||
<ServerStatus title="Paused" value="0" state="pause" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGroundCharts;
|
||||
@@ -1,34 +0,0 @@
|
||||
import React from "react";
|
||||
import TooltipWithTail from "../../Components/Tooltips/TooltipWithTail/TooltipWithTail";
|
||||
import "./playGround.css";
|
||||
|
||||
function PlayGroundTooltips() {
|
||||
return (
|
||||
<div className="tooltip-playground">
|
||||
<br />
|
||||
<TooltipWithTail
|
||||
placement="left"
|
||||
arrow={true}
|
||||
title="This is a tooltip"
|
||||
text="This is a tooltip"
|
||||
/>
|
||||
<br />
|
||||
<TooltipWithTail placement="top" arrow={true} text="This is a tooltip" />
|
||||
<br />
|
||||
<TooltipWithTail
|
||||
placement="bottom"
|
||||
arrow={false}
|
||||
text="This is a tooltip"
|
||||
/>
|
||||
<br />
|
||||
<TooltipWithTail
|
||||
placement="right"
|
||||
arrow={true}
|
||||
title="This is a tooltip"
|
||||
text="Tooltips are used to describe or identify an element. In most scenarios, tooltips help the user understand meaning, function or alt-text."
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGroundTooltips;
|
||||
@@ -1,73 +0,0 @@
|
||||
import "./playGround.css";
|
||||
import React from "react";
|
||||
import AnnouncementsDualButtonWithIcon from "../../Components/Announcements/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
|
||||
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
||||
import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
|
||||
import AnnouncementsMessageBar from "../../Components/Announcements/AnnouncementsMessageBar/AnnouncementsMessageBar";
|
||||
import AnnouncementsDualButton from "../../Components/Announcements/AnnouncementsDualButton/AnnouncementsDualButton";
|
||||
import AnnouncementUpdateSubscription from "../../Components/Announcements/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
|
||||
|
||||
function PlayGroundAnnouncements() {
|
||||
return (
|
||||
<div className="playground">
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={
|
||||
<div className="info-icon-frame">
|
||||
<InfoOutlinedIcon style={{ fill: "#344054" }} />
|
||||
</div>
|
||||
}
|
||||
subject="We’ve just released a new feature"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="View changes"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={<ComplexAlert theme="red" />}
|
||||
subject="There was a problem with that action"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="Learn more"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={<ComplexAlert theme="green" />}
|
||||
subject="Successfully updated profile"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="Learn more"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsDualButton
|
||||
subject="We’ve just released a new feature"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="View changes"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementsMessageBar message="New employee created successfully" />
|
||||
<br />
|
||||
<br />
|
||||
<AnnouncementUpdateSubscription
|
||||
title="We’ve just released a new update!"
|
||||
text="Check out the all new dashboard view. Pages and now load faster."
|
||||
cancel="Dismiss"
|
||||
positive="Changelog"
|
||||
header="Subscribe to updates"
|
||||
button="Subscribe"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGroundAnnouncements;
|
||||
@@ -1,86 +0,0 @@
|
||||
import React from "react";
|
||||
import PlayGroundCharts from "./PlayGround-Charts";
|
||||
import PlayGroundTooltips from "./PlayGround-Tooltips";
|
||||
import Field from "../../Components/Inputs/Field";
|
||||
|
||||
// This Component is just for the development and test
|
||||
// purposes and just to see what my components look like while development
|
||||
// and will be removed in the end
|
||||
function PlayGround() {
|
||||
return (
|
||||
<div>
|
||||
{/* Default state of Email Text Fields */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px",
|
||||
maxWidth: "400px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
type="email"
|
||||
id="outlined-basic"
|
||||
label="Email"
|
||||
placeholder="olivia@untitledui.com"
|
||||
/>
|
||||
{/* Email Text Field when validation error occures */}
|
||||
<Field
|
||||
type="email"
|
||||
id="outlined-basic"
|
||||
label="Email"
|
||||
placeholder="olivia@untitledui.com"
|
||||
error="This is an error message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
{/* Now, illustration of the Website text fields */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px",
|
||||
maxWidth: "400px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Field type="url" label="Website" />
|
||||
<Field type="url" label="Website" hasCopy={true} />
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
{/* Now, illustration of the Description text fields */}
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px",
|
||||
maxWidth: "400px",
|
||||
padding: "10px",
|
||||
}}
|
||||
>
|
||||
<Field
|
||||
type="description"
|
||||
label="Description"
|
||||
placeholder="Enter a description... "
|
||||
/>
|
||||
<Field
|
||||
type="description"
|
||||
label="Description"
|
||||
placeholder="Enter a description... "
|
||||
error="This is an error message"
|
||||
/>
|
||||
</div>
|
||||
<hr />
|
||||
<PlayGroundCharts />
|
||||
<hr />
|
||||
<PlayGroundTooltips />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PlayGround;
|
||||
@@ -1,19 +0,0 @@
|
||||
.play-ground-charts {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.play-ground-charts-spacing {
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.tooltip-playground {
|
||||
margin: auto;
|
||||
padding: 5%;
|
||||
width: 5%;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playground {
|
||||
padding: 40px;
|
||||
}
|
||||
Reference in New Issue
Block a user