fem-projects/tic-tac-toe
Archived
1
Fork 0
Code Activity

Make responsive

Browse source
This commit is contained in:
Hadeed 2024-06-01 09:14:51 +04:00
parent 71f6a1edcd
commit 5ecdcefb4a
2 changed files with 51 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/mainMenu.jsx
View file

@ -7,24 +7,25 @@ export default () => {
const [playerSymbol, setPlayerSymbol] = useState("cross"); const [playerSymbol, setPlayerSymbol] = useState("cross");
return ( return (
<div className="flex w-[460px] flex-col items-center space-y-[40px]"> <div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
<img src={logo} alt="logo" /> <img src={logo} alt="logo" />
<div className="bg-navy-400 flex w-full flex-col items-center justify-center space-y-[24px] rounded-[15px] p-[24px] drop-shadow-[0_8px_0_#10212A]"> <div className="flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6 drop-shadow-[0_8px_0_#10212A]">
<h2 className="text-silver-700 text-h-xs uppercase"> <h2 className="mb-6 text-h-xs uppercase text-silver-700">
Pick player 1's mark Pick player 1's mark
</h2> </h2>
<div className="flex w-full flex-col items-center justify-center space-y-[17px]">
<RadioGroup.Root <RadioGroup.Root
className="bg-navy-700 flex h-[72px] w-full items-center justify-between rounded-[10px] p-[8px]" className="mb-4 flex h-20 w-full items-center justify-between rounded-xl bg-navy-700 p-2"
defaultValue="cross" defaultValue="cross"
value={playerSymbol} value={playerSymbol}
onValueChange={setPlayerSymbol} onValueChange={setPlayerSymbol}
loop={false}
> >
<RadioGroup.Item <RadioGroup.Item
className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]" className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="cross" value="cross"
> >
<svg <svg
className="m-auto"
width="32" width="32"
height="32" height="32"
viewBox="0 0 64 64" viewBox="0 0 64 64"
@ -37,10 +38,11 @@ export default () => {
</svg> </svg>
</RadioGroup.Item> </RadioGroup.Item>
<RadioGroup.Item <RadioGroup.Item
className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]" className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="oval" value="oval"
> >
<svg <svg
className="m-auto"
width="32" width="32"
height="32" height="32"
viewBox="0 0 64 64" viewBox="0 0 64 64"
@ -53,17 +55,16 @@ export default () => {
</svg> </svg>
</RadioGroup.Item> </RadioGroup.Item>
</RadioGroup.Root> </RadioGroup.Root>
<p className="text-silver-700 text-base uppercase"> <p className="text-base uppercase text-silver-700">
Remember : X goes first Remember : X goes first
</p> </p>
</div> </div>
</div> <div className="w-full space-y-5">
<div className="flex w-full flex-col items-center justify-between space-y-[20px]"> <button className="flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400">
<button className="flex w-full items-center justify-center rounded-[15px] bg-yellow-700 p-[17px] drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400"> <p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
<p className="text-h-s text-navy-700 uppercase">New game (vs cpu)</p>
</button> </button>
<button className="flex w-full items-center justify-center rounded-[15px] bg-blue-700 p-[17px] drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400"> <button className="flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
<p className="text-h-s text-navy-700 uppercase"> <p className="text-h-s uppercase text-navy-700">
New game (vs player) New game (vs player)
</p> </p>
</button> </button>

2
tailwind.config.js
View file

@ -13,7 +13,7 @@ export default {
"yellow-400": "#FFC860", "yellow-400": "#FFC860",
}, },
fontFamily: { fontFamily: {
sans: ["Outfit"], sans: ["Outfit", "sans-serif"],
}, },
fontSize: { fontSize: {
base: [ base: [