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

Add svg

Browse source
This commit is contained in:
Hadeed 2024-06-01 11:12:01 +04:00
parent 01ac608b88
commit faace386e3
5 changed files with 1203 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1174
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

4
package.json
View file

@ -10,13 +10,15 @@
"react-dom": "^18.3.1"
},
"devDependencies": {
"@svgr/plugin-svgo": "^8.1.0",
"autoprefixer": "^10.4.19",
"postcss": "^8.4.38",
"prettier": "^3.2.5",
"prettier-plugin-css-order": "^2.1.2",
"prettier-plugin-tailwindcss": "^0.5.14",
"tailwindcss": "^3.4.3",
"vite": "^5.2.10"
"vite": "^5.2.10",
"vite-plugin-svgr": "^4.2.0"
},
"prettier": {
"plugins": [

2
src/app.jsx
View file

@ -2,7 +2,7 @@ import MainMenu from "./mainMenu";
export default () => {
return (
<main className="bg-navy-700 flex h-screen items-center justify-center">
<main className="flex min-h-screen items-center justify-center bg-navy-700">
<MainMenu />
</main>
);

32
src/mainMenu.jsx
View file

@ -1,13 +1,15 @@
import { useState } from "react";
import * as RadioGroup from "@radix-ui/react-radio-group";
import logo from "../assets/logo.svg";
import { useState } from "react";
import Cross from "../assets/icon-x.svg?react";
import Oval from "../assets/icon-o.svg?react";
export default () => {
const [playerSymbol, setPlayerSymbol] = useState("cross");
return (
<div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
<div className="m-6 flex w-full max-w-lg flex-col items-center space-y-10">
<img src={logo} alt="logo" />
<div className="inner-shadow-2-navy-900 flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6">
<h2 className="mb-6 text-h-xs uppercase text-silver-700">
@ -24,35 +26,21 @@ export default () => {
className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="cross"
>
<svg
className="m-auto"
<Cross
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>
className={`m-auto ${playerSymbol == "cross" ? "text-navy-700" : "text-silver-700"}`}
/>
</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"
<Oval
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>
className={`m-auto ${playerSymbol == "oval" ? "text-navy-700" : "text-silver-700"}`}
/>
</RadioGroup.Item>
</RadioGroup.Root>
<p className="text-base uppercase text-silver-700">

16
vite.config.js
View file

@ -1,8 +1,24 @@
import { defineConfig } from "vite";
import svgr from "vite-plugin-svgr";
export default defineConfig({
base: "/fem-tic-tac-toe/",
esbuild: {
jsxInject: `import React from 'react'`,
},
plugins: [
svgr({
svgrOptions: {
plugins: ["@svgr/plugin-svgo", "@svgr/plugin-jsx"],
replaceAttrValues: {
"#31C3BD": "currentColor",
"#F2B137": "currentColor",
},
svgoConfig: {
plugins: ["removeDimensions"],
},
},
}),
],
});