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/Switch/Basic.js
+39
View File
@@ -0,0 +1,39 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Switch from '@mui/material/Switch';
const label = { inputProps: { 'aria-label': 'Switch demo' } };
export default function Basic() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Basic
</Typography>
<>
<Switch {...label} defaultChecked />
<Switch {...label} />
<Switch {...label} disabled defaultChecked />
<Switch {...label} disabled />
</>
</Card>
</>
);
}
components/UIElements/Switch/Color.js
+52
View File
@@ -0,0 +1,52 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import { alpha, styled } from '@mui/material/styles';
import { pink } from '@mui/material/colors';
import Switch from '@mui/material/Switch';
const GreenSwitch = styled(Switch)(({ theme }) => ({
'& .MuiSwitch-switchBase.Mui-checked': {
color: pink[500],
'&:hover': {
backgroundColor: alpha(pink[500], theme.palette.action.hoverOpacity),
},
},
'& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': {
backgroundColor: pink[500],
},
}));
const label = { inputProps: { 'aria-label': 'Color switch demo' } };
export default function Color() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Color
</Typography>
<Switch {...label} defaultChecked />
<Switch {...label} defaultChecked color="secondary" />
<Switch {...label} defaultChecked color="warning" />
<Switch {...label} defaultChecked color="default" />
<GreenSwitch {...label} defaultChecked />
</Card>
</>
);
}
components/UIElements/Switch/Controlled.js
+43
View File
@@ -0,0 +1,43 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Switch from '@mui/material/Switch';
export default function Controlled() {
const [checked, setChecked] = React.useState(true);
const handleChange = (event) => {
setChecked(event.target.checked);
};
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Controlled
</Typography>
<Switch
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
</Card>
</>
);
}
components/UIElements/Switch/Label.js
+37
View File
@@ -0,0 +1,37 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
export default function Label() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Label
</Typography>
<FormGroup>
<FormControlLabel control={<Switch defaultChecked />} label="Label" />
<FormControlLabel disabled control={<Switch />} label="Disabled" />
</FormGroup>
</Card>
</>
);
}
components/UIElements/Switch/Size.js
+35
View File
@@ -0,0 +1,35 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Switch from '@mui/material/Switch';
const label = { inputProps: { 'aria-label': 'Size switch demo' } };
export default function Size() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Size
</Typography>
<Switch {...label} defaultChecked size="small" />
<Switch {...label} defaultChecked />
</Card>
</>
);
}
components/UIElements/Switch/SwitchesWithFormGroup.js
+74
View File
@@ -0,0 +1,74 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import FormLabel from '@mui/material/FormLabel';
import FormControl from '@mui/material/FormControl';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormHelperText from '@mui/material/FormHelperText';
import Switch from '@mui/material/Switch';
export default function SwitchesWithFormGroup() {
const [state, setState] = React.useState({
gilad: true,
jason: false,
antoine: true,
});
const handleChange = (event) => {
setState({
...state,
[event.target.name]: event.target.checked,
});
};
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Switches With Form Group
</Typography>
<FormControl component="fieldset" variant="standard">
<FormLabel component="legend">Assign responsibility</FormLabel>
<FormGroup>
<FormControlLabel
control={
<Switch checked={state.gilad} onChange={handleChange} name="gilad" />
}
label="Gilad Gray"
/>
<FormControlLabel
control={
<Switch checked={state.jason} onChange={handleChange} name="jason" />
}
label="Jason Killian"
/>
<FormControlLabel
control={
<Switch checked={state.antoine} onChange={handleChange} name="antoine" />
}
label="Antoine Llorca"
/>
</FormGroup>
<FormHelperText>Be careful</FormHelperText>
</FormControl>
</Card>
</>
);
}