diff --git a/src/assets/icons/arrow-down-black.svg b/src/assets/icons/arrow-down-black.svg new file mode 100644 index 0000000..23f7550 --- /dev/null +++ b/src/assets/icons/arrow-down-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/loop-gray.svg b/src/assets/icons/loop-gray.svg new file mode 100644 index 0000000..727f89b --- /dev/null +++ b/src/assets/icons/loop-gray.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index 919493b..7944795 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -1,11 +1,13 @@ // Components import SupHeader from "./SupHeader"; import Nav from "./Nav"; +import SubHeader from "./SubHeader"; const Header = () => { return (
+
); diff --git a/src/components/header/SubHeader.tsx b/src/components/header/SubHeader.tsx new file mode 100644 index 0000000..976ecc5 --- /dev/null +++ b/src/components/header/SubHeader.tsx @@ -0,0 +1,111 @@ +// Modules +import { motion } from "framer-motion"; +import { Link } from "react-router-dom"; +import { useState } from "react"; + +// Images +import Logo from "../../assets/images/logo.png"; + +// Icons +import ArrowDownBlack from "../../assets/icons/arrow-down-black.svg"; +import LoopGray from "../../assets/icons/loop-gray.svg"; + +const loopMotion = { + rest: { + opacity: 0, + ease: "ease", + duration: 0.2, + type: "tween", + }, + hover: { + opacity: 1, + ease: "ease", + duration: 0.2, + type: "tween", + }, +}; + +const blockMotion = { + rest: { + opacity: 1, + duration: 0.2, + type: "tween", + x: 0, + }, + + hover: { + y: -10, + opacity: 0, + transition: { + duration: 0.1, + type: "spring", + }, + }, +}; + +const SubHeader = () => { + const [isTyping, setIsTyping] = useState(false); + return ( +
+
+
+
    +
  • +
    + 12:30 + 14 февраля +
    +
    • +
  • + Туркменистан +
    • +
  • + СНГ +
    • +
  • + Зарубежье +
    • +
+
+ +
+
+
+
+ EN +
+ +
+
+
+ +
) => { + event.preventDefault(); + }} + > + + + Search anything + + ) => { + event.target.value.length > 0 + ? setIsTyping(true) + : setIsTyping(false); + }} + /> +
+ +
+
+
+
+ ); +}; + +export default SubHeader; diff --git a/src/components/header/SupHeader.tsx b/src/components/header/SupHeader.tsx index ea701c7..b138999 100644 --- a/src/components/header/SupHeader.tsx +++ b/src/components/header/SupHeader.tsx @@ -1,3 +1,6 @@ +// Modules +import { Link } from "react-router-dom"; + // Images import Logo from "../../assets/images/sup-header.png"; @@ -6,7 +9,9 @@ const SupHeader = () => {
-

Halkara Habarlar Merkezi

+

+ Halkara Habarlar Merkezi +

diff --git a/src/styles/_header.scss b/src/styles/_header.scss index 2b6797a..444c3e5 100644 --- a/src/styles/_header.scss +++ b/src/styles/_header.scss @@ -12,8 +12,15 @@ position: relative; h1 { - font-size: 2rem; - color: $white; + height: 100%; + a { + font-size: 2rem; + color: $white; + display: block; + height: 100%; + display: flex; + align-items: center; + } } } @@ -54,3 +61,122 @@ } } } + +// SUBHEADER + +.subheader-inner { + display: flex; + align-items: center; + 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; + + span { + font-size: 1.6rem; + color: $black; + } + + div { + width: 1.6rem; + height: 1.6rem; + } +} + +// SEARCH +.search-wrapper { + form { + position: relative; + width: 100%; + max-width: 32rem; + 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; + + img { + width: 1.3rem; + height: 1.3rem; + } + + span { + font-size: 1.6rem; + color: $gray; + } + } + } +}