refactor: create article model

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>
   );
 }