feat: change Recipe title to new TitleArrowLink component

healthy-food-and-dietary-products · Dec 25, 2023 · 8433939 · 8433939
1 parent 41195c9
commit 8433939
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 10 deletions.
diff --git a/src/components/our-block/index.tsx b/src/components/our-block/index.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import TopicCard from '@components/topic-card';
+import TitleArrowLink from '@components/title-arrow-link';
 import styles from './our-block.module.scss';
 import api from '@services/api';
 import type { Recipe } from '@services/generated-api/data-contracts';
@@ -13,7 +14,9 @@ const OurBlock: React.FC = () => {
 
 	return (
 		<div className={styles['our-blog']}>
-			<h2 className={styles['our-blog__title']}>Рецепты</h2>
+			<div className={styles.link}>
+				<TitleArrowLink title="Рецепты" link="/recipes/" />
+			</div>
 			<div className={styles['our-blog__topic-list']}>
 				{recipes.map((recipe) => {
 					return <TopicCard key={recipe.id} recipe={recipe} />;

diff --git a/src/components/our-block/our-block.module.scss b/src/components/our-block/our-block.module.scss
@@ -5,24 +5,18 @@
 	width: 100%;
 }
 
-.our-blog__title {
-	color: var(--active, #1a1a1a);
-	font-family: $ubuntu-font;
-	font-size: 30px;
-	font-style: normal;
-	font-weight: 700;
-	line-height: 140%;
+.link {
+	padding-bottom: 28px;
 
 	@media screen and (width <= 768px) {
-		font-size: 24px;
+		padding-bottom: 8px;
 	}
 }
 
 .our-blog__topic-list {
 	display: flex;
 	justify-content: center;
 	gap: 20px;
-	margin-top: 21px;
 	width: 100%;
 	overflow-x: auto;