-
+ {phones.map(product => {
+ return (
+
diff --git a/src/pages/PhonesPage.tsx b/src/pages/PhonesPage.tsx
index 2084324d2a..f36ea64989 100644
--- a/src/pages/PhonesPage.tsx
+++ b/src/pages/PhonesPage.tsx
@@ -1,22 +1,20 @@
import { FC } from 'react';
import Breadcrumbs from './components/Breadcrumbs';
-import { ProductsList } from './components/ProductsList';
-import '../styles/blocks/phones-page.scss';
+// import { ProductsList } from './components/ProductsList';
+import '../styles/styles.scss';
export const PhonesPage: FC = () => {
const breadcrumbItems = [
{ text: 'Home', link: '/' },
- { text: 'Category', link: '/category' },
- { text: 'Subcategory', link: '/category/subcategory' },
- { text: 'Current Page', link: '/category/subcategory/current-page' },
+ { text: 'Phones', link: '/phones' },
];
return (
- 
+ ))}
+ Hot prices
-
+ {product}
+
+ );
+ })}
+
@@ -96,7 +124,13 @@ export const HomePage: FC = () => {
+ {products.map(product => (
+ */}
Brand new models
-
+ {product.value}
+
+ ))}
+
+
= ({ text, link }) => {
) : (
- {text}
+ <>
+
+ 
+ {text}
+
+
)}
);
diff --git a/src/pages/components/Breadcrumbs.tsx b/src/pages/components/Breadcrumbs.tsx
index 1624a6e667..ffa959a7a0 100644
--- a/src/pages/components/Breadcrumbs.tsx
+++ b/src/pages/components/Breadcrumbs.tsx
@@ -1,7 +1,7 @@
// Breadcrumbs.js
import { FC } from 'react';
import BreadcrumbItem from './BreadcrumbItem';
-import '../../styles/blocks/breadcrumb.scss';
+import '../../styles/styles.scss';
type Props = {
items: { text: string; link: string; }[],
diff --git a/src/pages/components/Footer.tsx b/src/pages/components/Footer.tsx
index 40e5331c38..b7b9b00929 100644
--- a/src/pages/components/Footer.tsx
+++ b/src/pages/components/Footer.tsx
@@ -1,5 +1,5 @@
import { FC } from 'react';
-import '../../styles/blocks/footer.scss';
+import '../../styles/styles.scss';
export const Footer: FC = () => {
return (
diff --git a/src/pages/components/Header.tsx b/src/pages/components/Header.tsx
index d3b9068d8a..86717af924 100644
--- a/src/pages/components/Header.tsx
+++ b/src/pages/components/Header.tsx
@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import { FC } from 'react';
-import '../../styles/blocks/header.scss';
+import '../../styles/styles.scss';
export const Header: FC = () => {
return (
diff --git a/src/pages/components/PreviewSlider.tsx b/src/pages/components/PreviewSlider.tsx
new file mode 100644
index 0000000000..fd50c9ad30
--- /dev/null
+++ b/src/pages/components/PreviewSlider.tsx
@@ -0,0 +1,129 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React, {
+ useState, useEffect, cloneElement, useRef,
+} from 'react';
+import classNames from 'classnames';
+import '../../styles/styles.scss';
+
+type Props = {
+ children: JSX.Element[];
+};
+
+const PICTURE_SIZE = 1040;
+const INTERVAL_DELAY = 5000;
+
+export const PreviewSlider: React.FC = ({ children }) => {
+ const [pages, setPages] = useState(children);
+ const [offset, setOffset] = useState(0);
+ const [activeIndex, setActiveIndex] = useState(0); // Track the active slide index
+
+ const intervalRef = useRef(null);
+
+ function handleLeftClick() {
+ setOffset((prevOffset) => {
+ const newOffset = prevOffset + PICTURE_SIZE;
+ const minOffset = -(PICTURE_SIZE * (pages.length - 1));
+
+ if (newOffset > 0) {
+ setActiveIndex(pages.length - 1); // Set activeIndex to the last slide index
+
+ return minOffset;
+ }
+
+ setActiveIndex((prevIndex) => Math.max(prevIndex - 1, 0)); // Decrease activeIndex
+
+ return newOffset;
+ });
+
+ resetInterval();
+ }
+
+ function handleRightClick() {
+ setOffset((prevOffset) => {
+ const newOffset = prevOffset - PICTURE_SIZE;
+
+ if (newOffset < -(PICTURE_SIZE * (pages.length - 1))) {
+ setActiveIndex(0); // Set activeIndex to the first slide index
+
+ return 0;
+ }
+
+ setActiveIndex((prevIndex) => Math.min(prevIndex + 1, pages.length - 1)); // Increase activeIndex
+
+ return newOffset;
+ });
+
+ resetInterval();
+ }
+
+ function resetInterval() {
+ if (intervalRef.current) {
+ clearInterval(intervalRef.current);
+ }
+
+ intervalRef.current = window.setInterval(() => {
+ handleRightClick();
+ }, INTERVAL_DELAY);
+ }
+
+ // Function to handle pagination clicks
+ function handlePaginationClick(index: number) {
+ setActiveIndex(index); // Set the active slide index
+ setOffset(-PICTURE_SIZE * index); // Set the offset to display the selected slide
+ resetInterval(); // Reset the interval to pause auto-scrolling on manual navigation
+ }
+
+ useEffect(() => {
+ resetInterval();
+ }, []);
+
+ useEffect(() => {
+ setPages((prev) => {
+ return prev.map((child) => {
+ return cloneElement(child, {
+ key: child.key,
+ style: {
+ transition: '500ms',
+ transform: `translateX(${offset}px)`,
+ },
+ });
+ });
+ });
+ }, [offset]);
+
+ return (
+ <>
+
+ = ({ product }) => {
return (
-
Mobile phones
-95 models
-
+
-
);
};
diff --git a/src/pages/ProductDetailsPage.tsx b/src/pages/ProductDetailsPage.tsx
new file mode 100644
index 0000000000..505182260b
--- /dev/null
+++ b/src/pages/ProductDetailsPage.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react';
+import Breadcrumbs from './components/Breadcrumbs';
+import '../styles/styles.scss';
+
+export const ProductDetailsPage: FC = () => {
+ const breadcrumbItems = [
+ { text: 'Home', link: '/' },
+ { text: 'Phones', link: '/phones' },
+ {
+ text: 'Apple iPhone 11 Pro Max 64GB Gold (iMT9G2FS/A)',
+ link: '/phones/product-datails-page',
+ },
+ ];
+
+ return (
+
+ );
+};
diff --git a/src/pages/components/BreadcrumbItem.tsx b/src/pages/components/BreadcrumbItem.tsx
index 8d962e4d07..4fa1882240 100644
--- a/src/pages/components/BreadcrumbItem.tsx
+++ b/src/pages/components/BreadcrumbItem.tsx
@@ -1,6 +1,6 @@
// BreadcrumbItem.js
import { FC } from 'react';
-import '../../styles/blocks/breadcrumb.scss';
+import '../../styles/styles.scss';
type Props = {
text: string,
@@ -15,7 +15,12 @@ const BreadcrumbItem: FCMobile phones
+95 models
+Sort by
+ Back
+
) : (
- {text}
+ <>
+
+
+ {text}
+
+
)}
);
diff --git a/src/pages/components/Breadcrumbs.tsx b/src/pages/components/Breadcrumbs.tsx
index 1624a6e667..ffa959a7a0 100644
--- a/src/pages/components/Breadcrumbs.tsx
+++ b/src/pages/components/Breadcrumbs.tsx
@@ -1,7 +1,7 @@
// Breadcrumbs.js
import { FC } from 'react';
import BreadcrumbItem from './BreadcrumbItem';
-import '../../styles/blocks/breadcrumb.scss';
+import '../../styles/styles.scss';
type Props = {
items: { text: string; link: string; }[],
diff --git a/src/pages/components/Footer.tsx b/src/pages/components/Footer.tsx
index 40e5331c38..b7b9b00929 100644
--- a/src/pages/components/Footer.tsx
+++ b/src/pages/components/Footer.tsx
@@ -1,5 +1,5 @@
import { FC } from 'react';
-import '../../styles/blocks/footer.scss';
+import '../../styles/styles.scss';
export const Footer: FC = () => {
return (
diff --git a/src/pages/components/Header.tsx b/src/pages/components/Header.tsx
index d3b9068d8a..86717af924 100644
--- a/src/pages/components/Header.tsx
+++ b/src/pages/components/Header.tsx
@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/anchor-is-valid */
import { FC } from 'react';
-import '../../styles/blocks/header.scss';
+import '../../styles/styles.scss';
export const Header: FC = () => {
return (
diff --git a/src/pages/components/PreviewSlider.tsx b/src/pages/components/PreviewSlider.tsx
new file mode 100644
index 0000000000..fd50c9ad30
--- /dev/null
+++ b/src/pages/components/PreviewSlider.tsx
@@ -0,0 +1,129 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
+/* eslint-disable @typescript-eslint/no-use-before-define */
+import React, {
+ useState, useEffect, cloneElement, useRef,
+} from 'react';
+import classNames from 'classnames';
+import '../../styles/styles.scss';
+
+type Props = {
+ children: JSX.Element[];
+};
+
+const PICTURE_SIZE = 1040;
+const INTERVAL_DELAY = 5000;
+
+export const PreviewSlider: React.FC
+
+
+
+ );
+};
diff --git a/src/pages/components/ProductCard.tsx b/src/pages/components/ProductCard.tsx
index 6804b9acac..fe4f887fec 100644
--- a/src/pages/components/ProductCard.tsx
+++ b/src/pages/components/ProductCard.tsx
@@ -1,16 +1,22 @@
import { FC } from 'react';
-import '../../styles/blocks/product-card.scss';
+import { Phone } from '../../types/Phone';
+import '../../styles/styles.scss';
-export const ProductCard: FC = () => {
+type Props = {
+ product: Phone;
+};
+
+export const ProductCard: FC{pages}
+
+ {pages.map((page, index) => (
+
+
+
= ({ children }) => {
+ const [products, setProducts] = useState([]);
+ const [offset, setOffset] = useState(0);
+
+ function handleLeftClick() {
+ setOffset((prevOffset) => {
+ const newOffset = prevOffset + PICTURE_SIZE;
+ const minOffset = 0;
+
+ if (newOffset > 0) {
+ return minOffset;
+ }
+
+ return newOffset;
+ });
+ }
+
+ function handleRightClick() {
+ setOffset((prevOffset) => {
+ const newOffset = prevOffset - PICTURE_SIZE;
+
+ if (newOffset < -((PICTURE_SIZE * products.length) - VISIBLE_SIZE_ROW)) {
+ return prevOffset;
+ }
+
+ return newOffset;
+ });
+ }
+
+ useEffect(() => {
+ setProducts((prev) => {
+ return prev.map((child) => {
+ return cloneElement(child, {
+ key: child.key,
+ style: {
+ transition: '500ms',
+ transform: `translateX(${offset}px)`,
+ },
+ });
+ });
+ });
+ }, [offset]);
+
+ useEffect(() => {
+ setProducts(children);
+ }, [children]);
+
return (
= ({ slides }) => {
- return (
- console.log('slide change')}
- onSwiper={(swiper) => console.log(swiper)}
- >
- {slides.map(slide => (
-
- 
-
- ))}
- ...
-
- );
-};
diff --git a/src/styles/blocks/breadcrumb.scss b/src/styles/blocks/breadcrumb.scss
index 2e8f1f7ab3..303098b446 100644
--- a/src/styles/blocks/breadcrumb.scss
+++ b/src/styles/blocks/breadcrumb.scss
@@ -1,6 +1,10 @@
.breadcrumb {
&__breadcrumb-list {
+ display: flex;
+ gap: 8px;
+ align-items: center;
list-style: none;
+ padding: 0;
}
&__breadcrumb-item {
@@ -8,7 +12,15 @@
}
.breadcrumb-item {
- &__link {
+ &__link {
+ height: 16px;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+ text-decoration: none;
+ color: var(--gray-secondary, #89939A);
+ font-family: Mont-SemiBold;
+ font-size: 12px;
}
}
diff --git a/src/styles/blocks/home-page.scss b/src/styles/blocks/home-page.scss
index dba2468307..9cced32293 100644
--- a/src/styles/blocks/home-page.scss
+++ b/src/styles/blocks/home-page.scss
@@ -1,5 +1,5 @@
.home-page {
- padding-inline: 152px;
+ @include pageMaxWidth;
&__preview-slider {
margin-bottom: 72px;
@@ -26,6 +26,7 @@
width: 32px;
background: #FFF;
border: 1px solid #B4BDC3;
+ cursor: pointer;
}
&__container {
@@ -39,11 +40,25 @@
}
}
+.picture {
+ display: flex;
+ overflow: hidden;
+}
+
.pagination {
text-align: center;
- &__link {
- text-decoration: none;
- padding-inline: 10px;
+ &__indicator {
+ cursor: pointer;
+ width: 15px;
+ height: 5px;
+ background-color: #B4BDC3;
+ border: #B4BDC3;
+ margin-inline: 5px;
+
+ &--active {
+ background-color: black;
+
+ }
}
}
diff --git a/src/styles/blocks/phones-page.scss b/src/styles/blocks/phones-page.scss
index 37279e3178..b7f9c9b31c 100644
--- a/src/styles/blocks/phones-page.scss
+++ b/src/styles/blocks/phones-page.scss
@@ -1,5 +1,9 @@
-.phone-page {
+.phones-page {
+ @include pageMaxWidth;
+ max-width: 1440px;
+ box-sizing: border-box;
padding-inline: 152px;
+ margin: auto;
&__title {
margin: 0;
margin-bottom: 8px;
diff --git a/src/styles/blocks/product-details-page.scss b/src/styles/blocks/product-details-page.scss
new file mode 100644
index 0000000000..8463e6e20d
--- /dev/null
+++ b/src/styles/blocks/product-details-page.scss
@@ -0,0 +1,4 @@
+.product-details-page {
+ @include pageMaxWidth;
+
+}
diff --git a/src/styles/blocks/products-list.scss b/src/styles/blocks/products-list.scss
index 7e203de5e6..fa510e490b 100644
--- a/src/styles/blocks/products-list.scss
+++ b/src/styles/blocks/products-list.scss
@@ -1,6 +1,10 @@
.products-list {
display: flex;
flex-wrap: wrap;
+ max-width: 1136px;
+
+ gap: 16px;
+ padding: 0;
&__item {
list-style: none;
}
diff --git a/src/styles/blocks/products-slider.scss b/src/styles/blocks/products-slider.scss
index 26639e766e..6e0e17e899 100644
--- a/src/styles/blocks/products-slider.scss
+++ b/src/styles/blocks/products-slider.scss
@@ -1,4 +1,30 @@
.products-slider {
- display: flex;
- gap: 16px;
+ // display: flex;
+ position: relative;
+
+ &__container-buttons {
+ display: flex;
+ gap: 16px;
+ position: absolute;
+ top: -60px;
+ left: 1054px;
+ z-index: 2;
+ }
+ &__buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border: 1px solid #E2E6E9;
+ background-color: #fff;
+ padding: 0;
+ cursor: pointer;
+ }
+ &__container-products {
+ display: flex;
+ // overflow: hidden;
+ width: 1136px;
+ gap: 16px;
+ }
}
diff --git a/src/styles/blocks/tablets-page.scss b/src/styles/blocks/tablets-page.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
new file mode 100644
index 0000000000..4d300d6a72
--- /dev/null
+++ b/src/styles/styles.scss
@@ -0,0 +1,12 @@
+@import './utils/mixins';
+
+@import './blocks/breadcrumb';
+@import './blocks/header';
+@import './blocks/home-page';
+@import './blocks/phones-page';
+@import './blocks/product-card';
+@import './blocks/product-details-page';
+@import './blocks/products-list';
+@import './blocks/products-slider';
+@import './blocks/tablets-page';
+@import './blocks/footer';
diff --git a/src/styles/utils/mixins.scss b/src/styles/utils/mixins.scss
new file mode 100644
index 0000000000..5f1f3904a9
--- /dev/null
+++ b/src/styles/utils/mixins.scss
@@ -0,0 +1,6 @@
+@mixin pageMaxWidth() {
+ max-width: 1440px;
+ box-sizing: border-box;
+ padding-inline: 152px;
+ margin: auto;
+}
diff --git a/src/types/Phone.ts b/src/types/Phone.ts
new file mode 100644
index 0000000000..671a5c742c
--- /dev/null
+++ b/src/types/Phone.ts
@@ -0,0 +1,13 @@
+export type Phone = {
+ age: number,
+ id: string,
+ type: string,
+ imageUrl: string,
+ name: string,
+ snippet: string,
+ price: number,
+ discount: number,
+ screen: string,
+ capacity: string,
+ ram: string
+};
diff --git a/src/utils/fetchClient.ts b/src/utils/fetchClient.ts
new file mode 100644
index 0000000000..36d4903405
--- /dev/null
+++ b/src/utils/fetchClient.ts
@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// eslint-disable-next-line max-len
+const BASE_URL = 'https://mate-academy.github.io/react_phone-catalog/api';
+
+// returns a promise resolved after a given delay
+function wait(delay: number) {
+ return new Promise(resolve => {
+ setTimeout(resolve, delay);
+ });
+}
+
+// To have autocompletion and avoid mistypes
+type RequestMethod = 'GET';
+
+function request(
+ url: string,
+ method: RequestMethod = 'GET',
+ data: any = null, // we can send any data to the server
+): Promise {
+ const options: RequestInit = { method };
+
+ if (data) {
+ // We add body and Content-Type only for the requests with data
+ options.body = JSON.stringify(data);
+ options.headers = {
+ 'Content-Type': 'application/json; charset=UTF-8',
+ };
+ }
+
+ // we wait for testing purpose to see loaders
+ return wait(300)
+ .then(() => fetch(BASE_URL + url, options))
+ .then(response => {
+ if (!response.ok) {
+ throw new Error(`${response.status} - ${response.statusText}`);
+ }
+
+ if (!response.headers.get('content-type')?.includes('application/json')) {
+ return new Error('Content-type is not supported');
+ }
+
+ return response.json();
+ });
+}
+
+export const client = {
+ get: (url: string) => request(url),
+};
- Apple iPhone Xs 64GB Silver (iMT9G2FS/A) + {/* Apple iPhone Xs 64GB Silver (iMT9G2FS/A) */} + {product.name}
$799
$899
diff --git a/src/pages/components/ProductsList.tsx b/src/pages/components/ProductsList.tsx index 6f94b23df0..ccc93e0bc2 100644 --- a/src/pages/components/ProductsList.tsx +++ b/src/pages/components/ProductsList.tsx @@ -1,24 +1,24 @@ import { FC } from 'react'; -import { ProductCard } from './ProductCard'; -import '../../styles/blocks/products-list.scss'; +// import { ProductCard } from './ProductCard'; +import '../../styles/styles.scss'; export const ProductsList: FC = () => { return (-
-
+ {/* */} -
-
+ {/* */} -
-
+ {/* */} -
-
+ {/* */} -
-
+ {/* */}
-
);
};
diff --git a/src/pages/components/Slider.tsx b/src/pages/components/Slider.tsx
deleted file mode 100644
index 18794f5fc9..0000000000
--- a/src/pages/components/Slider.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-/* eslint-disable no-console */
-import { FC } from 'react';
-
-import { Swiper, SwiperSlide } from 'swiper/react';
-// import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
-
-import 'swiper/swiper.min.css';
-
-export type Product = {
- age: number,
- id: string,
- type: string,
- imageUrl: string,
- name: string,
- snippet: string,
- price: number,
- discount: number,
- screen: string,
- capacity: string,
- ram: string
-};
-
-type Props = {
- slides: Product[];
-};
-
-export const Slider: FC
+
+
+
+
+ {products.map(product => {
+ return (
+
+
+ );
+ })}
+