footer links
This commit is contained in:
parent
3057ec532e
commit
8002c195e1
|
|
@ -1,59 +1,39 @@
|
||||||
// Modules
|
// Modules
|
||||||
import { Link } from 'react-router-dom';
|
import { v4 as uuidv4 } from "uuid";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
// Icons
|
// Icons
|
||||||
import phone from '../../assets/icons/phone.svg';
|
import phone from "../../assets/icons/phone.svg";
|
||||||
import mail from '../../assets/icons/mail.svg';
|
import mail from "../../assets/icons/mail.svg";
|
||||||
import location from '../../assets/icons/location.svg';
|
import location from "../../assets/icons/location.svg";
|
||||||
import { ReactComponent as Instagram } from '../../assets/icons/insta-black.svg';
|
import { ReactComponent as Instagram } from "../../assets/icons/insta-black.svg";
|
||||||
import { ReactComponent as Facebook } from '../../assets/icons/fb-black.svg';
|
import { ReactComponent as Facebook } from "../../assets/icons/fb-black.svg";
|
||||||
import { ReactComponent as TikTok } from '../../assets/icons/tiktok-black.svg';
|
import { ReactComponent as TikTok } from "../../assets/icons/tiktok-black.svg";
|
||||||
|
|
||||||
|
// Types
|
||||||
|
import { RootState } from "../../types/store.types";
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import FooterListItem from "./FooterListItem";
|
||||||
|
|
||||||
const Footer = () => {
|
const Footer = () => {
|
||||||
|
const categories = useSelector<RootState, RootState["categories"]["data"]>(
|
||||||
|
(state) => state.categories.data
|
||||||
|
);
|
||||||
return (
|
return (
|
||||||
<footer className="footer">
|
<footer className="footer">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="footer-wrapper">
|
<div className="footer-wrapper">
|
||||||
<nav className="footer-nav">
|
<nav className="footer-nav">
|
||||||
<ul className="footer-nav-list">
|
<ul className="footer-nav-list">
|
||||||
<li className="footer-nav-list-item">
|
{categories.data[0].id > -1
|
||||||
<Link to="/">В Туркменистане</Link>
|
? categories.data.map((category) => (
|
||||||
</li>
|
<FooterListItem
|
||||||
<li className="footer-nav-list-item">
|
id={category.id}
|
||||||
<Link to="/">Политика</Link>
|
name={category.name}
|
||||||
</li>
|
key={uuidv4()}
|
||||||
<li className="footer-nav-list-item">
|
/>
|
||||||
<Link to="/">Общество</Link>
|
))
|
||||||
</li>
|
: ""}
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Статьи</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Культура</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Новости</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Экономика</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Наука и технологии</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Медиа</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">В мире</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Спорт</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Здоровье и медицина</Link>
|
|
||||||
</li>
|
|
||||||
<li className="footer-nav-list-item">
|
|
||||||
<Link to="/">Погода</Link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<div className="footer-info">
|
<div className="footer-info">
|
||||||
|
|
@ -61,7 +41,9 @@ const Footer = () => {
|
||||||
<div className="footer-info-item-icon">
|
<div className="footer-info-item-icon">
|
||||||
<img src={phone} alt="phone" />
|
<img src={phone} alt="phone" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="footer-info-item-title">+(993) 12 68-07-92, 94-08-01 </h3>
|
<h3 className="footer-info-item-title">
|
||||||
|
+(993) 12 68-07-92, 94-08-01{" "}
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-info-item">
|
<div className="footer-info-item">
|
||||||
<div className="footer-info-item-icon">
|
<div className="footer-info-item-icon">
|
||||||
|
|
@ -74,7 +56,8 @@ const Footer = () => {
|
||||||
<img src={location} alt="location" />
|
<img src={location} alt="location" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="footer-info-item-title">
|
<h3 className="footer-info-item-title">
|
||||||
115184, Ашхабад, Битарап шаелы, 25 (Центр телерадиовещания Туркменистана)
|
115184, Ашхабад, Битарап шаелы, 25 (Центр телерадиовещания
|
||||||
|
Туркменистана)
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -100,10 +83,14 @@ const Footer = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="footer-info-item">
|
<div className="footer-info-item">
|
||||||
<h3 className="footer-info-item-title">Реклама на ТВ и радио: (993) 12 78-13-99</h3>
|
<h3 className="footer-info-item-title">
|
||||||
|
Реклама на ТВ и радио: (993) 12 78-13-99
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="footer-info-item">
|
<div className="footer-info-item">
|
||||||
<h3 className="footer-info-item-title">Реклама на сайте: (993) 12 78-13-99</h3>
|
<h3 className="footer-info-item-title">
|
||||||
|
Реклама на сайте: (993) 12 78-13-99
|
||||||
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
// Modules
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
|
interface IProps {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const FooterListItem = ({ id, name }: IProps) => {
|
||||||
|
return (
|
||||||
|
<li className="footer-nav-list-item">
|
||||||
|
<Link to={`/category/${id}`}>{name}</Link>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FooterListItem;
|
||||||
Loading…
Reference in New Issue