mirror of
https://github.com/Vikeo/LifeTrinket.git
synced 2025-11-18 00:37:59 +00:00
remove mui from layouts
This commit is contained in:
Vikeo
@@ -1,6 +1,4 @@
|
|||||||
import { FormControlLabel, Radio, RadioGroup } from '@mui/material';
|
import { twc } from 'react-twc';
|
||||||
import React from 'react';
|
|
||||||
import { theme } from '../../../Data/theme';
|
|
||||||
import {
|
import {
|
||||||
FivePlayers,
|
FivePlayers,
|
||||||
FivePlayersSide,
|
FivePlayersSide,
|
||||||
@@ -15,12 +13,18 @@ import {
|
|||||||
TwoPlayersOppositePortrait,
|
TwoPlayersOppositePortrait,
|
||||||
TwoPlayersSameSide,
|
TwoPlayersSameSide,
|
||||||
} from '../../../Icons/generated/Layouts';
|
} from '../../../Icons/generated/Layouts';
|
||||||
|
|
||||||
import { twc } from 'react-twc';
|
|
||||||
import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
|
import OnePlayerLandscape from '../../../Icons/generated/Layouts/OnePlayerLandscape';
|
||||||
import { Orientation } from '../../../Types/Settings';
|
import { Orientation } from '../../../Types/Settings';
|
||||||
|
|
||||||
const LayoutWrapper = twc.div`flex flex-row justify-center items-center self-center w-full`;
|
const LayoutsRadioGroup = twc.div`flex flex-row justify-center items-center gap-4 self-center w-full`;
|
||||||
|
|
||||||
|
const Label = twc.label`flex flex-row relative max-w-[118px] hover:bg-primary-main hover:bg-opacity-5 rounded-2xl cursor-pointer`;
|
||||||
|
|
||||||
|
const Input = twc.input`peer sr-only`;
|
||||||
|
|
||||||
|
const IconWrapper = twc(
|
||||||
|
'div'
|
||||||
|
)`peer-checked:fill-primary-main fill-primary-dark max-h-[200px] h-[40vmin] w-[21vmin]`;
|
||||||
|
|
||||||
type LayoutOptionsProps = {
|
type LayoutOptionsProps = {
|
||||||
numberOfPlayers: number;
|
numberOfPlayers: number;
|
||||||
@@ -28,381 +32,212 @@ type LayoutOptionsProps = {
|
|||||||
onChange: (orientation: Orientation) => void;
|
onChange: (orientation: Orientation) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const LayoutOptions: React.FC<LayoutOptionsProps> = ({
|
export const LayoutOptions = ({
|
||||||
numberOfPlayers,
|
numberOfPlayers,
|
||||||
selectedOrientation,
|
selectedOrientation,
|
||||||
onChange,
|
onChange,
|
||||||
}) => {
|
}: LayoutOptionsProps) => {
|
||||||
const iconWidth = '21vmin';
|
switch (numberOfPlayers) {
|
||||||
const iconHeight = '40vmin';
|
case 1:
|
||||||
const iconMaxWidth = '124px';
|
return (
|
||||||
const iconMaxHeight = '196px';
|
<LayoutsRadioGroup>
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
|
||||||
|
checked={selectedOrientation === Orientation.Landscape}
|
||||||
|
value={Orientation.Landscape}
|
||||||
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
|
/>
|
||||||
|
<IconWrapper>
|
||||||
|
<OnePlayerLandscape className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
|
||||||
const renderLayoutOptions = () => {
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
|
||||||
switch (numberOfPlayers) {
|
<Input
|
||||||
case 1:
|
type="radio"
|
||||||
return (
|
id={`${numberOfPlayers}p-${Orientation.Portrait}`}
|
||||||
<>
|
checked={selectedOrientation === Orientation.Portrait}
|
||||||
<FormControlLabel
|
|
||||||
value={Orientation.Landscape}
|
|
||||||
control={
|
|
||||||
<Radio
|
|
||||||
icon={
|
|
||||||
<OnePlayerLandscape
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<OnePlayerLandscape
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
|
||||||
<FormControlLabel
|
|
||||||
value={Orientation.Portrait}
|
value={Orientation.Portrait}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
icon={
|
|
||||||
<OnePlayerPortrait
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<OnePlayerPortrait
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
</>
|
<IconWrapper>
|
||||||
);
|
<OnePlayerPortrait className="w-full h-full" />
|
||||||
case 2:
|
</IconWrapper>
|
||||||
return (
|
</Label>
|
||||||
<>
|
</LayoutsRadioGroup>
|
||||||
<FormControlLabel
|
);
|
||||||
|
case 2:
|
||||||
|
return (
|
||||||
|
<LayoutsRadioGroup>
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
|
||||||
|
checked={selectedOrientation === Orientation.Landscape}
|
||||||
value={Orientation.Landscape}
|
value={Orientation.Landscape}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<TwoPlayersSameSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<TwoPlayersSameSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<IconWrapper>
|
||||||
|
<TwoPlayersSameSide className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Portrait}`}
|
||||||
|
checked={selectedOrientation === Orientation.Portrait}
|
||||||
value={Orientation.Portrait}
|
value={Orientation.Portrait}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<TwoPlayersOppositePortrait
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<TwoPlayersOppositePortrait
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<IconWrapper>
|
||||||
|
<TwoPlayersOppositePortrait className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
<Label
|
||||||
|
htmlFor={`${numberOfPlayers}p-${Orientation.OppositeLandscape}`}
|
||||||
|
>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.OppositeLandscape}`}
|
||||||
|
checked={selectedOrientation === Orientation.OppositeLandscape}
|
||||||
value={Orientation.OppositeLandscape}
|
value={Orientation.OppositeLandscape}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<TwoPlayersOppositeLandscape
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<TwoPlayersOppositeLandscape
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
</>
|
<IconWrapper>
|
||||||
);
|
<TwoPlayersOppositeLandscape className="w-full h-full" />
|
||||||
case 3:
|
</IconWrapper>
|
||||||
return (
|
</Label>
|
||||||
<>
|
</LayoutsRadioGroup>
|
||||||
<FormControlLabel
|
);
|
||||||
|
case 3:
|
||||||
|
return (
|
||||||
|
<LayoutsRadioGroup>
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
|
||||||
|
checked={selectedOrientation === Orientation.Landscape}
|
||||||
value={Orientation.Landscape}
|
value={Orientation.Landscape}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<ThreePlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<ThreePlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<IconWrapper>
|
||||||
value={Orientation.Portrait}
|
<ThreePlayers className="w-full h-full" />
|
||||||
control={
|
</IconWrapper>
|
||||||
<Radio
|
</Label>
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<ThreePlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<ThreePlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 4:
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
|
||||||
return (
|
<Input
|
||||||
<>
|
type="radio"
|
||||||
<FormControlLabel
|
id={`${numberOfPlayers}p-${Orientation.Portrait}`}
|
||||||
|
checked={selectedOrientation === Orientation.Portrait}
|
||||||
|
value={Orientation.Portrait}
|
||||||
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
|
/>
|
||||||
|
<IconWrapper>
|
||||||
|
<ThreePlayersSide className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
</LayoutsRadioGroup>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 4:
|
||||||
|
return (
|
||||||
|
<LayoutsRadioGroup>
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
|
||||||
|
checked={selectedOrientation === Orientation.Landscape}
|
||||||
value={Orientation.Landscape}
|
value={Orientation.Landscape}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<FourPlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<FourPlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<IconWrapper>
|
||||||
value={Orientation.Portrait}
|
<FourPlayers className="w-full h-full" />
|
||||||
control={
|
</IconWrapper>
|
||||||
<Radio
|
</Label>
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<FourPlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<FourPlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 5:
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
|
||||||
return (
|
<Input
|
||||||
<>
|
type="radio"
|
||||||
<FormControlLabel
|
id={`${numberOfPlayers}p-${Orientation.Portrait}`}
|
||||||
|
checked={selectedOrientation === Orientation.Portrait}
|
||||||
|
value={Orientation.Portrait}
|
||||||
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
|
/>
|
||||||
|
<IconWrapper>
|
||||||
|
<FourPlayersSide className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
</LayoutsRadioGroup>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 5:
|
||||||
|
return (
|
||||||
|
<LayoutsRadioGroup>
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
|
||||||
|
checked={selectedOrientation === Orientation.Landscape}
|
||||||
value={Orientation.Landscape}
|
value={Orientation.Landscape}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<FivePlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<FivePlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<IconWrapper>
|
||||||
value={Orientation.Portrait}
|
<FivePlayers className="w-full h-full" />
|
||||||
control={
|
</IconWrapper>
|
||||||
<Radio
|
</Label>
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<FivePlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<FivePlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
|
|
||||||
case 6:
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
|
||||||
return (
|
<Input
|
||||||
<>
|
type="radio"
|
||||||
<FormControlLabel
|
id={`${numberOfPlayers}p-${Orientation.Portrait}`}
|
||||||
|
checked={selectedOrientation === Orientation.Portrait}
|
||||||
|
value={Orientation.Portrait}
|
||||||
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
|
/>
|
||||||
|
<IconWrapper>
|
||||||
|
<FivePlayersSide className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
</LayoutsRadioGroup>
|
||||||
|
);
|
||||||
|
|
||||||
|
case 6:
|
||||||
|
return (
|
||||||
|
<LayoutsRadioGroup>
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Landscape}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Landscape}`}
|
||||||
|
checked={selectedOrientation === Orientation.Landscape}
|
||||||
value={Orientation.Landscape}
|
value={Orientation.Landscape}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<SixPlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<SixPlayers
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
<FormControlLabel
|
<IconWrapper>
|
||||||
|
<SixPlayers className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
|
||||||
|
<Label htmlFor={`${numberOfPlayers}p-${Orientation.Portrait}`}>
|
||||||
|
<Input
|
||||||
|
type="radio"
|
||||||
|
id={`${numberOfPlayers}p-${Orientation.Portrait}`}
|
||||||
|
checked={selectedOrientation === Orientation.Portrait}
|
||||||
value={Orientation.Portrait}
|
value={Orientation.Portrait}
|
||||||
control={
|
onChange={(e) => onChange(e.target.value as Orientation)}
|
||||||
<Radio
|
|
||||||
style={{ maxWidth: iconMaxWidth, maxHeight: iconMaxHeight }}
|
|
||||||
icon={
|
|
||||||
<SixPlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.secondary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
checkedIcon={
|
|
||||||
<SixPlayersSide
|
|
||||||
height={iconHeight}
|
|
||||||
width={iconWidth}
|
|
||||||
fill={theme.palette.primary.main}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
TouchRippleProps={{ style: { display: 'none' } }}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
label=""
|
|
||||||
/>
|
/>
|
||||||
</>
|
<IconWrapper>
|
||||||
);
|
<SixPlayersSide className="w-full h-full" />
|
||||||
|
</IconWrapper>
|
||||||
|
</Label>
|
||||||
|
</LayoutsRadioGroup>
|
||||||
|
);
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<LayoutWrapper>
|
|
||||||
<RadioGroup
|
|
||||||
row
|
|
||||||
onChange={(_e, value) => {
|
|
||||||
onChange(value as Orientation);
|
|
||||||
}}
|
|
||||||
value={selectedOrientation}
|
|
||||||
style={{ justifyContent: 'center' }}
|
|
||||||
>
|
|
||||||
{renderLayoutOptions()}
|
|
||||||
</RadioGroup>
|
|
||||||
</LayoutWrapper>
|
|
||||||
);
|
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user