nav list components

src/components/header/Nav.tsx

@@ -1,32 +1,30 @@
 // Modules
-import { Link } from "react-router-dom";
+import { Link } from 'react-router-dom';
+import { v4 as uuidv4 } from 'uuid';
+
+// Types
+import { navListDataType, navListItemType } from '../../types/header.types';
+
+const data: navListDataType = [
+  { title: 'Политика', path: '/category' },
+  { title: 'Экономика', path: '/category' },
+  { title: 'Общество', path: '/category' },
+  { title: 'Культура', path: '/category' },
+  { title: 'Спорт', path: '/category' },
+  { title: 'Технологии', path: '/category' },
+  { title: 'Экология', path: '/category' },
+];
 const Nav = () => {
   return (
     <div className="nav">
       <div className="container">
         <div className="nav-inner">
           <ul>
-            <li>
-              <Link to="/">Политика</Link>
-            </li>
-            <li>
-              <Link to="/">Экономика</Link>
-            </li>
-            <li>
-              <Link to="/">Общество</Link>
-            </li>
-            <li>
-              <Link to="/">Культура</Link>
-            </li>
-            <li>
-              <Link to="/">Спорт</Link>
-            </li>
-            <li>
-              <Link to="/">Технологии</Link>
-            </li>
-            <li>
-              <Link to="/">Экология</Link>
-            </li>
+            {data.map((dataItem: navListItemType) => (
+              <li key={uuidv4()}>
+                <Link to={dataItem.path}>{dataItem.title}</Link>
+              </li>
+            ))}
           </ul>
         </div>
       </div>

src/types/header.types.ts

@@ -0,0 +1,5 @@
+export interface navListItemType {
+  path: string;
+  title: string;
+}
+export type navListDataType = navListItemType[];