modified: package.json modified: src/index.css modified: src/shared/components/Header.tsx new file: src/shared/components/animated/QnASection.css new file: src/shared/components/animated/TypingText.tsx modified: src/shared/components/backtotop/index.tsx modified: src/shared/providers/RouterProviderComponent.tsx modified: tailwind.config.cjsmain
Thuong_e
3 years ago
parent
e7cc1d132d
commit
3cb558ad6a
@ -0,0 +1,15 @@ |
|||||||
|
/* .list-answer { |
||||||
|
animation: modalFadeIn ease 0.5s; |
||||||
|
background-color: red; |
||||||
|
} |
||||||
|
@keyframes modalFadeIn { |
||||||
|
0% { |
||||||
|
opacity: 0; |
||||||
|
transform: translateY(-150px); |
||||||
|
} |
||||||
|
|
||||||
|
100% { |
||||||
|
opacity: 1; |
||||||
|
transform: translateY(0px); |
||||||
|
} |
||||||
|
} */ |
||||||
@ -0,0 +1,28 @@ |
|||||||
|
import React, { useEffect, useState } from "react"; |
||||||
|
|
||||||
|
type Props = { |
||||||
|
children: string; |
||||||
|
}; |
||||||
|
const TypingText = ({ children, ...props }: Props) => { |
||||||
|
const [text, setText] = useState(``); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
setText(children); |
||||||
|
}); |
||||||
|
const [typedText, setTypedText] = useState(""); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (text.length === typedText.length) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const timeoutId = setTimeout(() => { |
||||||
|
setTypedText(text.slice(0, typedText.length + 1)); |
||||||
|
}, 70); |
||||||
|
|
||||||
|
return () => clearTimeout(timeoutId); |
||||||
|
}, [text, typedText]); |
||||||
|
|
||||||
|
return <h1> {typedText}</h1>; |
||||||
|
}; |
||||||
|
export default TypingText; |
||||||
@ -1,39 +1,44 @@ |
|||||||
import { useState } from 'react' |
import { useState } from "react"; |
||||||
import robotLogo from '../../../assets/images/robot-coin1.png' |
import robotLogo from "../../../assets/images/robot-coin1.png"; |
||||||
import { MdOutlineKeyboardDoubleArrowUp } from 'react-icons/md' |
import { MdOutlineKeyboardDoubleArrowUp } from "react-icons/md"; |
||||||
|
import { VscFoldUp } from "react-icons/vsc"; |
||||||
const BackToTopButton = () => { |
const BackToTopButton = () => { |
||||||
const [isVisible, setIsVisible] = useState(false) |
const [isVisible, setIsVisible] = useState(false); |
||||||
|
|
||||||
const toggleVisibility = () => { |
const toggleVisibility = () => { |
||||||
if (window.pageYOffset > 100) { |
if (window.pageYOffset > 100) { |
||||||
setIsVisible(true) |
setIsVisible(true); |
||||||
} else { |
} else { |
||||||
setIsVisible(false) |
setIsVisible(false); |
||||||
} |
|
||||||
} |
} |
||||||
|
}; |
||||||
|
|
||||||
const scrollToTop = () => { |
const scrollToTop = () => { |
||||||
window.scrollTo({ |
window.scrollTo({ |
||||||
top: 0, |
top: 0, |
||||||
behavior: 'smooth', |
behavior: "smooth", |
||||||
}) |
}); |
||||||
} |
}; |
||||||
|
|
||||||
window.addEventListener('scroll', toggleVisibility) |
window.addEventListener("scroll", toggleVisibility); |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className={`bg-orange-500 back-to-top ${ |
className={`bg-orange-500 back-to-top ${ |
||||||
isVisible ? 'visible' : '' |
isVisible ? "visible" : "" |
||||||
} group relative m-12 flex justify-center`}
|
} group relative m-12 flex justify-center`}
|
||||||
onClick={scrollToTop} |
onClick={scrollToTop} |
||||||
> |
> |
||||||
|
<VscFoldUp |
||||||
|
className="absolute top-[-18px] right-[50%] translate-x-[50%] opacity-70 w-4 h-4 transition-all rounded text-center" |
||||||
|
width={50} |
||||||
|
></VscFoldUp> |
||||||
<img src={robotLogo} className="rounded-full" alt="back" /> |
<img src={robotLogo} className="rounded-full" alt="back" /> |
||||||
<span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center"> |
<span className="absolute scale-0 transition-all rounded bg-orange-500 group-hover:scale-100 p-1 text-center"> |
||||||
👆 |
👆 |
||||||
</span> |
</span> |
||||||
</div> |
</div> |
||||||
) |
); |
||||||
} |
}; |
||||||
|
|
||||||
export default BackToTopButton |
export default BackToTopButton; |
||||||
|
|||||||
Loading…
Reference in new issue