1
Fork 0

Make responsive

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

View file

@ -7,63 +7,64 @@ export default () => {
const [playerSymbol, setPlayerSymbol] = useState("cross");
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" />
<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]">
<h2 className="text-silver-700 text-h-xs uppercase">
<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="mb-6 text-h-xs uppercase text-silver-700">
Pick player 1's mark
</h2>
<div className="flex w-full flex-col items-center justify-center space-y-[17px]">
<RadioGroup.Root
className="bg-navy-700 flex h-[72px] w-full items-center justify-between rounded-[10px] p-[8px]"
defaultValue="cross"
value={playerSymbol}
onValueChange={setPlayerSymbol}
<RadioGroup.Root
className="mb-4 flex h-20 w-full items-center justify-between rounded-xl bg-navy-700 p-2"
defaultValue="cross"
value={playerSymbol}
onValueChange={setPlayerSymbol}
loop={false}
>
<RadioGroup.Item
className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="cross"
>
<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]"
value="cross"
<svg
className="m-auto"
width="32"
height="32"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<svg
width="32"
height="32"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z"
fill={playerSymbol != "cross" ? "#A8BFC9" : "#1A2A33"}
/>
</svg>
</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]"
value="oval"
<path
d="M15.002 1.147 32 18.145 48.998 1.147a3 3 0 0 1 4.243 0l9.612 9.612a3 3 0 0 1 0 4.243L45.855 32l16.998 16.998a3 3 0 0 1 0 4.243l-9.612 9.612a3 3 0 0 1-4.243 0L32 45.855 15.002 62.853a3 3 0 0 1-4.243 0L1.147 53.24a3 3 0 0 1 0-4.243L18.145 32 1.147 15.002a3 3 0 0 1 0-4.243l9.612-9.612a3 3 0 0 1 4.243 0Z"
fill={playerSymbol != "cross" ? "#A8BFC9" : "#1A2A33"}
/>
</svg>
</RadioGroup.Item>
<RadioGroup.Item
className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="oval"
>
<svg
className="m-auto"
width="32"
height="32"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<svg
width="32"
height="32"
viewBox="0 0 64 64"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.963c-7.2 0-13.037 5.837-13.037 13.037 0 7.2 5.837 13.037 13.037 13.037 7.2 0 13.037-5.837 13.037-13.037 0-7.2-5.837-13.037-13.037-13.037Z"
fill={playerSymbol != "oval" ? "#A8BFC9" : "#1A2A33"}
/>
</svg>
</RadioGroup.Item>
</RadioGroup.Root>
<p className="text-silver-700 text-base uppercase">
Remember : X goes first
</p>
</div>
<path
d="M32 0c17.673 0 32 14.327 32 32 0 17.673-14.327 32-32 32C14.327 64 0 49.673 0 32 0 14.327 14.327 0 32 0Zm0 18.963c-7.2 0-13.037 5.837-13.037 13.037 0 7.2 5.837 13.037 13.037 13.037 7.2 0 13.037-5.837 13.037-13.037 0-7.2-5.837-13.037-13.037-13.037Z"
fill={playerSymbol != "oval" ? "#A8BFC9" : "#1A2A33"}
/>
</svg>
</RadioGroup.Item>
</RadioGroup.Root>
<p className="text-base uppercase text-silver-700">
Remember : X goes first
</p>
</div>
<div className="flex w-full flex-col items-center justify-between space-y-[20px]">
<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 text-navy-700 uppercase">New game (vs cpu)</p>
<div className="w-full space-y-5">
<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">
<p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
</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">
<p className="text-h-s text-navy-700 uppercase">
<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 uppercase text-navy-700">
New game (vs player)
</p>
</button>

View file

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