project erased
This commit is contained in:
parent
05fe4900a3
commit
30c4f76a85
|
|
@ -29,7 +29,7 @@
|
|||
"@types/react-dom": "^18.0.9",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
"vite": "^4.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@ampproject/remapping": {
|
||||
|
|
|
|||
|
|
@ -30,6 +30,6 @@
|
|||
"@types/react-dom": "^18.0.9",
|
||||
"@vitejs/plugin-react": "^3.0.0",
|
||||
"typescript": "^4.9.3",
|
||||
"vite": "^4.0.0"
|
||||
"vite": "^4.0.4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
20
src/App.tsx
20
src/App.tsx
|
|
@ -1,30 +1,20 @@
|
|||
// Modules
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
// Styles
|
||||
import 'react-lazy-load-image-component/src/effects/blur.css';
|
||||
import 'react-calendar/dist/Calendar.css';
|
||||
import './styles/style.scss';
|
||||
import "react-lazy-load-image-component/src/effects/blur.css";
|
||||
import "react-calendar/dist/Calendar.css";
|
||||
import "./styles/style.scss";
|
||||
|
||||
// Pages
|
||||
import Main from './pages/Main';
|
||||
import News from './pages/News';
|
||||
|
||||
// Static
|
||||
import Header from './components/header/Header';
|
||||
import Footer from './components/footer/Footer';
|
||||
import Video from './components/video/Video';
|
||||
import Main from "./pages/Main";
|
||||
|
||||
const App = () => {
|
||||
return (
|
||||
<div className="App">
|
||||
<Header />
|
||||
<Routes>
|
||||
<Route path="/" element={<Main />} />
|
||||
<Route path="/news/:id" element={<News />} />
|
||||
</Routes>
|
||||
<Video />
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,20 +0,0 @@
|
|||
export const searchFormAnimation: Record<
|
||||
string,
|
||||
Record<string, string | number | Record<string, string | number>>
|
||||
> = {
|
||||
rest: {
|
||||
opacity: 1,
|
||||
duration: 0.2,
|
||||
type: 'tween',
|
||||
x: 0,
|
||||
},
|
||||
|
||||
hover: {
|
||||
y: -10,
|
||||
opacity: 0,
|
||||
transition: {
|
||||
duration: 0.1,
|
||||
type: 'spring',
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
export const videoArrowMotion: Record<
|
||||
string,
|
||||
Record<string, string | number | Record<string, string | number>>
|
||||
> = {
|
||||
rest: {
|
||||
duration: 0.3,
|
||||
type: "spring",
|
||||
x: 0,
|
||||
},
|
||||
|
||||
hover: {
|
||||
x: 10,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
type: "tween",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
// Modules
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
category: string;
|
||||
}
|
||||
|
||||
const AsideItem = ({ title, category }: Props) => {
|
||||
return (
|
||||
<Link to="/news/1" className="aside-item">
|
||||
<h3 className="aside-item-category">{category}</h3>
|
||||
<h2 className="aside-item-title">{title}</h2>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default AsideItem;
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
// Modules
|
||||
import { useState } from 'react';
|
||||
import { Calendar as ReactCalendar } from 'react-calendar';
|
||||
import { LazyLoadComponent } from 'react-lazy-load-image-component';
|
||||
|
||||
const Calendar = () => {
|
||||
const [value, onChange] = useState(new Date());
|
||||
return (
|
||||
<div className="calendar">
|
||||
<LazyLoadComponent useIntersectionObserver delayTime={5000}>
|
||||
<ReactCalendar value={value} onChange={onChange} />
|
||||
</LazyLoadComponent>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Calendar;
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
// Modules
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// Icons
|
||||
import { ReactComponent as Phone } from '../../assets/icons/phone-white.svg';
|
||||
import { ReactComponent as Mail } from '../../assets/icons/mail-white.svg';
|
||||
import { ReactComponent as Navigation } from '../../assets/icons/navigation-white.svg';
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="footer">
|
||||
<div className="container">
|
||||
<div className="footer-inner">
|
||||
<div className="footer-left">
|
||||
<ul>
|
||||
<li>
|
||||
<Link to="/">Главная</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/">Реклама на сайте</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/">О нас</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-mid">
|
||||
<ul className="footer-list">
|
||||
<li className="footer-list-item">
|
||||
<Phone />
|
||||
<a href="tel: +99312680792">(993) 12 68-07-92, 94-08-01</a>
|
||||
</li>
|
||||
<li className="footer-list-item">
|
||||
<Mail />
|
||||
<a href="mailto: turkmen@info.tm">turkmen@info.tm</a>
|
||||
</li>
|
||||
<li className="footer-list-item">
|
||||
<Navigation />
|
||||
<ul className="footer-list-inner">
|
||||
<li>
|
||||
<p>
|
||||
115184, Ашхабад, Битарап шаелы, 25 <br /> (Центр телерадиовещания
|
||||
Туркменистана)
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<a href="tel: +99312781399">Реклама на ТВ и радио: (993) 12 78-13-99</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="tel: +99312781399">Реклама на сайте: (993) 12 78-13-99</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="footer-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
// Modules
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
// Components
|
||||
import SectionTitle from './SectionTitle';
|
||||
import AsideItem from '../aside/AsideItem';
|
||||
import Calendar from '../aside/Calendar';
|
||||
|
||||
// Icons
|
||||
import { ReactComponent as ArrowDownBlue } from '../../assets/icons/arrow-down-blue.svg';
|
||||
|
||||
interface AsideDataType {
|
||||
title: string;
|
||||
category: string;
|
||||
}
|
||||
const asideData: AsideDataType[] = [
|
||||
{
|
||||
title:
|
||||
'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»',
|
||||
category: 'Политика',
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»',
|
||||
category: 'Политика',
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»',
|
||||
category: 'Политика',
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»',
|
||||
category: 'Политика',
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»',
|
||||
category: 'Политика',
|
||||
},
|
||||
{
|
||||
title:
|
||||
'Государственному объединению «Türkmen atlary» разрешено заключить дополнительное соглашение с ИП «Röwşen»',
|
||||
category: 'Политика',
|
||||
},
|
||||
];
|
||||
|
||||
const buttonMotion = {
|
||||
rest: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0)',
|
||||
color: '#2368ad',
|
||||
duration: 0.4,
|
||||
type: 'tween',
|
||||
},
|
||||
hover: {
|
||||
backgroundColor: '#2368ad',
|
||||
color: '#ffffff',
|
||||
duration: 0.4,
|
||||
type: 'spring',
|
||||
},
|
||||
};
|
||||
|
||||
const arrowMotion = {
|
||||
rest: {
|
||||
fill: '#2368ad',
|
||||
transform: 'rotateX(0%)',
|
||||
duration: 0.4,
|
||||
type: 'tween',
|
||||
},
|
||||
hover: {
|
||||
fill: '#ffffff',
|
||||
transform: 'rotateX(180%)',
|
||||
duration: 0.4,
|
||||
type: 'spring',
|
||||
},
|
||||
};
|
||||
|
||||
const Aside = () => {
|
||||
return (
|
||||
<aside className="aside">
|
||||
<SectionTitle title="Самое читаемое" />
|
||||
<div className="aside-scroll">
|
||||
{asideData.map((asideScrollItem: AsideDataType) => {
|
||||
return (
|
||||
<AsideItem
|
||||
key={uuidv4()}
|
||||
title={asideScrollItem.title}
|
||||
category={asideScrollItem.category}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<motion.button
|
||||
className="aside-btn"
|
||||
type="button"
|
||||
initial={buttonMotion.rest}
|
||||
whileHover={buttonMotion.hover}>
|
||||
<span>Открыть полностью</span>
|
||||
<motion.div initial={'rest'} variants={arrowMotion}>
|
||||
<ArrowDownBlue />
|
||||
</motion.div>
|
||||
</motion.button>
|
||||
<Calendar />
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default Aside;
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
interface Props {
|
||||
title: string;
|
||||
}
|
||||
|
||||
const SectionTitle = ({ title }: Props) => {
|
||||
return <h1 className="title">{title}</h1>;
|
||||
};
|
||||
|
||||
export default SectionTitle;
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
// Modules
|
||||
import { useState, useEffect } from 'react';
|
||||
|
||||
// Helpers
|
||||
import { clockParser, dateParser } from '../../helpers/dates';
|
||||
|
||||
const ClockDate = () => {
|
||||
const [date, setDate] = useState<Date>(new Date());
|
||||
useEffect(() => {
|
||||
setInterval(() => setDate(new Date()), 5000);
|
||||
}, []);
|
||||
return (
|
||||
<div id="time">
|
||||
<span className="time">{clockParser(date)}</span>
|
||||
<span className="date">{dateParser(date)}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ClockDate;
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// Components
|
||||
import SupHeader from './SupHeader';
|
||||
import Nav from './Nav';
|
||||
import SubHeader from './SubHeader';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="header">
|
||||
<SupHeader />
|
||||
<SubHeader />
|
||||
<Nav />
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// Modules
|
||||
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 (
|
||||
<nav className="nav">
|
||||
<div className="container">
|
||||
<div className="nav-inner">
|
||||
<ul>
|
||||
{data.map((dataItem: navListItemType) => (
|
||||
<li key={uuidv4()}>
|
||||
<Link to={dataItem.path}>{dataItem.title}</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default Nav;
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
// Modules
|
||||
import { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
// Icons
|
||||
import { ReactComponent as LoopGray } from '../../assets/icons/loop-gray.svg';
|
||||
|
||||
// Animations
|
||||
import { searchFormAnimation } from '../../animations/header.animations';
|
||||
|
||||
const SearchForm = () => {
|
||||
const [input, setInput] = useState<string>('');
|
||||
return (
|
||||
<motion.div className="search-wrapper">
|
||||
<form
|
||||
onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
}}>
|
||||
<motion.div
|
||||
initial={'rest'}
|
||||
animate={input.length > 0 ? searchFormAnimation.hover : searchFormAnimation.rest}>
|
||||
<LoopGray />
|
||||
<span>Search anything</span>
|
||||
</motion.div>
|
||||
<input
|
||||
type="text"
|
||||
value={input}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value)}
|
||||
/>
|
||||
</form>
|
||||
</motion.div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchForm;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
// Modules
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
// Images
|
||||
import Logo from '../../assets/images/logo.png';
|
||||
|
||||
// Icons
|
||||
import { ReactComponent as ArrowDownBlack } from '../../assets/icons/arrow-down-black.svg';
|
||||
|
||||
// Components
|
||||
import SearchForm from './SearchForm';
|
||||
import ClockDate from './ClockDate';
|
||||
|
||||
const SubHeader = () => {
|
||||
return (
|
||||
<div className="subheader">
|
||||
<div className="container">
|
||||
<div className="subheader-inner">
|
||||
<ul className="subheader-left">
|
||||
<li>
|
||||
<ClockDate />
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/">Туркменистан</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/">СНГ</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link to="/">Зарубежье</Link>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="subheader-mid">
|
||||
<img src={Logo} alt="" />
|
||||
</div>
|
||||
<div className="subheader-right">
|
||||
<div className="language-wrapper">
|
||||
<div className="language-trig">
|
||||
<span>EN</span>
|
||||
<div>
|
||||
<ArrowDownBlack />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<SearchForm />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubHeader;
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
// Modules
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// Images
|
||||
import Logo from "../../assets/images/sup-header.png";
|
||||
|
||||
const SupHeader = () => {
|
||||
return (
|
||||
<div className="supheader">
|
||||
<div className="container">
|
||||
<div className="supheader-inner">
|
||||
<h1>
|
||||
<Link to="/">Halkara Habarlar Merkezi</Link>
|
||||
</h1>
|
||||
<div className="supheader-logo">
|
||||
<img src={Logo} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupHeader;
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
// Modules
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component';
|
||||
|
||||
// Images
|
||||
import News from '../../assets/images/news.png';
|
||||
|
||||
const NewsItem = () => {
|
||||
return (
|
||||
<section className="news-item">
|
||||
<div className="news-head">
|
||||
<div className="news-head-top">
|
||||
<h4>СПОРТ</h4>
|
||||
<p>15:23, 21 января 2023</p>
|
||||
</div>
|
||||
<h1 className="news-head-bottom">
|
||||
В федерации футбола Туркменистана подвели итоги прошедшего года и наметили курс на 2023
|
||||
год
|
||||
</h1>
|
||||
</div>
|
||||
<div className="news-img">
|
||||
<LazyLoadImage src={News} effect="blur" useIntersectionObserver />
|
||||
</div>
|
||||
<div className="news-content">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
|
||||
autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
|
||||
nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
|
||||
exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
|
||||
corrupti impedit at molestias vitae distinctio.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
|
||||
earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
|
||||
aut ducimus eaque eum cupiditate?
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
|
||||
autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
|
||||
nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
|
||||
exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
|
||||
corrupti impedit at molestias vitae distinctio.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
|
||||
earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
|
||||
aut ducimus eaque eum cupiditate?
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident enim laborum nobis
|
||||
autem omnis tempora? Optio, exercitationem quo molestias inventore sequi reprehenderit
|
||||
nostrum error neque eius repellat dolor odit impedit maxime, ratione mollitia? Suscipit
|
||||
exercitationem temporibus provident id sit expedita corporis recusandae iusto! Recusandae
|
||||
corrupti impedit at molestias vitae distinctio.
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptate ea tempore recusandae
|
||||
earum eveniet nemo voluptatem placeat eligendi iure reiciendis odio, sunt, nobis harum a
|
||||
aut ducimus eaque eum cupiditate?
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewsItem;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
// Modules
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { Link } from "react-router-dom";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
// Components
|
||||
import VideoItem from "./VideoItem";
|
||||
|
||||
// Images
|
||||
import VideoItemImg from "../../assets/images/video-item.jpg";
|
||||
|
||||
// Icons
|
||||
import { ReactComponent as ArrowRightWhite } from "../../assets/icons/arrow-right-white.svg";
|
||||
|
||||
// Animations
|
||||
import { videoArrowMotion } from "../../animations/video.animations";
|
||||
|
||||
const Video = () => {
|
||||
const date = "11.01.2023";
|
||||
const title = "В Туркменистане отметили Новый год";
|
||||
const data = [
|
||||
{ date, title, img: VideoItemImg },
|
||||
{ date, title, img: VideoItemImg },
|
||||
{ date, title, img: VideoItemImg },
|
||||
{ date, title, img: VideoItemImg },
|
||||
];
|
||||
return (
|
||||
<section className="video">
|
||||
<div className="container">
|
||||
<div className="video-inner">
|
||||
<h2>Видео</h2>
|
||||
<div className="video-wrapper">
|
||||
{data.map((dataItem: Record<string, string>) => {
|
||||
return (
|
||||
<VideoItem
|
||||
key={uuidv4()}
|
||||
img={dataItem.img}
|
||||
date={dataItem.date}
|
||||
title={dataItem.title}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<Link to="/videos" className="video-link">
|
||||
<motion.div initial={"rest"} whileHover={"hover"} className="inner">
|
||||
<span>Показать все видео</span>
|
||||
<motion.div className="arrow-div" variants={videoArrowMotion}>
|
||||
<ArrowRightWhite />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Video;
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// Modules
|
||||
import { LazyLoadImage } from "react-lazy-load-image-component";
|
||||
|
||||
// Types
|
||||
import { videoItemType } from "../../types/video.types";
|
||||
|
||||
const VideoItem = ({ img, date, title }: videoItemType) => {
|
||||
return (
|
||||
<div className="video-item">
|
||||
<div className="video-item-top">
|
||||
<div className="video-img">
|
||||
<LazyLoadImage src={img} effect="blur" useIntersectionObserver />
|
||||
</div>
|
||||
</div>
|
||||
<div className="video-item-bottom">
|
||||
<span>{date}</span>
|
||||
<h5>{title}</h5>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default VideoItem;
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
export const clockParser = (date: Date) => {
|
||||
return date
|
||||
.toLocaleDateString('en-GB', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})
|
||||
.split(' ')[1];
|
||||
};
|
||||
|
||||
export const dateParser = (date: Date) => {
|
||||
return date.toLocaleDateString('ru', {
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
// Modules
|
||||
import { useParams } from 'react-router-dom';
|
||||
|
||||
// Components
|
||||
import NewsItem from '../components/news/NewsItem';
|
||||
import Aside from '../components/global/Aside';
|
||||
|
||||
const News = () => {
|
||||
const { id } = useParams<string>();
|
||||
console.log(`News id: ${id}`);
|
||||
return (
|
||||
<main className="news">
|
||||
<div className="container">
|
||||
<div className="news-inner">
|
||||
<NewsItem />
|
||||
<Aside />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default News;
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
.title {
|
||||
font-size: 2.4rem;
|
||||
color: $main;
|
||||
border-bottom: 0.1rem solid $main;
|
||||
padding: 0.8rem 2.4rem;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
left: 0;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.aside-scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.aside-item {
|
||||
padding: 0 0 1.6rem 0;
|
||||
display: flex;
|
||||
gap: 0.8rem;
|
||||
flex-direction: column;
|
||||
border-bottom: 0.1px solid $border-gray;
|
||||
}
|
||||
|
||||
.aside-item-title {
|
||||
font-size: 1.4rem;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.aside-item-category {
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.aside-btn {
|
||||
cursor: pointer;
|
||||
color: $main;
|
||||
border: 0.1rem $main solid;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.8rem;
|
||||
font-size: 1.4rem;
|
||||
|
||||
svg {
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,97 +0,0 @@
|
|||
.calendar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.react-calendar__navigation__label {
|
||||
font-weight: bold;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.react-calendar__navigation__arrow.react-calendar__navigation__next2-button,
|
||||
.react-calendar__navigation__arrow.react-calendar__navigation__prev2-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.react-calendar__navigation__label__labelText.react-calendar__navigation__label__labelText--from {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.react-calendar {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.react-calendar__month-view__weekdays {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
column-gap: 2.4rem;
|
||||
}
|
||||
.react-calendar__month-view__weekdays__weekday {
|
||||
text-transform: capitalize;
|
||||
color: $main;
|
||||
font-size: 1.6rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1.6rem;
|
||||
}
|
||||
|
||||
.react-calendar__tile.react-calendar__month-view__days__day {
|
||||
font-size: 1.6rem;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.react-calendar__tile.react-calendar__month-view__days__day.react-calendar__month-view__days__day--neighboringMonth {
|
||||
color: $dark-gray;
|
||||
}
|
||||
|
||||
.react-calendar__tile--active {
|
||||
// background: $red;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.react-calendar__month-view__days__day--weekend {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.react-calendar__month-view__days {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
column-gap: 2.4rem;
|
||||
row-gap: 1.1rem;
|
||||
}
|
||||
|
||||
.react-calendar__tile {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
padding: 0.8rem;
|
||||
border-radius: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.react-calendar__tile--now:enabled:hover {
|
||||
background: $red;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.react-calendar__tile--now:enabled:focus {
|
||||
background: $blue;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.react-calendar__tile--now {
|
||||
background: $red;
|
||||
color: $white !important;
|
||||
}
|
||||
|
||||
.react-calendar__navigation__arrow.react-calendar__navigation__next-button {
|
||||
display: block;
|
||||
background: url('../assets/icons/stroke-right-black.svg') no-repeat center;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.react-calendar__navigation__arrow.react-calendar__navigation__prev-button {
|
||||
display: block;
|
||||
background: url('../assets/icons/stroke-left-black.svg') no-repeat center;
|
||||
color: transparent;
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
.footer {
|
||||
padding: 6.4rem;
|
||||
background: $main;
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
gap: 3.2rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-left,
|
||||
.footer-mid,
|
||||
.footer-right {
|
||||
justify-self: flex-start;
|
||||
}
|
||||
|
||||
.footer-left {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.6rem;
|
||||
a {
|
||||
color: $white;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.footer-list-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 2.4rem;
|
||||
svg {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
}
|
||||
|
||||
a,
|
||||
p {
|
||||
color: $white;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-list-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
|
@ -1,175 +0,0 @@
|
|||
// SUPHEADER
|
||||
.supheader {
|
||||
height: 11rem;
|
||||
background: $main;
|
||||
}
|
||||
|
||||
.supheader-inner {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
height: 100%;
|
||||
a {
|
||||
font-size: 2rem;
|
||||
color: $white;
|
||||
display: block;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.supheader-logo {
|
||||
max-width: 48.8rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
// NAV
|
||||
|
||||
.nav {
|
||||
background: $main;
|
||||
}
|
||||
|
||||
.nav-inner {
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
gap: 0.8rem;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: 1.6rem 0;
|
||||
font-size: 1.6rem;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// SUBHEADER
|
||||
|
||||
.subheader-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 42rem 10rem 41rem;
|
||||
justify-content: space-between;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.subheader-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.8rem;
|
||||
li {
|
||||
a,
|
||||
div {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 1.6rem;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#time {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.time {
|
||||
font-size: 2.4rem;
|
||||
color: $black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 1.2rem;
|
||||
color: $black;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.subheader-mid {
|
||||
width: 10rem;
|
||||
height: 7.2rem;
|
||||
}
|
||||
|
||||
.subheader-right {
|
||||
min-height: 7.3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4rem;
|
||||
}
|
||||
|
||||
// LANGUAGE
|
||||
.language-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.language-trig {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-size: 1.6rem;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
div {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
// SEARCH
|
||||
.search-wrapper {
|
||||
width: 100%;
|
||||
max-width: 32rem;
|
||||
|
||||
form {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
display: block;
|
||||
border: 0.1rem solid $gray;
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
|
||||
input {
|
||||
font-size: 1.6rem;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
div {
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
background: transparent;
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
|
||||
span {
|
||||
font-size: 1.6rem;
|
||||
color: $gray;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
.news-inner {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(50rem, 30rem);
|
||||
gap: 4rem;
|
||||
padding: 6.4rem 0;
|
||||
}
|
||||
|
||||
.news-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.4rem;
|
||||
}
|
||||
|
||||
.news-head {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.4rem;
|
||||
}
|
||||
|
||||
.news-head-top {
|
||||
display: flex;
|
||||
gap: 3.2rem;
|
||||
align-items: center;
|
||||
|
||||
h4 {
|
||||
font-size: 1.8rem;
|
||||
color: $main;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.4rem;
|
||||
color: $main;
|
||||
}
|
||||
}
|
||||
|
||||
.news-head-bottom {
|
||||
font-size: 2.4rem;
|
||||
color: $main;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.6rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
color: $black;
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
$main: #2368ad;
|
||||
$blue: #3c7ec0;
|
||||
$light: #c1daf3;
|
||||
$white: #ffffff;
|
||||
$black: #272727;
|
||||
$red: #e53131;
|
||||
$gray: #a6a6a6;
|
||||
$dark-gray: #7d7d7d;
|
||||
$border-gray: #d9d9d9;
|
||||
|
||||
@mixin wh100 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
.video {
|
||||
padding: 6.4rem 0;
|
||||
background: $light;
|
||||
}
|
||||
|
||||
.video-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 2.4rem;
|
||||
}
|
||||
|
||||
.video-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3.2rem;
|
||||
|
||||
h2 {
|
||||
font-size: 2.4rem;
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
|
||||
.video-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.8rem;
|
||||
}
|
||||
|
||||
.video-img {
|
||||
overflow: hidden;
|
||||
@include wh100;
|
||||
max-height: 16.2rem;
|
||||
border-radius: 0.8rem;
|
||||
|
||||
img {
|
||||
@include wh100;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.video-item-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.8rem;
|
||||
color: $black;
|
||||
|
||||
span {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.video-link {
|
||||
max-width: fit-content;
|
||||
border-radius: 0.5rem;
|
||||
background: $main;
|
||||
.inner {
|
||||
font-size: 1.6rem;
|
||||
color: $white;
|
||||
padding: 0.8rem 1.6rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 1.6rem;
|
||||
}
|
||||
|
||||
.arrow-div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,2 @@
|
|||
@import './variables';
|
||||
@import './general';
|
||||
@import './header';
|
||||
@import './footer';
|
||||
@import './video';
|
||||
@import './news';
|
||||
@import './aside';
|
||||
@import './calendar';
|
||||
@import "./variables";
|
||||
@import "./general";
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
export interface navListItemType {
|
||||
path: string;
|
||||
title: string;
|
||||
}
|
||||
export type navListDataType = navListItemType[];
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
export interface videoItemType {
|
||||
img: string;
|
||||
date: string;
|
||||
title: string;
|
||||
}
|
||||
Loading…
Reference in New Issue