FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/UIElements/Alerts/Actions.js
+47
View File
@@ -0,0 +1,47 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Alert from "@mui/material/Alert";
import Stack from "@mui/material/Stack";
import Button from '@mui/material/Button';
const Actions = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Actions
</Typography>
<Stack sx={{ width: '100%' }} spacing={2}>
<Alert onClose={() => {}}>This is a success alert — check it out!</Alert>
<Alert
action={
<Button color="inherit" size="small">
UNDO
</Button>
}
>
This is a success alert — check it out!
</Alert>
</Stack>
</Card>
</>
);
};
export default Actions;
components/UIElements/Alerts/BasicAlerts.js
+48
View File
@@ -0,0 +1,48 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Alert from "@mui/material/Alert";
import Stack from "@mui/material/Stack";
const BasicAlerts = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
className="card-dark-bg"
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Basic Alerts
</Typography>
<Stack sx={{ width: "100%" }} spacing={2}>
<Alert severity="error">This is an error alert — check it out!</Alert>
<Alert severity="warning">
This is a warning alert — check it out!
</Alert>
<Alert severity="info">This is an info alert — check it out!</Alert>
<Alert severity="success">
This is a success alert — check it out!
</Alert>
</Stack>
</Card>
</>
);
};
export default BasicAlerts;
components/UIElements/Alerts/Color.js
+36
View File
@@ -0,0 +1,36 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Alert from '@mui/material/Alert';
const Color = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Color
</Typography>
<Alert severity="success" color="info">
This is a success alert — check it out!
</Alert>
</Card>
</>
);
};
export default Color;
components/UIElements/Alerts/DescriptionAlerts.js
+56
View File
@@ -0,0 +1,56 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Alert from "@mui/material/Alert";
import Stack from "@mui/material/Stack";
import AlertTitle from '@mui/material/AlertTitle';
const DescriptionAlerts = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Description Alerts
</Typography>
<Stack sx={{ width: '100%' }} spacing={2}>
<Alert severity="error">
<AlertTitle>Error</AlertTitle>
This is an error alert — <strong>check it out!</strong>
</Alert>
<Alert severity="warning">
<AlertTitle>Warning</AlertTitle>
This is a warning alert — <strong>check it out!</strong>
</Alert>
<Alert severity="info">
<AlertTitle>Info</AlertTitle>
This is an info alert — <strong>check it out!</strong>
</Alert>
<Alert severity="success">
<AlertTitle>Success</AlertTitle>
This is a success alert — <strong>check it out!</strong>
</Alert>
</Stack>
</Card>
</>
);
};
export default DescriptionAlerts;
components/UIElements/Alerts/Filled.js
+48
View File
@@ -0,0 +1,48 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';
const Filled = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Filled
</Typography>
<Stack sx={{ width: '100%' }} spacing={2}>
<Alert variant="filled" severity="error">
This is an error alert — check it out!
</Alert>
<Alert variant="filled" severity="warning">
This is a warning alert — check it out!
</Alert>
<Alert variant="filled" severity="info">
This is an info alert — check it out!
</Alert>
<Alert variant="filled" severity="success">
This is a success alert — check it out!
</Alert>
</Stack>
</Card>
</>
);
};
export default Filled;
components/UIElements/Alerts/Icons.js
+51
View File
@@ -0,0 +1,51 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Alert from "@mui/material/Alert";
import CheckIcon from '@mui/icons-material/Check';
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import Stack from '@mui/material/Stack';
const Icons = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Icons
</Typography>
<Stack sx={{ width: '100%' }} spacing={2}>
<Alert icon={<CheckIcon fontSize="inherit" />} severity="success">
This is a success alert — check it out!
</Alert>
<Alert
iconMapping={{
success: <CheckCircleOutlineIcon fontSize="inherit" />,
}}
>
This is a success alert — check it out!
</Alert>
<Alert icon={false} severity="success">
This is a success alert — check it out!
</Alert>
</Stack>
</Card>
</>
);
};
export default Icons;
components/UIElements/Alerts/Transition.js
+68
View File
@@ -0,0 +1,68 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Box, Typography } from "@mui/material";
import Alert from "@mui/material/Alert";
import IconButton from '@mui/material/IconButton';
import Collapse from '@mui/material/Collapse';
import Button from '@mui/material/Button';
import CloseIcon from '@mui/icons-material/Close';
const Transition = () => {
const [open, setOpen] = React.useState(true);
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Transition
</Typography>
<Box sx={{ width: '100%' }}>
<Collapse in={open}>
<Alert
action={
<IconButton
aria-label="close"
color="inherit"
size="small"
onClick={() => {
setOpen(false);
}}
>
<CloseIcon fontSize="inherit" />
</IconButton>
}
sx={{ mb: 2 }}
>
Close me!
</Alert>
</Collapse>
<Button
disabled={open}
variant="outlined"
onClick={() => {
setOpen(true);
}}
>
Re-open
</Button>
</Box>
</Card>
</>
);
};
export default Transition;
components/UIElements/Alerts/Variants.js
+48
View File
@@ -0,0 +1,48 @@
import * as React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Alert from '@mui/material/Alert';
import Stack from '@mui/material/Stack';
const Variants = () => {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Variants
</Typography>
<Stack sx={{ width: '100%' }} spacing={2}>
<Alert variant="outlined" severity="error">
This is an error alert — check it out!
</Alert>
<Alert variant="outlined" severity="warning">
This is a warning alert — check it out!
</Alert>
<Alert variant="outlined" severity="info">
This is an info alert — check it out!
</Alert>
<Alert variant="outlined" severity="success">
This is a success alert — check it out!
</Alert>
</Stack>
</Card>
</>
);
};
export default Variants;