feat: add status tracker component

src/components/order-status-tracker/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import styles from './order-status-tracker.module.scss';
+import donePath from '@images/circle-ok-min.svg';
+import packagingPath from '@images/cart-add-min.svg';
+import deliveringPath from '@images/car-alt-min.svg';
+import deliveredPath from '@images/home-alt-min.svg';
+
+const OrderStatusTracker: React.FC = () => {
+	return (
+		<ul className={styles.orderStatusTracker}>
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={donePath}
+					alt="Заказ принят"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Заказ принят</p>
+			</li>
+			<li className={styles.orderStatusTracker__spacer} />
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={packagingPath}
+					alt="Сборка заказа"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Сборка заказа</p>
+			</li>
+			<li className={styles.orderStatusTracker__spacer} />
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={deliveringPath}
+					alt="Передан в доставку"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Передан в доставку</p>
+			</li>
+			<li className={styles.orderStatusTracker__spacer} />
+			<li className={styles.orderStatusTracker__item}>
+				<img
+					src={deliveredPath}
+					alt="Успешно доставлено"
+					className={styles.orderStatusTracker__icon}
+				/>
+				<p className={styles.orderStatusTracker__status}>Успешно доставлено</p>
+			</li>
+		</ul>
+	);
+};
+
+export default OrderStatusTracker;

src/components/order-status-tracker/order-status-tracker.module.scss

@@ -0,0 +1,72 @@
+@use '@scss/mixins' as *;
+@use '@scss/variables' as *;
+
+.orderStatusTracker {
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+	font-family: $ubuntu-font;
+	gap: 16px;
+	font-size: 20px;
+	font-weight: 400;
+	line-height: 140%;
+
+	@media screen and (width <= 1024px) {
+		font-size: 14px;
+	}
+
+	@media screen and (width <= 768px) {
+		font-size: 14px;
+		flex-direction: column;
+		gap: 8px;
+	}
+}
+
+.orderStatusTracker__item {
+	max-width: 120px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	align-items: center;
+	text-align: center;
+
+	@media screen and (width <= 1024px) {
+		max-width: 80px;
+	}
+
+	@media screen and (width <= 768px) {
+		flex-direction: row;
+		gap: 16px;
+		max-width: 100%;
+	}
+}
+
+.orderStatusTracker__icon {
+	width: 80px;
+	aspect-ratio: 1;
+
+	@media screen and (width <= 1024px) {
+		width: 60px;
+	}
+
+	@media screen and (width <= 768px) {
+		width: 40px;
+	}
+}
+
+.orderStatusTracker__status {
+	padding: 0;
+	margin: 0;
+}
+
+.orderStatusTracker__spacer {
+	background: no-repeat center url('/src/assets/images/spacer-min.svg');
+	width: 64px;
+
+	@media screen and (width <= 768px) {
+		background: no-repeat center url('/src/assets/images/vspacer-min.svg');
+		width: 40px;
+		height: 20px;
+	}
+}

src/pages/checkout/checkout-success/checkout-success.module.scss

@@ -14,18 +14,18 @@
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
+	align-items: center;
 
 	@media screen and (width <= 768px) {
+		align-items: stretch;
 		padding: 40px 20px;
 	}
 }
 
 .checkoutSuccess__title {
-	align-self: center;
 	padding: 0 0 38px;
 
 	@media screen and (width <= 768px) {
-		align-self: stretch;
 		text-align: left;
 		padding: 0 0 20px;
 		font-size: 24px;
@@ -35,15 +35,13 @@
 .checkoutSuccess__paragraph {
 	padding: 0 0 74px;
 	margin: 0;
-	align-self: center;
 	text-align: center;
 	font-size: 22px;
 	font-weight: 400;
 	line-height: 140%;
 
 	@media screen and (width <= 768px) {
 		padding: 0 0 32px;
-		align-self: stretch;
 		text-align: left;
 		font-size: 14px;
 	}

src/pages/checkout/checkout-success/index.tsx

@@ -3,6 +3,7 @@ import { useLocation } from 'react-router';
 import styles from './checkout-success.module.scss';
 import OurBlock from '@components/our-block';
 import { Link } from 'react-router-dom';
+import OrderStatusTracker from '@components/order-status-tracker';
 
 const CheckoutSuccess: React.FC = () => {
 	// TODO: Add check for active order and redirect
@@ -24,12 +25,11 @@ const CheckoutSuccess: React.FC = () => {
 					Мы уже приступили к его сборке. <br />
 					За статусом заказа можно следить в{' '}
 					<Link className={styles.checkoutSuccess__link} to="/profile">
-						{' '}
 						личном кабинете
 					</Link>
 					.
 				</p>
-				<div>{/* // TODO: Component "Order Tracker" */}</div>
+				<OrderStatusTracker />
 			</section>
 			<section className={styles.checkoutSuccess__ourBlock}>
 				<p className={styles.checkoutSuccess__advice}>