diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/core/components/elements/Link/Link.jsx | 8 | ||||
| -rw-r--r-- | src/images/LOGO-INDOTEKNIK-GEAR-GREY.png | bin | 0 -> 14190 bytes | |||
| -rw-r--r-- | src/images/LOGO-INDOTEKNIK-GEAR.png | bin | 0 -> 18304 bytes | |||
| -rw-r--r-- | src/lib/invoice/components/Invoice.jsx | 2 | ||||
| -rw-r--r-- | src/lib/product/components/ProductCard.jsx | 4 | ||||
| -rw-r--r-- | src/lib/transaction/components/Transaction.jsx | 2 | ||||
| -rw-r--r-- | src/pages/_app.jsx | 29 | ||||
| -rw-r--r-- | src/styles/globals.css | 21 |
8 files changed, 50 insertions, 16 deletions
diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx index 360444a6..b2dbd02f 100644 --- a/src/core/components/elements/Link/Link.jsx +++ b/src/core/components/elements/Link/Link.jsx @@ -1,14 +1,6 @@ import NextLink from 'next/link' -import { useRouter } from 'next/router' -import { useEffect } from 'react' const Link = ({ children, ...props }) => { - const router = useRouter() - - useEffect(() => { - router.events.on('routeChangeComplete', () => window.scrollTo({ top: 0, behavior: 'smooth' })) - }, [router]) - return ( <NextLink {...props} diff --git a/src/images/LOGO-INDOTEKNIK-GEAR-GREY.png b/src/images/LOGO-INDOTEKNIK-GEAR-GREY.png Binary files differnew file mode 100644 index 00000000..2ab07ff5 --- /dev/null +++ b/src/images/LOGO-INDOTEKNIK-GEAR-GREY.png diff --git a/src/images/LOGO-INDOTEKNIK-GEAR.png b/src/images/LOGO-INDOTEKNIK-GEAR.png Binary files differnew file mode 100644 index 00000000..89f749ec --- /dev/null +++ b/src/images/LOGO-INDOTEKNIK-GEAR.png diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx index 1094e2e4..7559779b 100644 --- a/src/lib/invoice/components/Invoice.jsx +++ b/src/lib/invoice/components/Invoice.jsx @@ -200,7 +200,7 @@ const Invoice = ({ id }) => { product?.parent.name, product?.parent.id )} - className='w-[30%] flex-shrink-0' + className='w-[25%] flex-shrink-0' > <Image src={product?.parent?.image} diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index f85a0b03..a1c30d00 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -39,8 +39,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { )} <Link href={createSlug('/shop/product/', product?.name, product?.id)} - className={`font-normal mb-2 !text-gray_r-12 leading-6 ${ - simpleTitle ? 'line-clamp-2' : 'line-clamp-3' + className={`font-normal mb-2 !text-gray_r-12 leading-6 block ${ + simpleTitle ? 'line-clamp-2 h-12' : 'line-clamp-3 h-[64px]' }`} > {product?.name} diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx index ad59f8dd..7dfb13fb 100644 --- a/src/lib/transaction/components/Transaction.jsx +++ b/src/lib/transaction/components/Transaction.jsx @@ -368,7 +368,7 @@ const Transaction = ({ id }) => { product?.parent.name, product?.parent.id )} - className='w-[30%] flex-shrink-0' + className='w-[25%] flex-shrink-0' > <Image src={product?.parent?.image} diff --git a/src/pages/_app.jsx b/src/pages/_app.jsx index 634e631f..6906cb92 100644 --- a/src/pages/_app.jsx +++ b/src/pages/_app.jsx @@ -1,11 +1,13 @@ import '../styles/globals.css' import NextProgress from 'next-progress' -import { useRouter } from 'next/router' +import { useRouter, Router } from 'next/router' import { AnimatePresence } from 'framer-motion' import { Toaster } from 'react-hot-toast' import { QueryClient, QueryClientProvider } from 'react-query' import useDevice from '@/core/hooks/useDevice' import { useEffect, useState } from 'react' +import Image from 'next/image' +import IndoteknikLogo from '@/images/LOGO-INDOTEKNIK-GEAR.png' const queryClient = new QueryClient() @@ -13,6 +15,18 @@ function MyApp({ Component, pageProps }) { const router = useRouter() const { isMobile } = useDevice() + const [animateLoader, setAnimateLoader] = useState(false) + + useEffect(() => { + Router.events.on('routeChangeStart', () => setAnimateLoader(true)) + Router.events.on('routeChangeComplete', () => setAnimateLoader(false)) + + return () => { + Router.events.off('routeChangeStart', () => setAnimateLoader(true)) + Router.events.off('routeChangeComplete', () => setAnimateLoader(false)) + } + }, []) + const [toasterStyle, setToasterStyle] = useState({}) useEffect(() => { @@ -30,6 +44,17 @@ function MyApp({ Component, pageProps }) { return ( <> + {animateLoader && ( + <div className='w-screen h-screen z-[500] flex justify-center items-center backdrop-blur'> + <Image + src={IndoteknikLogo} + alt='Indoteknik Logo' + width={64} + height={64} + className='page-loader' + /> + </div> + )} <Toaster position='top-center' containerStyle={toasterStyle} @@ -45,7 +70,7 @@ function MyApp({ Component, pageProps }) { initial={false} onExitComplete={() => window.scrollTo(0, 0)} > - <Component {...pageProps} key={router.asPath} /> + {!animateLoader && <Component {...pageProps} key={router.asPath} />} </AnimatePresence> </QueryClientProvider> </> diff --git a/src/styles/globals.css b/src/styles/globals.css index 551ff057..d97843a9 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -133,7 +133,7 @@ button { .btn-yellow { @apply bg-warning-500 border-warning-500 - hover:bg-warning-600 + hover:bg-warning-500/80 disabled:text-gray_r-10 disabled:bg-warning-200 disabled:border-warning-200; @@ -151,7 +151,7 @@ button { @apply bg-danger-500 border-danger-500 text-gray_r-1 - hover:bg-danger-600 + hover:bg-danger-500/80 disabled:text-gray_r-1 disabled:bg-danger-200 disabled:border-danger-200; @@ -602,3 +602,20 @@ button { duration-100 font-normal; } + +@keyframes page-loader { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +.page-loader { + animation-name: page-loader; + animation-duration: 1000ms; + animation-delay: 50ms; + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; +} |
