diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
| commit | f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch) | |
| tree | 253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/core/components | |
| parent | 3c559031623649a67825ff47f34512f0eb946861 (diff) | |
prettier
Diffstat (limited to 'src/core/components')
20 files changed, 290 insertions, 258 deletions
diff --git a/src/core/components/Seo.jsx b/src/core/components/Seo.jsx index bcfaa6ef..e688077e 100644 --- a/src/core/components/Seo.jsx +++ b/src/core/components/Seo.jsx @@ -1,11 +1,11 @@ -import Head from "next/head" +import Head from 'next/head' const Seo = ({ title }) => { return ( <Head> - <title>{ title }</title> + <title>{title}</title> </Head> ) } -export default Seo
\ No newline at end of file +export default Seo diff --git a/src/core/components/elements/Alert/Alert.jsx b/src/core/components/elements/Alert/Alert.jsx index 3f5584b9..695be8a3 100644 --- a/src/core/components/elements/Alert/Alert.jsx +++ b/src/core/components/elements/Alert/Alert.jsx @@ -18,4 +18,4 @@ const Alert = ({ children, className, type }) => { ) } -export default Alert
\ No newline at end of file +export default Alert diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index 36df9edb..4300287f 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -1,33 +1,31 @@ -import { useRouter } from "next/router" -import Link from "../Link/Link" -import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from "@heroicons/react/24/outline" +import { useRouter } from 'next/router' +import Link from '../Link/Link' +import { HomeIcon, Bars3Icon, ShoppingCartIcon, ChevronLeftIcon } from '@heroicons/react/24/outline' const AppBar = ({ title }) => { const router = useRouter() return ( - <nav className="sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between"> - <div className="flex items-center"> - <button type="button" className="p-4" onClick={() => router.back()}> - <ChevronLeftIcon className="w-6 stroke-2" /> + <nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'> + <div className='flex items-center'> + <button type='button' className='p-4' onClick={() => router.back()}> + <ChevronLeftIcon className='w-6 stroke-2' /> </button> - <div className="font-medium text-h-sm line-clamp-1"> - { title } - </div> + <div className='font-medium text-h-sm line-clamp-1'>{title}</div> </div> - <div className="flex items-center px-2"> - <Link href="/shop/cart" className="py-4 px-2"> - <ShoppingCartIcon className="w-6 text-gray_r-12" /> + <div className='flex items-center px-2'> + <Link href='/shop/cart' className='py-4 px-2'> + <ShoppingCartIcon className='w-6 text-gray_r-12' /> </Link> - <Link href="/" className="py-4 px-2"> - <HomeIcon className="w-6 text-gray_r-12" /> + <Link href='/' className='py-4 px-2'> + <HomeIcon className='w-6 text-gray_r-12' /> </Link> - <Link href="/my/menu" className="py-4 px-2"> - <Bars3Icon className="w-6 text-gray_r-12" /> + <Link href='/my/menu' className='py-4 px-2'> + <Bars3Icon className='w-6 text-gray_r-12' /> </Link> </div> </nav> ) } -export default AppBar
\ No newline at end of file +export default AppBar diff --git a/src/core/components/elements/Badge/Badge.jsx b/src/core/components/elements/Badge/Badge.jsx index 5d8ebd1c..5e22db1a 100644 --- a/src/core/components/elements/Badge/Badge.jsx +++ b/src/core/components/elements/Badge/Badge.jsx @@ -1,14 +1,7 @@ -const Badge = ({ - children, - type, - ...props -}) => { +const Badge = ({ children, type, ...props }) => { return ( - <div - { ...props } - className={`${badgeStyle(type)} ${props?.className}`} - > - { children } + <div {...props} className={`${badgeStyle(type)} ${props?.className}`}> + {children} </div> ) } @@ -30,4 +23,4 @@ const badgeStyle = (type) => { return className.join(' ') } -export default Badge
\ No newline at end of file +export default Badge diff --git a/src/core/components/elements/Divider/Divider.jsx b/src/core/components/elements/Divider/Divider.jsx index 355cd509..ce54a2ea 100644 --- a/src/core/components/elements/Divider/Divider.jsx +++ b/src/core/components/elements/Divider/Divider.jsx @@ -1,11 +1,7 @@ -const Divider = (props) => { - return ( - <div className={`h-1 bg-gray_r-4 ${props.className}`} /> - ) -} +const Divider = (props) => <div className={`h-1 bg-gray_r-4 ${props.className}`} /> Divider.defaultProps = { className: '' } -export default Divider
\ No newline at end of file +export default Divider diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx index a6f0b00c..ac82aaaf 100644 --- a/src/core/components/elements/Image/Image.jsx +++ b/src/core/components/elements/Image/Image.jsx @@ -1,18 +1,18 @@ -import { LazyLoadImage } from "react-lazy-load-image-component" -import "react-lazy-load-image-component/src/effects/opacity.css" +import { LazyLoadImage } from 'react-lazy-load-image-component' +import 'react-lazy-load-image-component/src/effects/opacity.css' const Image = ({ ...props }) => ( <> <LazyLoadImage - { ...props } + {...props} src={props.src || '/images/noimage.jpeg'} - placeholderSrc="/images/indoteknik-placeholder.png" + placeholderSrc='/images/indoteknik-placeholder.png' alt={props.src ? props.alt : 'Image Not Found - Indoteknik'} - wrapperClassName="bg-white" + wrapperClassName='bg-white' /> </> ) Image.defaultProps = LazyLoadImage.defaultProps -export default Image
\ No newline at end of file +export default Image diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx index 897cf6d7..dbc65338 100644 --- a/src/core/components/elements/Link/Link.jsx +++ b/src/core/components/elements/Link/Link.jsx @@ -1,9 +1,9 @@ -import NextLink from "next/link" +import NextLink from 'next/link' const Link = ({ children, ...props }) => { return ( - <NextLink - {...props} + <NextLink + {...props} scroll={false} className={`block font-medium text-red_r-11 ${props?.className || ''}`} > @@ -14,4 +14,4 @@ const Link = ({ children, ...props }) => { Link.defaultProps = NextLink.defaultProps -export default Link
\ No newline at end of file +export default Link diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx index f10ebd63..e2caebfe 100644 --- a/src/core/components/elements/Navbar/Navbar.jsx +++ b/src/core/components/elements/Navbar/Navbar.jsx @@ -1,38 +1,38 @@ -import dynamic from "next/dynamic" -import Image from "next/image" -import IndoteknikLogo from "@/images/logo.png" -import { Bars3Icon, HeartIcon, ShoppingCartIcon } from "@heroicons/react/24/outline" -import Link from "../Link/Link" -import useSidebar from "@/core/hooks/useSidebar" +import dynamic from 'next/dynamic' +import Image from 'next/image' +import IndoteknikLogo from '@/images/logo.png' +import { Bars3Icon, HeartIcon, ShoppingCartIcon } from '@heroicons/react/24/outline' +import Link from '../Link/Link' +import useSidebar from '@/core/hooks/useSidebar' -const Search = dynamic(() => import("./Search")) +const Search = dynamic(() => import('./Search')) const Navbar = () => { const { Sidebar, open } = useSidebar() return ( <> - <nav className="px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow"> - <div className="flex justify-between items-center mb-2"> - <Link href="/"> - <Image src={IndoteknikLogo} alt="Indoteknik Logo" width={120} height={40} /> + <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'> + <div className='flex justify-between items-center mb-2'> + <Link href='/'> + <Image src={IndoteknikLogo} alt='Indoteknik Logo' width={120} height={40} /> </Link> - <div className="flex gap-x-3"> - <Link href="/my/wishlist"> - <HeartIcon className="w-6 text-gray_r-12" /> + <div className='flex gap-x-3'> + <Link href='/my/wishlist'> + <HeartIcon className='w-6 text-gray_r-12' /> </Link> - <Link href="/shop/cart"> - <ShoppingCartIcon className="w-6 text-gray_r-12" /> + <Link href='/shop/cart'> + <ShoppingCartIcon className='w-6 text-gray_r-12' /> </Link> - <button type="button" onClick={open}> - <Bars3Icon className="w-6 text-gray_r-12" /> + <button type='button' onClick={open}> + <Bars3Icon className='w-6 text-gray_r-12' /> </button> </div> </div> <Search /> </nav> - { Sidebar } + {Sidebar} </> ) } -export default Navbar
\ No newline at end of file +export default Navbar diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx index cca1a97c..6f0e4dd9 100644 --- a/src/core/components/elements/Navbar/Search.jsx +++ b/src/core/components/elements/Navbar/Search.jsx @@ -1,22 +1,22 @@ -import searchSuggestApi from "@/core/api/searchSuggestApi" -import { MagnifyingGlassIcon } from "@heroicons/react/24/outline" -import { useCallback, useEffect, useRef, useState } from "react" -import Link from "../Link/Link" -import { useRouter } from "next/router" +import searchSuggestApi from '@/core/api/searchSuggestApi' +import { MagnifyingGlassIcon } from '@heroicons/react/24/outline' +import { useCallback, useEffect, useRef, useState } from 'react' +import Link from '../Link/Link' +import { useRouter } from 'next/router' const Search = () => { const router = useRouter() const queryRef = useRef() - const [ query, setQuery ] = useState('') - const [ suggestions, setSuggestions ] = useState([]) + const [query, setQuery] = useState('') + const [suggestions, setSuggestions] = useState([]) useEffect(() => { setQuery(router.query.q) }, [router.query]) - + const loadSuggestion = useCallback(() => { if (query && document.activeElement == queryRef.current) { - (async () => { + ;(async () => { const dataSuggestion = await searchSuggestApi({ query }) setSuggestions(dataSuggestion.data.suggestions) })() @@ -24,7 +24,7 @@ const Search = () => { } else { setSuggestions([]) } - }, [ query ]) + }, [query]) useEffect(() => { if (query && document.activeElement == queryRef.current) { @@ -32,7 +32,7 @@ const Search = () => { } else { setSuggestions([]) } - }, [ loadSuggestion, query ]) + }, [loadSuggestion, query]) const handleSubmit = (e) => { e.preventDefault() @@ -50,40 +50,38 @@ const Search = () => { } return ( - <form - onSubmit={handleSubmit} - className="flex relative" - > - <input - type="text" + <form onSubmit={handleSubmit} className='flex relative'> + <input + type='text' ref={queryRef} - className="form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6" - placeholder="Ketik nama, part number, merk" + className='form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6' + placeholder='Ketik nama, part number, merk' value={query} onChange={(e) => setQuery(e.target.value)} onBlur={onInputBlur} onFocus={loadSuggestion} /> - <button - type="submit" - className="rounded-r border border-l-0 border-gray_r-6 px-2" - > - <MagnifyingGlassIcon className="w-6" /> + <button type='submit' className='rounded-r border border-l-0 border-gray_r-6 px-2'> + <MagnifyingGlassIcon className='w-6' /> </button> - { suggestions.length > 1 && ( + {suggestions.length > 1 && ( <> - <div className="absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6"> + <div className='absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6'> {suggestions.map((suggestion, index) => ( - <Link href={`/shop/search?q=${suggestion.term}`} key={index} className="px-3 py-3 !text-gray_r-12 font-normal"> + <Link + href={`/shop/search?q=${suggestion.term}`} + key={index} + className='px-3 py-3 !text-gray_r-12 font-normal' + > {suggestion.term} </Link> ))} </div> </> - ) } + )} </form> ) } -export default Search
\ No newline at end of file +export default Search diff --git a/src/core/components/elements/Pagination/Pagination.js b/src/core/components/elements/Pagination/Pagination.js index 485295fe..c009171f 100644 --- a/src/core/components/elements/Pagination/Pagination.js +++ b/src/core/components/elements/Pagination/Pagination.js @@ -1,4 +1,4 @@ -import Link from "../Link/Link" +import Link from '../Link/Link' const Pagination = ({ pageCount, currentPage, url, className }) => { let firstPage = false @@ -6,54 +6,70 @@ const Pagination = ({ pageCount, currentPage, url, className }) => { let dotsPrevPage = false let dotsNextPage = false let urlParameterPrefix = url.includes('?') ? '&' : '?' - - return pageCount > 1 && ( - <div className={`pagination ${className}`}> - { Array.from(Array(pageCount)).map((v, i) => { - let page = i + 1 - let rangePrevPage = currentPage - 2 - let rangeNextPage = currentPage + 2 - let PageComponent = <Link key={i} href={`${url + urlParameterPrefix}page=${page}`} className={"pagination-item" + (page == currentPage ? " pagination-item--active " : "")}>{page}</Link> - let DotsComponent = <div key={i} className="pagination-dots">...</div> - if (pageCount == 7) { - return PageComponent - } + return ( + pageCount > 1 && ( + <div className={`pagination ${className}`}> + {Array.from(Array(pageCount)).map((v, i) => { + let page = i + 1 + let rangePrevPage = currentPage - 2 + let rangeNextPage = currentPage + 2 + let PageComponent = ( + <Link + key={i} + href={`${url + urlParameterPrefix}page=${page}`} + className={ + 'pagination-item' + (page == currentPage ? ' pagination-item--active ' : '') + } + > + {page} + </Link> + ) + let DotsComponent = ( + <div key={i} className='pagination-dots'> + ... + </div> + ) - if (currentPage == 1) rangeNextPage += 3 - if (currentPage == 2) rangeNextPage += 2 - if (currentPage == 3) rangeNextPage += 1 - if (currentPage == 4) rangePrevPage -= 1 - if (currentPage == pageCount) rangePrevPage -= 3 - if (currentPage == pageCount - 1) rangePrevPage -= 2 - if (currentPage == pageCount - 2) rangePrevPage -= 1 - if (currentPage == pageCount - 3) rangeNextPage += 1 + if (pageCount == 7) { + return PageComponent + } - if (page > rangePrevPage && page < rangeNextPage) { - return PageComponent - } + if (currentPage == 1) rangeNextPage += 3 + if (currentPage == 2) rangeNextPage += 2 + if (currentPage == 3) rangeNextPage += 1 + if (currentPage == 4) rangePrevPage -= 1 + if (currentPage == pageCount) rangePrevPage -= 3 + if (currentPage == pageCount - 1) rangePrevPage -= 2 + if (currentPage == pageCount - 2) rangePrevPage -= 1 + if (currentPage == pageCount - 3) rangeNextPage += 1 - if (page == 1 && rangePrevPage >= 1 && !firstPage) { - firstPage = true - return PageComponent - } + if (page > rangePrevPage && page < rangeNextPage) { + return PageComponent + } - if (page == pageCount && rangeNextPage <= pageCount && !lastPage) { - lastPage = true - return PageComponent - } + if (page == 1 && rangePrevPage >= 1 && !firstPage) { + firstPage = true + return PageComponent + } - if (page > currentPage && (pageCount - currentPage) > 1 && !dotsNextPage) { - dotsNextPage = true - return DotsComponent - } + if (page == pageCount && rangeNextPage <= pageCount && !lastPage) { + lastPage = true + return PageComponent + } - if (page < currentPage && (currentPage - 1) > 1 && !dotsPrevPage) { - dotsPrevPage = true - return DotsComponent - } - }) } - </div> + if (page > currentPage && pageCount - currentPage > 1 && !dotsNextPage) { + dotsNextPage = true + return DotsComponent + } + + if (page < currentPage && currentPage - 1 > 1 && !dotsPrevPage) { + dotsPrevPage = true + return DotsComponent + } + })} + </div> + ) ) } @@ -61,4 +77,4 @@ Pagination.defaultProps = { className: '' } -export default Pagination
\ No newline at end of file +export default Pagination diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx index c3c380c0..af1149ca 100644 --- a/src/core/components/elements/Popup/BottomPopup.jsx +++ b/src/core/components/elements/Popup/BottomPopup.jsx @@ -1,15 +1,10 @@ -import { XMarkIcon } from "@heroicons/react/24/outline" -import { AnimatePresence, motion } from "framer-motion" -import { useEffect } from "react" +import { XMarkIcon } from '@heroicons/react/24/outline' +import { AnimatePresence, motion } from 'framer-motion' +import { useEffect } from 'react' const transition = { ease: 'linear', duration: 0.2 } -const BottomPopup = ({ - children, - active = false, - title, - close -}) => { +const BottomPopup = ({ children, active = false, title, close }) => { useEffect(() => { if (active) { document.querySelector('html, body').classList.add('overflow-hidden') @@ -21,10 +16,10 @@ const BottomPopup = ({ return ( <> <AnimatePresence> - { active && ( + {active && ( <> <motion.div - className="overlay" + className='overlay' initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} @@ -36,21 +31,21 @@ const BottomPopup = ({ animate={{ bottom: 0 }} exit={{ bottom: '-100%' }} transition={transition} - className="fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white" + className='fixed left-0 w-full border-t border-gray_r-6 rounded-t-xl z-[60] p-4 pt-0 bg-white' > - <div className="flex justify-between py-4"> - <div className="font-semibold text-h-sm">{ title }</div> - <button type="button" onClick={close}> - <XMarkIcon className="w-5 stroke-2" /> + <div className='flex justify-between py-4'> + <div className='font-semibold text-h-sm'>{title}</div> + <button type='button' onClick={close}> + <XMarkIcon className='w-5 stroke-2' /> </button> </div> - { children } + {children} </motion.div> </> - ) } + )} </AnimatePresence> </> ) } -export default BottomPopup
\ No newline at end of file +export default BottomPopup diff --git a/src/core/components/elements/Select/HookFormSelect.jsx b/src/core/components/elements/Select/HookFormSelect.jsx index 45cd89b6..055a9c68 100644 --- a/src/core/components/elements/Select/HookFormSelect.jsx +++ b/src/core/components/elements/Select/HookFormSelect.jsx @@ -1,17 +1,14 @@ -import ReactSelect from "react-select" +import ReactSelect from 'react-select' -const HookFormSelect = ({ - field, - ...props -}) => ( +const HookFormSelect = ({ field, ...props }) => ( <ReactSelect - classNamePrefix="form-select" + classNamePrefix='form-select' ref={field.ref} onChange={(option) => field.onChange(option.value)} - value={field.value ? props.options.find(option => option.value === field.value) : ''} + value={field.value ? props.options.find((option) => option.value === field.value) : ''} isDisabled={props.disabled} {...props} /> ) -export default HookFormSelect
\ No newline at end of file +export default HookFormSelect diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 48ceacf6..08f1fed5 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -1,20 +1,16 @@ -import Link from "../Link/Link" -import greeting from "@/core/utils/greeting" -import useAuth from "@/core/hooks/useAuth" -import { AnimatePresence, motion } from "framer-motion" -import { CogIcon } from "@heroicons/react/24/outline" +import Link from '../Link/Link' +import greeting from '@/core/utils/greeting' +import useAuth from '@/core/hooks/useAuth' +import { AnimatePresence, motion } from 'framer-motion' +import { CogIcon } from '@heroicons/react/24/outline' -const Sidebar = ({ - active, - close -}) => { +const Sidebar = ({ active, close }) => { const auth = useAuth() const SidebarLink = ({ children, ...props }) => ( - <Link - {...props} - onClick={close} - >{ children }</Link> + <Link {...props} onClick={close}> + {children} + </Link> ) const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal' @@ -23,10 +19,10 @@ const Sidebar = ({ return ( <> <AnimatePresence> - { active && ( + {active && ( <> <motion.div - className="overlay z-50" + className='overlay z-50' initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} @@ -34,55 +30,67 @@ const Sidebar = ({ onClick={close} /> <motion.div - className="fixed z-[55] top-0 h-full w-[80%] bg-white" + className='fixed z-[55] top-0 h-full w-[80%] bg-white' initial={{ left: '-80%' }} animate={{ left: 0 }} exit={{ left: '-80%' }} transition={transition} > - <div className="divide-y divide-gray_r-6"> - <div className="p-4 flex gap-x-3"> - { !auth && ( + <div className='divide-y divide-gray_r-6'> + <div className='p-4 flex gap-x-3'> + {!auth && ( <> - <Link onClick={close} href="/register" className="btn-yellow !text-gray_r-12 py-2 flex-1">Daftar</Link> - <Link onClick={close} href="/login" className="btn-solid-red !text-gray_r-1 py-2 flex-1">Masuk</Link> + <Link + onClick={close} + href='/register' + className='btn-yellow !text-gray_r-12 py-2 flex-1' + > + Daftar + </Link> + <Link + onClick={close} + href='/login' + className='btn-solid-red !text-gray_r-1 py-2 flex-1' + > + Masuk + </Link> </> - ) } - { auth && ( + )} + {auth && ( <> - <div className="text-caption-2 text-gray_r-11"> - { greeting() }, - <span className="text-body-2 text-gray_r-12 block mt-1 font-medium"> - { auth?.name } + <div className='text-caption-2 text-gray_r-11'> + {greeting()}, + <span className='text-body-2 text-gray_r-12 block mt-1 font-medium'> + {auth?.name} </span> </div> - <Link - onClick={close} - href="/my/menu" - className="!text-gray_r-11 ml-auto my-auto" + <Link + onClick={close} + href='/my/menu' + className='!text-gray_r-11 ml-auto my-auto' > - <CogIcon className="w-6" /> + <CogIcon className='w-6' /> </Link> </> - ) } + )} </div> - <SidebarLink className={itemClassName} href="/"> + <SidebarLink className={itemClassName} href='/'> Semua Brand </SidebarLink> - <SidebarLink className={itemClassName} href="/"> + <SidebarLink className={itemClassName} href='/'> Tentang Indoteknik </SidebarLink> - <SidebarLink className={itemClassName} href="/"> + <SidebarLink className={itemClassName} href='/'> Pusat Bantuan </SidebarLink> <button className={`${itemClassName} w-full text-left`}>Kategori</button> </div> </motion.div> </> - ) } + )} </AnimatePresence> </> ) } -export default Sidebar
\ No newline at end of file +export default Sidebar diff --git a/src/core/components/elements/Skeleton/BrandSkeleton.jsx b/src/core/components/elements/Skeleton/BrandSkeleton.jsx index ce5a994d..9a7a51f9 100644 --- a/src/core/components/elements/Skeleton/BrandSkeleton.jsx +++ b/src/core/components/elements/Skeleton/BrandSkeleton.jsx @@ -1,8 +1,8 @@ const BrandSkeleton = () => ( - <div role="status" className="animate-pulse"> - <div className="h-12 bg-gray-200 rounded"></div> - <span className="sr-only">Loading...</span> + <div role='status' className='animate-pulse'> + <div className='h-12 bg-gray-200 rounded'></div> + <span className='sr-only'>Loading...</span> </div> ) -export default BrandSkeleton
\ No newline at end of file +export default BrandSkeleton diff --git a/src/core/components/elements/Skeleton/ImageSkeleton.jsx b/src/core/components/elements/Skeleton/ImageSkeleton.jsx index 2cda9536..2ca6b2a3 100644 --- a/src/core/components/elements/Skeleton/ImageSkeleton.jsx +++ b/src/core/components/elements/Skeleton/ImageSkeleton.jsx @@ -1,10 +1,18 @@ const ImageSkeleton = () => ( - <div role="status" className="animate-pulse"> - <div className="flex items-center justify-center h-56 mb-4 bg-gray-300 rounded" aria-busy> - <svg className="w-12 h-12 text-gray-200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512"><path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"/></svg> + <div role='status' className='animate-pulse'> + <div className='flex items-center justify-center h-56 mb-4 bg-gray-300 rounded' aria-busy> + <svg + className='w-12 h-12 text-gray-200' + xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' + fill='currentColor' + viewBox='0 0 640 512' + > + <path d='M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z' /> + </svg> </div> - <span className="sr-only">Loading...</span> + <span className='sr-only'>Loading...</span> </div> ) -export default ImageSkeleton
\ No newline at end of file +export default ImageSkeleton diff --git a/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx index 66b48f79..84d1c0d1 100644 --- a/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx +++ b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx @@ -1,15 +1,26 @@ const ProductCardSkeleton = () => ( - <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6"> - <div className="flex items-center justify-center h-36 mb-4 bg-gray-300 rounded" aria-busy> - <svg className="w-12 h-12 text-gray-200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512"><path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"/></svg> - </div> - <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div> - <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div> - <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div> - <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div> - <div className="h-2 bg-gray-200 rounded-full"></div> - <span className="sr-only">Loading...</span> + <div + role='status' + className='p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6' + > + <div className='flex items-center justify-center h-36 mb-4 bg-gray-300 rounded' aria-busy> + <svg + className='w-12 h-12 text-gray-200' + xmlns='http://www.w3.org/2000/svg' + aria-hidden='true' + fill='currentColor' + viewBox='0 0 640 512' + > + <path d='M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z' /> + </svg> + </div> + <div className='h-2 bg-gray-200 rounded-full w-10 mb-1'></div> + <div className='h-2.5 bg-gray-200 rounded-full w-full mb-4'></div> + <div className='h-2 bg-gray-200 rounded-full mb-2.5'></div> + <div className='h-2 bg-gray-200 rounded-full mb-2.5'></div> + <div className='h-2 bg-gray-200 rounded-full'></div> + <span className='sr-only'>Loading...</span> </div> ) -export default ProductCardSkeleton
\ No newline at end of file +export default ProductCardSkeleton diff --git a/src/core/components/elements/Spinner/Spinner.jsx b/src/core/components/elements/Spinner/Spinner.jsx index 60f88279..4639db1d 100644 --- a/src/core/components/elements/Spinner/Spinner.jsx +++ b/src/core/components/elements/Spinner/Spinner.jsx @@ -1,13 +1,25 @@ const Spinner = ({ className }) => { return ( - <div role="status"> - <svg aria-hidden="true" className={"animate-spin " + className} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg"> - <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/> - <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/> - </svg> - <span className="sr-only">Loading...</span> + <div role='status'> + <svg + aria-hidden='true' + className={'animate-spin ' + className} + viewBox='0 0 100 101' + fill='none' + xmlns='http://www.w3.org/2000/svg' + > + <path + d='M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z' + fill='currentColor' + /> + <path + d='M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z' + fill='currentFill' + /> + </svg> + <span className='sr-only'>Loading...</span> </div> ) } -export default Spinner
\ No newline at end of file +export default Spinner diff --git a/src/core/components/layouts/AnimationLayout.jsx b/src/core/components/layouts/AnimationLayout.jsx index cf2b06d5..357187b2 100644 --- a/src/core/components/layouts/AnimationLayout.jsx +++ b/src/core/components/layouts/AnimationLayout.jsx @@ -1,22 +1,24 @@ import { motion } from 'framer-motion' const AnimationLayout = ({ children, ...props }) => { - const transition = { - ease: 'easeIn', + const transition = { + ease: 'easeIn', duration: 0.3 } - return children && ( - <motion.main - initial={{ opacity: 0, x: 0, y: 0 }} - animate={{ opacity: 1, x: 0, y: 0 }} - exit={{ opacity: 0, x: 30, y: 0 }} - transition={transition} - {...props} - > - { children } - </motion.main> + return ( + children && ( + <motion.main + initial={{ opacity: 0, x: 0, y: 0 }} + animate={{ opacity: 1, x: 0, y: 0 }} + exit={{ opacity: 0, x: 30, y: 0 }} + transition={transition} + {...props} + > + {children} + </motion.main> + ) ) } -export default AnimationLayout
\ No newline at end of file +export default AnimationLayout diff --git a/src/core/components/layouts/AppLayout.jsx b/src/core/components/layouts/AppLayout.jsx index 3e986477..3e3c8ee5 100644 --- a/src/core/components/layouts/AppLayout.jsx +++ b/src/core/components/layouts/AppLayout.jsx @@ -1,15 +1,15 @@ -import AppBar from "../elements/Appbar/Appbar" -import AnimationLayout from "./AnimationLayout" +import AppBar from '../elements/Appbar/Appbar' +import AnimationLayout from './AnimationLayout' const AppLayout = ({ children, title }) => { return ( <> <AnimationLayout> - <AppBar title={title}/> - { children } + <AppBar title={title} /> + {children} </AnimationLayout> </> ) } -export default AppLayout
\ No newline at end of file +export default AppLayout diff --git a/src/core/components/layouts/BasicLayout.jsx b/src/core/components/layouts/BasicLayout.jsx index 98134b32..6f176737 100644 --- a/src/core/components/layouts/BasicLayout.jsx +++ b/src/core/components/layouts/BasicLayout.jsx @@ -1,17 +1,15 @@ -import dynamic from "next/dynamic" +import dynamic from 'next/dynamic' -const Navbar = dynamic(() => import("../elements/Navbar/Navbar")) -const AnimationLayout = dynamic(() => import("./AnimationLayout")) +const Navbar = dynamic(() => import('../elements/Navbar/Navbar')) +const AnimationLayout = dynamic(() => import('./AnimationLayout')) const BasicLayout = ({ children }) => { return ( <> <Navbar /> - <AnimationLayout> - { children } - </AnimationLayout> + <AnimationLayout>{children}</AnimationLayout> </> ) } -export default BasicLayout
\ No newline at end of file +export default BasicLayout |