diff --git a/.gitignore b/.gitignore index a547bf3..02f71ea 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ dist-ssr !.vscode/extensions.json .idea .DS_Store +*.tsbuildinfo *.suo *.ntvs* *.njsproj diff --git a/.prettierrc b/.prettierrc index bc3336f..49b905d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,11 @@ { - "printWidth": 100, - "tabWidth": 2, + "arrowParens": "avoid", "singleQuote": true, - "semi": true + "tabWidth": 2, + "trailingComma": "all", + "jsxSingleQuote": false, + "printWidth": 80, + "semi": true, + "bracketSpacing": true, + "bracketSameLine": false } diff --git a/eslint.config.js b/eslint.config.js index 8631bd9..20b28ea 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -15,6 +15,7 @@ export default [ rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-uses-react': 'off', + 'react/prop-types': 'off', }, settings: { react: { @@ -23,4 +24,5 @@ export default [ }, }, {ignores: ['build/', 'dist/assets/index-CnMgUSrV.js', 'node_modules']}, + ]; diff --git a/index.html b/index.html index e4b78ea..00837ce 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ + + + Vite + React + TS diff --git a/src/App.css b/src/App.scss similarity index 100% rename from src/App.css rename to src/App.scss diff --git a/src/App.tsx b/src/App.tsx index a20ef38..671d2bb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import './App.css'; +import './App.scss'; import { MainPage } from './pages/MainPage'; export const App = () => { return ; diff --git a/src/components/Main/CategoriesList/CategoriesItem/CategoriesItem.tsx b/src/components/Main/CategoriesList/CategoriesItem/CategoriesItem.tsx new file mode 100644 index 0000000..033a232 --- /dev/null +++ b/src/components/Main/CategoriesList/CategoriesItem/CategoriesItem.tsx @@ -0,0 +1,10 @@ +import React from 'react'; + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +type Props = {}; + +export const CategoriesItem: React.FC = () => { + return ( +
  • + ); +}; diff --git a/src/components/Main/CategoriesList/CategoriesItem/index.ts b/src/components/Main/CategoriesList/CategoriesItem/index.ts new file mode 100644 index 0000000..da94a79 --- /dev/null +++ b/src/components/Main/CategoriesList/CategoriesItem/index.ts @@ -0,0 +1 @@ +export * from './CategoriesItem' \ No newline at end of file diff --git a/src/components/Main/CategoriesList/CategoriesList.tsx b/src/components/Main/CategoriesList/CategoriesList.tsx new file mode 100644 index 0000000..b0c22c4 --- /dev/null +++ b/src/components/Main/CategoriesList/CategoriesList.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { CategoriesItem } from './CategoriesItem'; + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +type Props = {}; + +export const CategoriesList: React.FC = () => { + return ( +
    +

    Shop by category

    + +
      + {/* TODO: at this stage we need to load phone cards from server, map given list and render it */} + +
    +
    + ); +}; diff --git a/src/components/Main/CategoriesList/index.ts b/src/components/Main/CategoriesList/index.ts new file mode 100644 index 0000000..1a464b7 --- /dev/null +++ b/src/components/Main/CategoriesList/index.ts @@ -0,0 +1 @@ +export * from './CategoriesList' \ No newline at end of file diff --git a/src/components/Main/GoodsSlider/GoodsSlider.tsx b/src/components/Main/GoodsSlider/GoodsSlider.tsx new file mode 100644 index 0000000..d2046fd --- /dev/null +++ b/src/components/Main/GoodsSlider/GoodsSlider.tsx @@ -0,0 +1,25 @@ +import { PhoneCard } from "../PhoneCard"; + +type Props = { + sliderTitle: string; +}; + +export const GoodsSlider: React.FC = ({ sliderTitle }) => { + return ( +
    +
    +

    {sliderTitle}

    + +
    + + + +
    +
    +
      + {/* TODO: at this stage we need to load phone cards from server, map given list and render it */} + +
    +
    + ); +}; diff --git a/src/components/Main/GoodsSlider/index.ts b/src/components/Main/GoodsSlider/index.ts new file mode 100644 index 0000000..2d6f564 --- /dev/null +++ b/src/components/Main/GoodsSlider/index.ts @@ -0,0 +1 @@ +export * from './GoodsSlider' \ No newline at end of file diff --git a/src/components/Main/HotPricesList/HotPricesList.tsx b/src/components/Main/HotPricesList/HotPricesList.tsx new file mode 100644 index 0000000..ba92180 --- /dev/null +++ b/src/components/Main/HotPricesList/HotPricesList.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { GoodsSlider } from '../GoodsSlider'; + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +type Props = {}; + +export const HotPricesList: React.FC = () => { + return ( + + ); +}; + + + + diff --git a/src/components/Main/HotPricesList/index.ts b/src/components/Main/HotPricesList/index.ts new file mode 100644 index 0000000..5dc70e3 --- /dev/null +++ b/src/components/Main/HotPricesList/index.ts @@ -0,0 +1 @@ +export * from './HotPricesList' \ No newline at end of file diff --git a/src/components/Main/Main.scss b/src/components/Main/Main.scss index e69de29..ac36b64 100644 --- a/src/components/Main/Main.scss +++ b/src/components/Main/Main.scss @@ -0,0 +1,19 @@ +@import '../../styles/mixins/mixins.scss'; + +.main { + grid-column: 1 / -1; + + &__title { + margin: 56px 0; + } + + &__content { + @include mainContentGrid; + } + + &__slider, &__categories, &__banner-slider { + display: flex; + } + +} + diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx index db701d1..ffb43eb 100644 --- a/src/components/Main/Main.tsx +++ b/src/components/Main/Main.tsx @@ -1,8 +1,25 @@ import React from 'react'; import './Main.scss'; +import { MainBannerSlider } from './MainBannerSlider'; +import { NewModelList } from './NewModelsList'; +import { CategoriesList } from './CategoriesList'; +import { HotPricesList } from './HotPricesList'; // eslint-disable-next-line @typescript-eslint/no-empty-object-type type Props = {}; export const Main: React.FC = () => { - return
    ; + return ( +
    +

    Welcome to Nice Gadgets store!

    +
    + + + + + + + +
    +
    + ); }; diff --git a/src/components/Main/MainBannerSlider/MainBannerSlider.tsx b/src/components/Main/MainBannerSlider/MainBannerSlider.tsx new file mode 100644 index 0000000..451d9b6 --- /dev/null +++ b/src/components/Main/MainBannerSlider/MainBannerSlider.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +type Props = {}; + +export const MainBannerSlider: React.FC = () => { + return ( +
    +
    + + +
    + + +
    + +
    +
    + ); +}; diff --git a/src/components/Main/MainBannerSlider/index.ts b/src/components/Main/MainBannerSlider/index.ts new file mode 100644 index 0000000..6ad69fa --- /dev/null +++ b/src/components/Main/MainBannerSlider/index.ts @@ -0,0 +1 @@ +export * from './MainBannerSlider' \ No newline at end of file diff --git a/src/components/Main/NewModelsList/NewModelList.tsx b/src/components/Main/NewModelsList/NewModelList.tsx new file mode 100644 index 0000000..97881c3 --- /dev/null +++ b/src/components/Main/NewModelsList/NewModelList.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { GoodsSlider } from '../GoodsSlider'; + +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +type Props = {}; + +export const NewModelList: React.FC = () => { + return ; +}; diff --git a/src/components/Main/NewModelsList/index.ts b/src/components/Main/NewModelsList/index.ts new file mode 100644 index 0000000..0e90f51 --- /dev/null +++ b/src/components/Main/NewModelsList/index.ts @@ -0,0 +1 @@ +export * from './NewModelList' \ No newline at end of file diff --git a/src/components/Main/PhoneCard/PhoneCard.scss b/src/components/Main/PhoneCard/PhoneCard.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Main/PhoneCard/PhoneCard.tsx b/src/components/Main/PhoneCard/PhoneCard.tsx new file mode 100644 index 0000000..2257859 --- /dev/null +++ b/src/components/Main/PhoneCard/PhoneCard.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import './PhoneCard.scss' +// eslint-disable-next-line @typescript-eslint/no-empty-object-type +type Props = {}; + +export const PhoneCard: React.FC = () => { + return ( +
  • + ); +}; diff --git a/src/components/Main/PhoneCard/index.ts b/src/components/Main/PhoneCard/index.ts new file mode 100644 index 0000000..adedb47 --- /dev/null +++ b/src/components/Main/PhoneCard/index.ts @@ -0,0 +1 @@ +export * from './PhoneCard' \ No newline at end of file diff --git a/src/index.css b/src/index.scss similarity index 96% rename from src/index.css rename to src/index.scss index e808afc..83d7a4b 100644 --- a/src/index.css +++ b/src/index.scss @@ -69,7 +69,6 @@ button:focus-visible { body { margin: 0; - font-family: 'Montserrat', sans-serif; /* display: flex; place-items: center; min-width: 320px; diff --git a/src/main.tsx b/src/main.tsx index 0e800c9..fd84f6e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,5 +1,5 @@ import { createRoot } from 'react-dom/client'; -import './index.css'; +import './index.scss'; import { Root } from './Root.tsx'; -createRoot(document.getElementById('root')!).render(); +createRoot(document.getElementById('root') as HTMLElement).render(); diff --git a/src/pages/MainPage/MainPage.scss b/src/pages/MainPage/MainPage.scss index c4750a5..b2ffbdc 100644 --- a/src/pages/MainPage/MainPage.scss +++ b/src/pages/MainPage/MainPage.scss @@ -1,6 +1,6 @@ -@import '../../styles/mixins/mixins.scss'; +@import '../../styles/mixins/mixins.scss'; -.grid-container { +.main-page { + font-family: 'Montserrat', sans-serif; @include mainPageGrid(); - justify-content: center; } \ No newline at end of file diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx index 10ba3ff..023e334 100644 --- a/src/pages/MainPage/MainPage.tsx +++ b/src/pages/MainPage/MainPage.tsx @@ -11,10 +11,10 @@ export const MainPage: React.FC = () => { return ( <>
    -
    +
    +
    -