Merge pull request #5 from fs-jun24-team-3/feature/Base-structure-for…

…-Main-component Feature/base structure for main component
fs-jun24-team-3 · Sep 14, 2024 · 65111f6 · 65111f6
2 parents 79d4fe5 + 2356ae6
commit 65111f6
Show file tree

Hide file tree

Showing 29 changed files with 198 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -3,6 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

diff --git a/src/App.css → src/App.scss b/src/App.css → src/App.scss
diff --git 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 <MainPage />;

diff --git a/src/components/Main/CategoriesList/CategoriesItem/CategoriesItem.tsx 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<Props> = () => {
+  return (
+    <li className="categoties__item"></li>
+  );
+};
diff --git a/src/components/Main/CategoriesList/CategoriesItem/index.ts b/src/components/Main/CategoriesList/CategoriesItem/index.ts
@@ -0,0 +1 @@
+export * from './CategoriesItem'
diff --git a/src/components/Main/CategoriesList/CategoriesList.tsx 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<Props> = () => {
+  return (
+    <div className="main__categories">
+      <h2 className="categories__title">Shop by category</h2>
+
+      <ul className="categories__list">
+        {/* TODO: at this stage we need to load phone cards from server, map given list and render it */}
+        <CategoriesItem />
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/Main/CategoriesList/index.ts b/src/components/Main/CategoriesList/index.ts
@@ -0,0 +1 @@
+export * from './CategoriesList'
diff --git a/src/components/Main/GoodsSlider/GoodsSlider.tsx b/src/components/Main/GoodsSlider/GoodsSlider.tsx
@@ -0,0 +1,25 @@
+import { PhoneCard } from "../PhoneCard";
+
+type Props = {
+  sliderTitle: string;
+};
+
+export const GoodsSlider: React.FC<Props> = ({ sliderTitle }) => {
+  return (
+    <div className="main__slider">
+      <div className="slider__header">
+        <h2 className="slider__title">{sliderTitle}</h2>
+
+        <div className="slider__interactive-part">
+          <button className="slider__button slider__button--prev"></button>
+
+          <button className="slider__button slider__button--next"></button>
+        </div>
+      </div>
+      <ul className="slider__list">
+        {/* TODO: at this stage we need to load phone cards from server, map given list and render it */}
+        <PhoneCard />
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/Main/GoodsSlider/index.ts b/src/components/Main/GoodsSlider/index.ts
@@ -0,0 +1 @@
+export * from './GoodsSlider'
diff --git a/src/components/Main/HotPricesList/HotPricesList.tsx 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<Props> = () => {
+  return (
+    <GoodsSlider sliderTitle={'Hot prices'} />
+  );
+};
+
+
+
+
diff --git a/src/components/Main/HotPricesList/index.ts b/src/components/Main/HotPricesList/index.ts
@@ -0,0 +1 @@
+export * from './HotPricesList'
diff --git 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
@@ -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<Props> = () => {
-  return <div className="main-content"></div>;
+  return (
+    <main className="main">
+        <h1 className="main__title">Welcome to Nice Gadgets store!</h1>
+        <div className="main__content">
+          <MainBannerSlider />
+
+          <NewModelList />
+
+          <CategoriesList />
+
+          <HotPricesList />
+        </div>
+    </main>
+  );
 };
diff --git a/src/components/Main/MainBannerSlider/MainBannerSlider.tsx 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<Props> = () => {
+  return (
+    <div className="main__banner-slider">
+      <div className="banner-slider__interactive-part">
+        <button className="banner-slider__button banner-slider__button--prev"></button>
+
+        <div className="banner-slider__banner"></div>
+
+        <button className="banner-slider__button banner-slider__button--next"></button>
+      </div>
+
+      <div className="banner-slider__indicator"></div>
+    </div>
+  );
+};
diff --git a/src/components/Main/MainBannerSlider/index.ts b/src/components/Main/MainBannerSlider/index.ts
@@ -0,0 +1 @@
+export * from './MainBannerSlider'
diff --git a/src/components/Main/NewModelsList/NewModelList.tsx 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<Props> = () => {
+  return <GoodsSlider sliderTitle={'Brand new models'} />;
+};
diff --git a/src/components/Main/NewModelsList/index.ts b/src/components/Main/NewModelsList/index.ts
@@ -0,0 +1 @@
+export * from './NewModelList'
diff --git a/src/components/Main/PhoneCard/PhoneCard.scss b/src/components/Main/PhoneCard/PhoneCard.scss
diff --git a/src/components/Main/PhoneCard/PhoneCard.tsx 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<Props> = () => {
+  return (
+    <li className='slider__item'></li>
+  );
+};
diff --git a/src/components/Main/PhoneCard/index.ts b/src/components/Main/PhoneCard/index.ts
@@ -0,0 +1 @@
+export * from './PhoneCard'
diff --git a/src/index.css → src/index.scss b/src/index.css → 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
@@ -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(<Root />);
+createRoot(document.getElementById('root') as HTMLElement).render(<Root />);
diff --git 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;
 }
diff --git a/src/pages/MainPage/MainPage.tsx b/src/pages/MainPage/MainPage.tsx
@@ -11,10 +11,10 @@ export const MainPage: React.FC<Props> = () => {
   return (
     <>
       <Header />
-      <div className="grid-container">
+      <div className="main-page">
         <Main />
+        <Footer />
       </div>
-      <Footer />
     </>
   );
 };
diff --git a/src/styles/mixins/mixins.scss b/src/styles/mixins/mixins.scss
@@ -18,22 +18,41 @@
 
 @mixin mainPageGrid() {
   display: grid;
-  grid-template-rows: auto;
+  justify-content: center;
 
   @include onMobile {
     grid-template-columns: repeat(4, 60px);
     column-gap: 16px;
     margin-inline: 16px;
+    row-gap: 64px;
   }
 
   @include onTablet {
     grid-template-columns: repeat(12, 32px);
     column-gap: 16px;
     margin-inline: 24px;
+    row-gap: 80px;
   }
 
   @include onDesktop {
     grid-template-columns: repeat(24, 32px);
     column-gap: 16px;
+    row-gap: 80px;
   }
-}
+}
+
+@mixin mainContentGrid() {
+  display: grid;
+
+  @include onMobile {
+    row-gap: 64px;
+  }
+
+  @include onTablet {
+    row-gap: 80px;
+  }
+
+  @include onDesktop {
+    row-gap: 80px;
+  }
+}
diff --git a/tsconfig.app.tsbuildinfo b/tsconfig.app.tsbuildinfo
@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/root.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/app/reduxhooks.ts","./src/app/store.ts"],"version":"5.6.2"}
+{"root":["./src/app.tsx","./src/root.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/app/reduxhooks.ts","./src/app/store.ts","./src/components/footer/footer.tsx","./src/components/footer/index.ts","./src/components/footer/navfooter/navfooter.tsx","./src/components/footer/navfooter/index.ts","./src/components/header/header.tsx","./src/components/header/index.ts","./src/components/header/navheader/navheader.tsx","./src/components/header/navheader/index.ts","./src/components/main/main.tsx","./src/components/main/index.ts","./src/components/main/categorieslist/categorieslist.tsx","./src/components/main/categorieslist/index.ts","./src/components/main/categorieslist/categoriesitem/categoriesitem.tsx","./src/components/main/categorieslist/categoriesitem/index.ts","./src/components/main/hotpriceslist/hotpriceslist.tsx","./src/components/main/hotpriceslist/index.ts","./src/components/main/hotpriceslist/hotpricesitem/hotpricesitem.tsx","./src/components/main/hotpriceslist/hotpricesitem/index.ts","./src/components/main/mainslider/mainslider.tsx","./src/components/main/mainslider/index.ts","./src/components/main/newmodelslist/newmodellist.tsx","./src/components/main/newmodelslist/index.ts","./src/components/main/newmodelslist/newmodelitem/newmodelitem.tsx","./src/components/main/newmodelslist/newmodelitem/index.ts","./src/components/onlymobile/aside/aside.tsx","./src/components/onlymobile/aside/index.ts","./src/components/onlymobile/aside/asidefooter/asidefooter.tsx","./src/components/onlymobile/aside/asidefooter/index.ts","./src/components/onlymobile/aside/asideheader/asideheader.tsx","./src/components/onlymobile/aside/asideheader/index.ts","./src/components/onlymobile/aside/asidenav/asidenav.tsx","./src/components/onlymobile/aside/asidenav/index.ts","./src/pages/mainpage/mainpage.tsx","./src/pages/mainpage/index.ts","./src/pages/notfoundpage/notfoundpage.tsx","./src/pages/notfoundpage/index.tsx"],"version":"5.6.2"}
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{"root":["./src/app.tsx","./src/root.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/app/reduxhooks.ts","./src/app/store.ts"],"version":"5.6.2"}
		{"root":["./src/app.tsx","./src/root.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/app/reduxhooks.ts","./src/app/store.ts","./src/components/footer/footer.tsx","./src/components/footer/index.ts","./src/components/footer/navfooter/navfooter.tsx","./src/components/footer/navfooter/index.ts","./src/components/header/header.tsx","./src/components/header/index.ts","./src/components/header/navheader/navheader.tsx","./src/components/header/navheader/index.ts","./src/components/main/main.tsx","./src/components/main/index.ts","./src/components/main/categorieslist/categorieslist.tsx","./src/components/main/categorieslist/index.ts","./src/components/main/categorieslist/categoriesitem/categoriesitem.tsx","./src/components/main/categorieslist/categoriesitem/index.ts","./src/components/main/hotpriceslist/hotpriceslist.tsx","./src/components/main/hotpriceslist/index.ts","./src/components/main/hotpriceslist/hotpricesitem/hotpricesitem.tsx","./src/components/main/hotpriceslist/hotpricesitem/index.ts","./src/components/main/mainslider/mainslider.tsx","./src/components/main/mainslider/index.ts","./src/components/main/newmodelslist/newmodellist.tsx","./src/components/main/newmodelslist/index.ts","./src/components/main/newmodelslist/newmodelitem/newmodelitem.tsx","./src/components/main/newmodelslist/newmodelitem/index.ts","./src/components/onlymobile/aside/aside.tsx","./src/components/onlymobile/aside/index.ts","./src/components/onlymobile/aside/asidefooter/asidefooter.tsx","./src/components/onlymobile/aside/asidefooter/index.ts","./src/components/onlymobile/aside/asideheader/asideheader.tsx","./src/components/onlymobile/aside/asideheader/index.ts","./src/components/onlymobile/aside/asidenav/asidenav.tsx","./src/components/onlymobile/aside/asidenav/index.ts","./src/pages/mainpage/mainpage.tsx","./src/pages/mainpage/index.ts","./src/pages/notfoundpage/notfoundpage.tsx","./src/pages/notfoundpage/index.tsx"],"version":"5.6.2"}