import React,{useState} from
'react'
;
import
'rsuite/dist/rsuite.min.css'
;
import Stack from
'rsuite/Stack'
;
import Button from
'@mui/material/Button'
;
import { Radio, RadioGroup } from
'rsuite'
;
export
default
function
App(){
const [justifyContent, setJustifyContent] = React.useState(
'flex-start'
);
const [alignItems, setAlignItems] = React.useState(
'flex-start'
);
const [direction, setDirection] = React.useState(
'row'
);
return
(
<div>
<h1 style={{color:
'green'
}}>GeeksforGeeks</h1>
<h3>React Suite Stack Interactive</h3>
<Stack spacing={6} direction={direction}
alignItems={alignItems} justifyContent={justifyContent}
>
<Button style={{color:
'white'
,background:
'green'
}}>Item 1</Button>
<Button style={{color:
'white'
,background:
'red'
}}>Item 2</Button>
<Button style={{color:
'black'
,background:
'yellow'
}}>Item 3</Button>
<Button style={{color:
'white'
,background:
'violet'
}} >Item 4</Button>
</Stack>
<hr />
<Stack>
<label>direction:</label>
<RadioGroup inline value={direction} onChange={setDirection}>
<Radio value=
"row"
>row</Radio>
<Radio value=
"row-reverse"
>row-reverse</Radio>
<Radio value=
"column"
>column</Radio>
<Radio value=
"column-reverse"
>column-reverse</Radio>
</RadioGroup>
</Stack>
<Stack>
<label>justifyContent:</label>
<RadioGroup inline value={justifyContent}
onChange={setJustifyContent}>
<Radio value=
"flex-start"
>flex-start</Radio>
<Radio value=
"center"
>center</Radio>
<Radio value=
"flex-end"
>flex-end</Radio>
<Radio value=
"space-between"
>space-between</Radio>
<Radio value=
"space-around"
>space-around</Radio>
</RadioGroup>
</Stack>
</div>
)
}