diff options
| -rw-r--r-- | src/components/AppBar.js | 17 | ||||
| -rw-r--r-- | src/pages/shop/checkout.js | 18 |
2 files changed, 17 insertions, 18 deletions
diff --git a/src/components/AppBar.js b/src/components/AppBar.js index 55af9f1a..1da2510a 100644 --- a/src/components/AppBar.js +++ b/src/components/AppBar.js @@ -1,17 +1,32 @@ import { ArrowLeftIcon, HeartIcon, HomeIcon } from "@heroicons/react/24/outline"; import Head from "next/head"; import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; import Link from "./Link"; const AppBar = ({ title }) => { const router = useRouter(); + const [scrollPosition, setScrollPosition] = useState(0); + const handleScrollPosition = () => { + const position = window.pageYOffset; + setScrollPosition(position); + } + + useEffect(() => { + window.addEventListener('scroll', handleScrollPosition, { passive: true }); + + return () => { + window.addEventListener('scroll', handleScrollPosition); + }; + }, []); + return ( <> <Head> <title>{ title } - Indoteknik</title> </Head> - <div className="flex justify-between pr-4 border-b border-gray_r-6 bg-gray_r-1"> + <div className={"sticky-header flex justify-between !p-0 !pr-4 idt-transition " + (scrollPosition > 0 && "shadow border-b-transparent" ) }> {/* --- Start Title */} <div className="flex items-center"> <button type="button" onClick={() => router.back()} className="text-gray_r-12 px-4 py-5"> diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js index 6b3231df..286219c3 100644 --- a/src/pages/shop/checkout.js +++ b/src/pages/shop/checkout.js @@ -32,22 +32,6 @@ export default function Checkout() { { name: 'MANDIRI', number: '155-0067-6869-75' }, ]; - const changePayment = (index) => { - let payment = payments[index]; - if (selectedPayment == payment.name) { - navigator.clipboard.writeText(payment.number) - .then(() => { - toast.success('Nomor bank berhasil disalin', { position: 'bottom-center', duration: 1500 }); - }) - .catch((e) => { - toast.error(e, { position: 'bottom-center', duration: 10000 }); - }); - } else { - toast.success('Metode pembayaran berhasil diubah, tekan sekali lagi untuk salin nomor bank', { position: 'bottom-center', duration: 3000 }); - } - setSelectedPayment(payment.name); - } - useEffect(() => { const getAddress = async () => { if (auth?.id) { @@ -221,7 +205,7 @@ export default function Checkout() { <button type="button" className={"text-left border border-gray_r-6 rounded-md p-3 " + (selectedPayment == payment.name && 'border-yellow_r-10 bg-yellow_r-3')} - onClick={() => changePayment(index)} + onClick={() => setSelectedPayment(payment.name)} key={index} > <p>{payment.name} - {payment.number}</p> |