refactor: create article model

src/feature/article/consultation/ui.tsx

@@ -1,9 +1,11 @@
 import s from './styles.module.scss';
 import { Button, Input, PhoneInput } from '@shared/ui';
 import Image from 'next/image';
-import expertPhoto from '@public/images/photo/yancen-yana.png';
+import { TExpert } from '@core/types/expert';
 
-function Consultation() {
+type ConsultationProps = TExpert;
+
+function Consultation({ name, position, photo }: ConsultationProps) {
   return (
     <section className={s.Consultation}>
       <div className={s.Container}>
@@ -22,9 +24,9 @@ function Consultation() {
           </form>
         </div>
         <div className={s.Sidebar}>
-          <Image src={expertPhoto} alt={'Автоэксперт - Янцен Яна'} />
-          <p className={s.Title}>Янцен Яна</p>
-          <p className={s.Description}>Автоэксперт</p>
+          <Image src={photo} alt={`${position} - ${name}`} />
+          <p className={s.Title}>{name}</p>
+          <p className={s.Description}>{position}</p>
         </div>
       </div>
     </section>

src/feature/article/related-articles/ui.tsx

@@ -1,7 +1,13 @@
 import s from './styles.module.scss';
+import Link from 'next/link';
+import { TRelatedArticles } from '@core/types/relatedArticles';
 import { CallbackForm } from '@/entities';
 
-function RelatedArticles() {
+type RelatedArticlesProps = {
+  related: TRelatedArticles[];
+};
+
+function RelatedArticles({ related }: RelatedArticlesProps) {
   return (
     <section className={s.Related}>
       <div className={s.Container}>
@@ -10,42 +16,16 @@ function RelatedArticles() {
             Похожие услуги, которые возможно Вас заинтересуют
           </h3>
           <div className={s.Grid}>
-            <div className={s.Promo}>
-              <h4 className={s.Title}>Трасологическая экспертиза</h4>
-              <p className={s.Description}>
-                Эксперты нашей компании быстро и точно восстановят картину
-                происшествия и дадут профессиональную оценку ситуации. Также во
-                время трасологической экспертизы изучаются имеющиеся повреждения
-                и следы на месте…
-              </p>
-            </div>
-            <div className={s.Promo}>
-              <h4 className={s.Title}>Товароведческая экспертиза</h4>
-              <p className={s.Description}>
-                Судебная экспертиза товаров должна проводиться только
-                специалистом, получившим узкопрофильную квалификацию. Если Вам
-                необходима товароведческая экспертиза и для суда, мы готовы
-                подробно исследовать любой товар. Результат работы…
-              </p>
-            </div>
-            <div className={s.Promo}>
-              <h4 className={s.Title}>Оценочная экспертиза</h4>
-              <p className={s.Description}>
-                Судебная оценочная (стоимостная) экспертиза представляет собой
-                вид экспертизы, главной задачей которой является определение
-                рыночной стоимости объектов оценки…
-              </p>
-            </div>
-            <div className={s.Promo}>
-              <h4 className={s.Title}>Рецензия (Проверка) экспертизы</h4>
-              <p className={s.Description}>
-                Необходимость в составлении рецензии на судебную экспертизу
-                появляется в ситуациях, когда выводы заключения являются не
-                обоснованными, а квалификация и опыт эксперта не вызывают
-                доверия. В ходе рецензирования экспертное заключение
-                проверяется…
-              </p>
-            </div>
+            {related.map(({ title, description, link }, index) => (
+              <div key={index} className={s.Block}>
+                <h4 className={s.Title}>
+                  <Link href={link}>{title}</Link>
+                </h4>
+                <p className={s.Description}>
+                  <Link href={link}>{description}</Link>
+                </p>
+              </div>
+            ))}
           </div>
           <CallbackForm pageName='Автотехническая экспертиза' />
         </div>

src/feature/article/sidebar/ui.tsx

@@ -1,12 +1,22 @@
 import s from './styles.module.scss';
+import Link from 'next/link';
 import { Button } from '@shared/ui';
+import { TSidebar } from '@core/types/sidebar';
 
-function Sidebar() {
+type SidebarProps = TSidebar;
+
+function Sidebar({
+  estimate = '3',
+  relatedTitle,
+  related,
+  warrantiesTitle,
+  warranties,
+}: SidebarProps) {
   return (
     <div className={s.Sidebar}>
       <div className={s.Estimation}>
         <h4 className={s.Title}>Срок выполнения:</h4>
-        <p className={s.Estimate}>от 3 дней</p>
+        <p className={s.Estimate}>от {estimate} дней</p>
         <p className={s.Text}>
           Наш эксперт свяжется с вами для уточнения обстоятельств дела и
           определения точной стоимости.
@@ -15,31 +25,30 @@ function Sidebar() {
         <Button variant={'white'}>Записаться</Button>
         <p className={s.Phone}>+7 (900) 241-34-34</p>
       </div>
-      <div className={s.Related}>
-        <h4 className={s.Title}>Сопутствующие экспертизы</h4>
-        <ul className={s.List}>
-          <li className={s.ListItem}>Трасологическая</li>
-          <li className={s.ListItem}>Оценочная</li>
-          <li className={s.ListItem}>Товароведческая</li>
-          <li className={s.ListItem}>Рецензирование (проверка)</li>
-        </ul>
-      </div>
-      <div className={s.Warranties}>
-        <h4 className={s.Title}>Наши гарантии</h4>
-        <ul className={s.List}>
-          <li className={s.ListItem}>
-            Эксперты компании являются членами Саморегулируемой организации
-            судебных экспертов
-          </li>
-          <li className={s.ListItem}>
-            Деятельность компании застрахована на 60 000 000 рублей
-          </li>
-          <li className={s.ListItem}>
-            Экспертизы выполняются в соответствии с Федеральными
-            Законодательными Актами
-          </li>
-        </ul>
-      </div>
+      {related && (
+        <div className={s.Related}>
+          <h4 className={s.Title}>{relatedTitle}</h4>
+          <ul className={s.List}>
+            {related?.map(({ title, link }, index) => (
+              <li key={index} className={s.ListItem}>
+                <Link href={link}>{title}</Link>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+      {warranties && (
+        <div className={s.Warranties}>
+          <h4 className={s.Title}>{warrantiesTitle}</h4>
+          <ul className={s.List}>
+            {warranties.map((warranty, index) => (
+              <li key={index} className={s.ListItem}>
+                {warranty}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
     </div>
   );
 }