diff --git a/index.html b/index.html index e4b78ea..decabe7 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,17 @@ - + + Vite + React + TS - - + + + +
- + + diff --git a/lib/components/PenaLink.tsx b/lib/components/PenaLink.tsx new file mode 100644 index 0000000..5c1692c --- /dev/null +++ b/lib/components/PenaLink.tsx @@ -0,0 +1,28 @@ +import { Link, LinkProps, Typography, useTheme } from "@mui/material"; +import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; + + +export function PenaLink(props: LinkProps) { + const theme = useTheme(); + + const propsSx = props.sx; + delete props.sx; + + return ( + + {props.children} + + + ); +} diff --git a/lib/components/theme.ts b/lib/components/theme.ts index 7877a7c..7a9a07f 100644 --- a/lib/components/theme.ts +++ b/lib/components/theme.ts @@ -60,22 +60,53 @@ export const penaMuiTheme = createTheme({ { props: { variant: "pena-contained" }, style: ({ theme }) => theme.unstable_sx({ - borderColor: theme.palette.brightPurple.main, + border: `1px solid ${theme.palette.brightPurple.main}`, backgroundColor: theme.palette.brightPurple.main, - width: "180px", - paddingTop: "10px", - paddingBottom: "10px", + minWidth: "180px", + py: "9px", borderRadius: "8px", boxShadow: "none", - // стили текста кнопки - нужны ли? fontSize: "18px", lineHeight: "24px", fontWeight: 400, textTransform: "none", - // - }) - } - ] + color: "white", + "&:hover": { + backgroundColor: "#944FEE", + }, + "&:active": { + backgroundColor: "#FFFFFF", + color: theme.palette.brightPurple.main, + } + }), + }, + { + props: { variant: "pena-outlined" }, + style: ({ theme }) => theme.unstable_sx({ + border: `1px solid white`, + backgroundColor: "rgb(0 0 0 / 0)", + minWidth: "180px", + py: "9px", + borderRadius: "8px", + boxShadow: "none", + fontSize: "18px", + lineHeight: "24px", + fontWeight: 400, + textTransform: "none", + color: "white", + "&:hover": { + backgroundColor: "#252734", + }, + "&:active": { + backgroundColor: theme.palette.brightPurple.main, + borderColor: theme.palette.brightPurple.main, + } + }), + }, + ], + defaultProps: { + disableTouchRipple: true, + }, }, MuiTypography: { defaultProps: { @@ -84,12 +115,66 @@ export const penaMuiTheme = createTheme({ } }, }, - } + }, + typography: { + h5: { + fontSize: "24px", + lineHeight: "28.44px", + fontWeight: 500, + }, + button: { + fontSize: "18px", + lineHeight: "24px", + fontWeight: 400, + textTransform: "none", + }, + body1: { + fontSize: "18px", + lineHeight: "21.33px", + fontWeight: 400, + }, + body2: { + fontSize: "16px", + lineHeight: "20px", + fontWeight: 500, + }, + p1: { + fontSize: "20px", + lineHeight: "24px", + fontWeight: 500, + }, + price: { + fontWeight: 500, + fontSize: "20px", + lineHeight: "24px", + color: "#4D4D4D", + }, + oldPrice: { + fontWeight: 400, + fontSize: "18px", + lineHeight: "21px", + textDecorationLine: "line-through", + color: "#FB5607", + }, + fontFamily: [ + "Rubik", + "-apple-system", + "BlinkMacSystemFont", + '"Segoe UI"', + '"Helvetica Neue"', + "Arial", + "sans-serif", + '"Apple Color Emoji"', + '"Segoe UI Emoji"', + '"Segoe UI Symbol"', + ].join(","), + }, }); declare module '@mui/material/Button' { interface ButtonPropsVariantOverrides { "pena-contained": true; + "pena-outlined": true; } } diff --git a/package.json b/package.json index f8163f3..bc95e66 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "devDependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.4", "@types/node": "^20.5.0", "@types/react-dom": "^18.2.7", @@ -47,6 +48,7 @@ "eslint-plugin-react-refresh": "^0.4.3", "eslint": "^8.45.0", "react": "^18.2.0", + "react-dom": "^18.2.0", "typescript": "^5.0.2", "vite-plugin-dts": "^3.5.2", "vite": "^4.4.5", @@ -55,6 +57,7 @@ "peerDependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", + "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.4", "axios": "^1.4.0", "react": "^18.2.0", diff --git a/src/App.tsx b/src/App.tsx index 251bb77..45951f7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,23 +1,27 @@ -import { useState } from 'react'; +import { Box, Button, Container, Typography } from "@mui/material"; +import { PenaLink } from "../lib/components/PenaLink"; + function App() { - const [count, setCount] = useState(0); return ( - <> -

Vite + React

-
- -

- Edit src/App.tsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- + + + + + Подробнее + + ); } diff --git a/src/main.tsx b/src/main.tsx index 1382ba7..beaca0f 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,9 +1,14 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.tsx'; +import { CssBaseline, ThemeProvider } from '@mui/material'; +import { penaMuiTheme } from '../lib/index.ts'; ReactDOM.createRoot(document.getElementById('root')!).render( - + + + + , ); diff --git a/yarn.lock b/yarn.lock index 3f6fff0..07d2481 100644 --- a/yarn.lock +++ b/yarn.lock @@ -581,6 +581,13 @@ resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.4.tgz#a517265647ee9660170107d68905db5e400576c5" integrity sha512-pW2XghSi3hpYKX57Wu0SCWMTSpzvXZmmucj3TcOJWaCiFt4xr05w2gcwBZi36dAp9uvd9//9N51qbblmnD+GPg== +"@mui/icons-material@^5.14.3": + version "5.14.3" + resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.14.3.tgz#26a84d52ab2fceea2856adf7a139527b3a51ae90" + integrity sha512-XkxWPhageu1OPUm2LWjo5XqeQ0t2xfGe8EiLkRW9oz2LHMMZmijvCxulhgquUVTF1DnoSh+3KoDLSsoAFtVNVw== + dependencies: + "@babel/runtime" "^7.22.6" + "@mui/material@^5.14.4": version "5.14.4" resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.14.4.tgz#9d4d1834a929a4acc59e550e34ca64c0fd60b3a6"