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);
}, []);
const handleBack = () => {
window.location.href = "/";
};
return (
<>
<main className="overflow-hidden">
<FixedButon onClick={handleBack}>
<FixedButon href="/#about">
<FontAwesomeIcon
icon={faChevronLeft}
className="text-black pr-10"

View file

@ -98,12 +98,9 @@ function Page({ params }) {
</div>
);
}
const handleBack = () => {
window.history.back();
};
return (
<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
icon={faChevronLeft}
className="text-black pr-10"

View file

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

View file

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

View file

@ -1,9 +1,11 @@
const FixedButton = ({ children, onClick }) => (
<button
onClick={onClick}
import Link from "next/link";
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">
{children}
</button>
</Link>
);
export default FixedButton;