feat: revise fixed button

This commit is contained in:
Alvalen 2024-09-01 08:24:04 +07:00
parent 3340f1c5ee
commit 5805484525
5 changed files with 15 additions and 25 deletions

View file

@ -26,13 +26,10 @@ export default function Page() {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, []); }, []);
const handleBack = () => {
window.location.href = "/";
};
return ( return (
<> <>
<main className="overflow-hidden"> <main className="overflow-hidden">
<FixedButon onClick={handleBack}> <FixedButon href="/#about">
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronLeft} icon={faChevronLeft}
className="text-black pr-10" className="text-black pr-10"

View file

@ -98,12 +98,9 @@ function Page({ params }) {
</div> </div>
); );
} }
const handleBack = () => {
window.history.back();
};
return ( return (
<div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 "> <div className="relative min-h-screen w-full gap-4 p-10 flex justify-center items-center flex-col mb-10 ">
<FixedButon onClick={handleBack}> <FixedButon href="/projects">
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronLeft} icon={faChevronLeft}
className="text-black pr-10" className="text-black pr-10"

View file

@ -105,13 +105,10 @@ const projects = [
}, },
]; ];
export default function Page () { export default function Page () {
const handleBack = () => {
window.history.back();
};
return ( return (
<> <>
<main className="overflow-hidden"> <main className="overflow-hidden">
<FixedButon onClick={handleBack}> <FixedButon href="/projects">
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronLeft} icon={faChevronLeft}
className="text-black pr-10" className="text-black pr-10"

View file

@ -29,18 +29,15 @@ export default function Page() {
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, []); }, []);
const handleBack = () => {
window.location.href = "/";
};
return ( return (
<> <>
<main className="overflow-hidden"> <main className="overflow-hidden">
<FixedButon onClick={handleBack}> <FixedButon href="/#projects">
<FontAwesomeIcon <FontAwesomeIcon
icon={faChevronLeft} icon={faChevronLeft}
className="text-black pr-10" className="text-black pr-10"
/> />
</FixedButon> </FixedButon>
<div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden"> <div className="relative h-screen w-screen gap-4 p-10 flex justify-center items-center flex-col mb-10 overflow-hidden">
<div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 "> <div className="z-0 mb-48 md:mb-0 md:absolute top-1/4 md:right-[10%] md:-translate-y-16 ">
<motion.div <motion.div

View file

@ -1,9 +1,11 @@
const FixedButton = ({ children, onClick }) => ( import Link from "next/link";
<button
onClick={onClick} const FixedButton = ({ children, href = '/' }) => (
<Link
href={href}
className="fixed top-2 -left-2 md:left-10 flex justify-center items-center rounded-full p-4 transition duration-300 ease-in-out z-50 transparent"> className="fixed top-2 -left-2 md:left-10 flex justify-center items-center rounded-full p-4 transition duration-300 ease-in-out z-50 transparent">
{children} {children}
</button> </Link>
); );
export default FixedButton; export default FixedButton;