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/Radio/Color.js
+62
View File
@@ -0,0 +1,62 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import { pink } from '@mui/material/colors';
import Radio from '@mui/material/Radio';
export default function Color() {
const [selectedValue, setSelectedValue] = React.useState('a');
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
const controlProps = (item) => ({
checked: selectedValue === item,
onChange: handleChange,
value: item,
name: 'color-radio-button-demo',
inputProps: { 'aria-label': item },
});
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Color
</Typography>
<div>
<Radio {...controlProps('a')} />
<Radio {...controlProps('b')} color="secondary" />
<Radio {...controlProps('c')} color="success" />
<Radio {...controlProps('d')} color="default" />
<Radio
{...controlProps('e')}
sx={{
color: pink[800],
'&.Mui-checked': {
color: pink[500],
},
}}
/>
</div>
</Card>
</>
);
}
components/UIElements/Radio/Controlled.js
+53
View File
@@ -0,0 +1,53 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
export default function Controlled() {
const [value, setValue] = React.useState('female');
const handleChange = (event) => {
setValue(event.target.value);
};
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Controlled
</Typography>
<FormControl>
<FormLabel id="demo-controlled-radio-buttons-group">Gender</FormLabel>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
name="controlled-radio-buttons-group"
value={value}
onChange={handleChange}
>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
</RadioGroup>
</FormControl>
</Card>
</>
);
}
components/UIElements/Radio/Direction.js
+53
View File
@@ -0,0 +1,53 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
export default function Direction() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Direction
</Typography>
<FormControl>
<FormLabel id="demo-row-radio-buttons-group-label">Gender</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
<FormControlLabel
value="disabled"
disabled
control={<Radio />}
label="other"
/>
</RadioGroup>
</FormControl>
</Card>
</>
);
}
components/UIElements/Radio/Group.js
+47
View File
@@ -0,0 +1,47 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';
import FormLabel from '@mui/material/FormLabel';
export default function Group() {
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Radio Group
</Typography>
<FormControl>
<FormLabel id="demo-radio-buttons-group-label">Gender</FormLabel>
<RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="female"
name="radio-buttons-group"
>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
</RadioGroup>
</FormControl>
</Card>
</>
);
}
components/UIElements/Radio/Size.js
+59
View File
@@ -0,0 +1,59 @@
import React from "react";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import Radio from '@mui/material/Radio';
export default function Size() {
const [selectedValue, setSelectedValue] = React.useState('a');
const handleChange = (event) => {
setSelectedValue(event.target.value);
};
const controlProps = (item) => ({
checked: selectedValue === item,
onChange: handleChange,
value: item,
name: 'size-radio-button-demo',
inputProps: { 'aria-label': item },
});
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px",
mb: "15px",
}}
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
mb: '10px'
}}
>
Size
</Typography>
<div>
<Radio {...controlProps('a')} size="small" />
<Radio {...controlProps('b')} />
<Radio
{...controlProps('c')}
sx={{
'& .MuiSvgIcon-root': {
fontSize: 28,
},
}}
/>
</div>
</Card>
</>
);
}