From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 17 Feb 2023 17:07:50 +0700 Subject: Refactor --- src/core/components/elements/Appbar/Appbar.jsx | 33 ++++++++ src/core/components/elements/Badge/Badge.jsx | 33 ++++++++ src/core/components/elements/Divider/Divider.jsx | 11 +++ src/core/components/elements/Image/Image.jsx | 15 ++++ src/core/components/elements/Link/Link.jsx | 17 +++++ src/core/components/elements/NavBar/NavBar.jsx | 31 ++++++++ src/core/components/elements/NavBar/Search.jsx | 89 ++++++++++++++++++++++ .../components/elements/Pagination/Pagination.js | 64 ++++++++++++++++ src/core/components/elements/Popup/BottomPopup.jsx | 21 +++++ .../components/elements/Skeleton/BrandSkeleton.jsx | 8 ++ .../components/elements/Skeleton/ImageSkeleton.jsx | 10 +++ .../elements/Skeleton/ProductCardSkeleton.jsx | 15 ++++ 12 files changed, 347 insertions(+) create mode 100644 src/core/components/elements/Appbar/Appbar.jsx create mode 100644 src/core/components/elements/Badge/Badge.jsx create mode 100644 src/core/components/elements/Divider/Divider.jsx create mode 100644 src/core/components/elements/Image/Image.jsx create mode 100644 src/core/components/elements/Link/Link.jsx create mode 100644 src/core/components/elements/NavBar/NavBar.jsx create mode 100644 src/core/components/elements/NavBar/Search.jsx create mode 100644 src/core/components/elements/Pagination/Pagination.js create mode 100644 src/core/components/elements/Popup/BottomPopup.jsx create mode 100644 src/core/components/elements/Skeleton/BrandSkeleton.jsx create mode 100644 src/core/components/elements/Skeleton/ImageSkeleton.jsx create mode 100644 src/core/components/elements/Skeleton/ProductCardSkeleton.jsx (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx new file mode 100644 index 00000000..0fe087d3 --- /dev/null +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -0,0 +1,33 @@ +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 ( + + ) +} + +export default AppBar \ No newline at end of file diff --git a/src/core/components/elements/Badge/Badge.jsx b/src/core/components/elements/Badge/Badge.jsx new file mode 100644 index 00000000..5d8ebd1c --- /dev/null +++ b/src/core/components/elements/Badge/Badge.jsx @@ -0,0 +1,33 @@ +const Badge = ({ + children, + type, + ...props +}) => { + return ( +
+ { children } +
+ ) +} + +Badge.defaultProps = { + className: '' +} + +const badgeStyle = (type) => { + let className = ['rounded px-1 text-[11px]'] + switch (type) { + case 'solid-red': + className.push('bg-red_r-11 text-white') + break + case 'light': + className.push('bg-gray_r-4 text-gray_r-11') + break + } + return className.join(' ') +} + +export default Badge \ No newline at end of file diff --git a/src/core/components/elements/Divider/Divider.jsx b/src/core/components/elements/Divider/Divider.jsx new file mode 100644 index 00000000..355cd509 --- /dev/null +++ b/src/core/components/elements/Divider/Divider.jsx @@ -0,0 +1,11 @@ +const Divider = (props) => { + return ( +
+ ) +} + +Divider.defaultProps = { + className: '' +} + +export default Divider \ No newline at end of file diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx new file mode 100644 index 00000000..be2866e7 --- /dev/null +++ b/src/core/components/elements/Image/Image.jsx @@ -0,0 +1,15 @@ +import { LazyLoadImage } from "react-lazy-load-image-component" +import "react-lazy-load-image-component/src/effects/opacity.css" + +const Image = ({ ...props }) => ( + +) + +Image.defaultProps = LazyLoadImage.defaultProps + +export default Image \ No newline at end of file diff --git a/src/core/components/elements/Link/Link.jsx b/src/core/components/elements/Link/Link.jsx new file mode 100644 index 00000000..a619164d --- /dev/null +++ b/src/core/components/elements/Link/Link.jsx @@ -0,0 +1,17 @@ +import NextLink from "next/link" + +const Link = ({ children, ...props }) => { + return ( + + {children} + + ) +} + +Link.defaultProps = NextLink.defaultProps + +export default Link \ No newline at end of file diff --git a/src/core/components/elements/NavBar/NavBar.jsx b/src/core/components/elements/NavBar/NavBar.jsx new file mode 100644 index 00000000..212fd341 --- /dev/null +++ b/src/core/components/elements/NavBar/NavBar.jsx @@ -0,0 +1,31 @@ +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 Search from "./Search" + +const NavBar = () => { + return ( + + ) +} + +export default NavBar \ No newline at end of file diff --git a/src/core/components/elements/NavBar/Search.jsx b/src/core/components/elements/NavBar/Search.jsx new file mode 100644 index 00000000..cca1a97c --- /dev/null +++ b/src/core/components/elements/NavBar/Search.jsx @@ -0,0 +1,89 @@ +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([]) + + useEffect(() => { + setQuery(router.query.q) + }, [router.query]) + + const loadSuggestion = useCallback(() => { + if (query && document.activeElement == queryRef.current) { + (async () => { + const dataSuggestion = await searchSuggestApi({ query }) + setSuggestions(dataSuggestion.data.suggestions) + })() + return + } else { + setSuggestions([]) + } + }, [ query ]) + + useEffect(() => { + if (query && document.activeElement == queryRef.current) { + loadSuggestion() + } else { + setSuggestions([]) + } + }, [ loadSuggestion, query ]) + + const handleSubmit = (e) => { + e.preventDefault() + if (query) { + router.push(`/shop/search?q=${query}`) + } else { + queryRef.current.focus() + } + } + + const onInputBlur = () => { + setTimeout(() => { + setSuggestions([]) + }, 100) + } + + return ( +
+ setQuery(e.target.value)} + onBlur={onInputBlur} + onFocus={loadSuggestion} + /> + + + { suggestions.length > 1 && ( + <> +
+ {suggestions.map((suggestion, index) => ( + + {suggestion.term} + + ))} +
+ + ) } +
+ ) +} + +export default Search \ No newline at end of file diff --git a/src/core/components/elements/Pagination/Pagination.js b/src/core/components/elements/Pagination/Pagination.js new file mode 100644 index 00000000..485295fe --- /dev/null +++ b/src/core/components/elements/Pagination/Pagination.js @@ -0,0 +1,64 @@ +import Link from "../Link/Link" + +const Pagination = ({ pageCount, currentPage, url, className }) => { + let firstPage = false + let lastPage = false + let dotsPrevPage = false + let dotsNextPage = false + let urlParameterPrefix = url.includes('?') ? '&' : '?' + + return pageCount > 1 && ( +
+ { Array.from(Array(pageCount)).map((v, i) => { + let page = i + 1 + let rangePrevPage = currentPage - 2 + let rangeNextPage = currentPage + 2 + let PageComponent = {page} + let DotsComponent =
...
+ + if (pageCount == 7) { + 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 > rangePrevPage && page < rangeNextPage) { + return PageComponent + } + + if (page == 1 && rangePrevPage >= 1 && !firstPage) { + firstPage = true + return PageComponent + } + + if (page == pageCount && rangeNextPage <= pageCount && !lastPage) { + lastPage = true + return PageComponent + } + + if (page > currentPage && (pageCount - currentPage) > 1 && !dotsNextPage) { + dotsNextPage = true + return DotsComponent + } + + if (page < currentPage && (currentPage - 1) > 1 && !dotsPrevPage) { + dotsPrevPage = true + return DotsComponent + } + }) } +
+ ) +} + +Pagination.defaultProps = { + className: '' +} + +export default Pagination \ No newline at end of file diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx new file mode 100644 index 00000000..e687cf20 --- /dev/null +++ b/src/core/components/elements/Popup/BottomPopup.jsx @@ -0,0 +1,21 @@ +import { XMarkIcon } from "@heroicons/react/24/outline" + +const BottomPopup = ({ children, active, title, close }) => ( + <> +
+
+
+
{ title }
+ +
+ { children } +
+ +) + +export default BottomPopup \ No newline at end of file diff --git a/src/core/components/elements/Skeleton/BrandSkeleton.jsx b/src/core/components/elements/Skeleton/BrandSkeleton.jsx new file mode 100644 index 00000000..ce5a994d --- /dev/null +++ b/src/core/components/elements/Skeleton/BrandSkeleton.jsx @@ -0,0 +1,8 @@ +const BrandSkeleton = () => ( +
+
+ Loading... +
+) + +export default BrandSkeleton \ No newline at end of file diff --git a/src/core/components/elements/Skeleton/ImageSkeleton.jsx b/src/core/components/elements/Skeleton/ImageSkeleton.jsx new file mode 100644 index 00000000..2cda9536 --- /dev/null +++ b/src/core/components/elements/Skeleton/ImageSkeleton.jsx @@ -0,0 +1,10 @@ +const ImageSkeleton = () => ( +
+
+ +
+ Loading... +
+) + +export default ImageSkeleton \ No newline at end of file diff --git a/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx new file mode 100644 index 00000000..66b48f79 --- /dev/null +++ b/src/core/components/elements/Skeleton/ProductCardSkeleton.jsx @@ -0,0 +1,15 @@ +const ProductCardSkeleton = () => ( +
+
+ +
+
+
+
+
+
+ Loading... +
+) + +export default ProductCardSkeleton \ No newline at end of file -- cgit v1.2.3 From 69f55de26319e570ce0a8c4dbe8a29cb0d0b51c5 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 18 Feb 2023 22:03:55 +0700 Subject: optimization --- src/core/components/elements/Image/Image.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx index be2866e7..579660a4 100644 --- a/src/core/components/elements/Image/Image.jsx +++ b/src/core/components/elements/Image/Image.jsx @@ -4,9 +4,10 @@ import "react-lazy-load-image-component/src/effects/opacity.css" const Image = ({ ...props }) => ( ) -- cgit v1.2.3 From d0d2a927fa1b9ac0a0e571f6e6f1294445db66a4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sun, 19 Feb 2023 22:06:00 +0700 Subject: fix --- src/core/components/elements/NavBar/NavBar.jsx | 31 --------- src/core/components/elements/NavBar/Search.jsx | 89 ------------------------ src/core/components/elements/Sidebar/Sidebar.jsx | 30 ++++++++ 3 files changed, 30 insertions(+), 120 deletions(-) delete mode 100644 src/core/components/elements/NavBar/NavBar.jsx delete mode 100644 src/core/components/elements/NavBar/Search.jsx create mode 100644 src/core/components/elements/Sidebar/Sidebar.jsx (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/NavBar/NavBar.jsx b/src/core/components/elements/NavBar/NavBar.jsx deleted file mode 100644 index 212fd341..00000000 --- a/src/core/components/elements/NavBar/NavBar.jsx +++ /dev/null @@ -1,31 +0,0 @@ -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 Search from "./Search" - -const NavBar = () => { - return ( - - ) -} - -export default NavBar \ No newline at end of file diff --git a/src/core/components/elements/NavBar/Search.jsx b/src/core/components/elements/NavBar/Search.jsx deleted file mode 100644 index cca1a97c..00000000 --- a/src/core/components/elements/NavBar/Search.jsx +++ /dev/null @@ -1,89 +0,0 @@ -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([]) - - useEffect(() => { - setQuery(router.query.q) - }, [router.query]) - - const loadSuggestion = useCallback(() => { - if (query && document.activeElement == queryRef.current) { - (async () => { - const dataSuggestion = await searchSuggestApi({ query }) - setSuggestions(dataSuggestion.data.suggestions) - })() - return - } else { - setSuggestions([]) - } - }, [ query ]) - - useEffect(() => { - if (query && document.activeElement == queryRef.current) { - loadSuggestion() - } else { - setSuggestions([]) - } - }, [ loadSuggestion, query ]) - - const handleSubmit = (e) => { - e.preventDefault() - if (query) { - router.push(`/shop/search?q=${query}`) - } else { - queryRef.current.focus() - } - } - - const onInputBlur = () => { - setTimeout(() => { - setSuggestions([]) - }, 100) - } - - return ( -
- setQuery(e.target.value)} - onBlur={onInputBlur} - onFocus={loadSuggestion} - /> - - - { suggestions.length > 1 && ( - <> -
- {suggestions.map((suggestion, index) => ( - - {suggestion.term} - - ))} -
- - ) } -
- ) -} - -export default Search \ No newline at end of file diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx new file mode 100644 index 00000000..249ccbce --- /dev/null +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -0,0 +1,30 @@ +import Link from "../Link/Link" + +const Sidebar = ({ + active, + close +}) => { + return ( + <> + { active &&
} +
+
+ + Semua Brand + + + Tentang Indoteknik + + + Pusat Bantuan + + + Kategori + +
+
+ + ) +} + +export default Sidebar \ No newline at end of file -- cgit v1.2.3 From 7bb1e940336f306f4755ec9d05dd6c1f29232b23 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sun, 19 Feb 2023 22:07:29 +0700 Subject: change navbar --- src/core/components/elements/Navbar/Navbar.jsx | 36 +++++++++++ src/core/components/elements/Navbar/Search.jsx | 89 ++++++++++++++++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 src/core/components/elements/Navbar/Navbar.jsx create mode 100644 src/core/components/elements/Navbar/Search.jsx (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx new file mode 100644 index 00000000..e7f447eb --- /dev/null +++ b/src/core/components/elements/Navbar/Navbar.jsx @@ -0,0 +1,36 @@ +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 Search from "./Search" +import useSidebar from "@/core/hooks/useSidebar" + +const Navbar = () => { + const { Sidebar, open } = useSidebar() + return ( + <> + + { Sidebar } + + ) +} + +export default Navbar \ No newline at end of file diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx new file mode 100644 index 00000000..cca1a97c --- /dev/null +++ b/src/core/components/elements/Navbar/Search.jsx @@ -0,0 +1,89 @@ +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([]) + + useEffect(() => { + setQuery(router.query.q) + }, [router.query]) + + const loadSuggestion = useCallback(() => { + if (query && document.activeElement == queryRef.current) { + (async () => { + const dataSuggestion = await searchSuggestApi({ query }) + setSuggestions(dataSuggestion.data.suggestions) + })() + return + } else { + setSuggestions([]) + } + }, [ query ]) + + useEffect(() => { + if (query && document.activeElement == queryRef.current) { + loadSuggestion() + } else { + setSuggestions([]) + } + }, [ loadSuggestion, query ]) + + const handleSubmit = (e) => { + e.preventDefault() + if (query) { + router.push(`/shop/search?q=${query}`) + } else { + queryRef.current.focus() + } + } + + const onInputBlur = () => { + setTimeout(() => { + setSuggestions([]) + }, 100) + } + + return ( +
+ setQuery(e.target.value)} + onBlur={onInputBlur} + onFocus={loadSuggestion} + /> + + + { suggestions.length > 1 && ( + <> +
+ {suggestions.map((suggestion, index) => ( + + {suggestion.term} + + ))} +
+ + ) } +
+ ) +} + +export default Search \ No newline at end of file -- cgit v1.2.3 From 71ca8757d549c62e7b2925793689815f4ab771ad Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sun, 19 Feb 2023 22:18:01 +0700 Subject: fix --- src/core/components/elements/Navbar/Navbar.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx index e7f447eb..99fdc446 100644 --- a/src/core/components/elements/Navbar/Navbar.jsx +++ b/src/core/components/elements/Navbar/Navbar.jsx @@ -1,10 +1,12 @@ +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 Search from "./Search" import useSidebar from "@/core/hooks/useSidebar" +const Search = dynamic(() => import("./Search")) + const Navbar = () => { const { Sidebar, open } = useSidebar() return ( -- cgit v1.2.3 From d22df6bd30b8ed4bcfa938dcbbedc5fc376c2304 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 20 Feb 2023 10:49:35 +0700 Subject: cart refactor --- src/core/components/elements/Appbar/Appbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index 0fe087d3..2a19ec6c 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -6,7 +6,7 @@ const AppBar = ({ title }) => { const router = useRouter() return ( -
-- cgit v1.2.3 From 4fd738fd54f81fa53c2b3e78b7a80fbfda250352 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 10:19:32 +0700 Subject: fix --- src/core/components/elements/Popup/BottomPopup.jsx | 52 ++++++++--- src/core/components/elements/Sidebar/Sidebar.jsx | 103 +++++++++++++-------- 2 files changed, 100 insertions(+), 55 deletions(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx index 5deceadf..933a8f11 100644 --- a/src/core/components/elements/Popup/BottomPopup.jsx +++ b/src/core/components/elements/Popup/BottomPopup.jsx @@ -1,20 +1,44 @@ import { XMarkIcon } from "@heroicons/react/24/outline" +import { AnimatePresence, motion } from "framer-motion" -const BottomPopup = ({ children, active, title, close }) => ( +const transition = { ease: 'linear', duration: 0.2 } + +const BottomPopup = ({ + children, + active = false, + title, + close +}) => ( <> -
-
-
-
{ title }
- -
- { children } -
+ + { active && ( + <> + + +
+
{ title }
+ +
+ { children } + + + ) } + ) diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 412ed915..122a10f3 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -2,6 +2,7 @@ import Link from "../Link/Link" import greeting from "@/core/utils/greeting" import { Cog6ToothIcon } from "@heroicons/react/24/solid" import useAuth from "@/core/hooks/useAuth" +import { AnimatePresence, motion } from "framer-motion" const Sidebar = ({ active, @@ -17,49 +18,69 @@ const Sidebar = ({ ) const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal' - + const transition = { ease: 'linear', duration: 0.1 } + return ( <> - { active &&
} -
-
-
- { !auth && ( - <> - Daftar - Masuk - - ) } - { auth && ( - <> -
- { greeting() }, - - { auth?.name } - -
- - - - - ) } -
- - Semua Brand - - - Tentang Indoteknik - - - Pusat Bantuan - - -
-
+ + { active && ( + <> + + +
+
+ { !auth && ( + <> + Daftar + Masuk + + ) } + { auth && ( + <> +
+ { greeting() }, + + { auth?.name } + +
+ + + + + ) } +
+ + Semua Brand + + + Tentang Indoteknik + + + Pusat Bantuan + + +
+ + + ) } + ) } -- cgit v1.2.3 From 488f323e4441b75244785cb66b018f1179b262de Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 10:31:23 +0700 Subject: fix --- src/core/components/elements/Popup/BottomPopup.jsx | 77 ++++++++------ src/core/components/elements/Sidebar/Sidebar.jsx | 116 ++++++++++----------- 2 files changed, 102 insertions(+), 91 deletions(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Popup/BottomPopup.jsx b/src/core/components/elements/Popup/BottomPopup.jsx index 933a8f11..c3c380c0 100644 --- a/src/core/components/elements/Popup/BottomPopup.jsx +++ b/src/core/components/elements/Popup/BottomPopup.jsx @@ -1,5 +1,6 @@ import { XMarkIcon } from "@heroicons/react/24/outline" import { AnimatePresence, motion } from "framer-motion" +import { useEffect } from "react" const transition = { ease: 'linear', duration: 0.2 } @@ -8,38 +9,48 @@ const BottomPopup = ({ active = false, title, close -}) => ( - <> - - { active && ( - <> - - -
-
{ title }
- -
- { children } - - - ) } - - -) +}) => { + useEffect(() => { + if (active) { + document.querySelector('html, body').classList.add('overflow-hidden') + } else { + document.querySelector('html, body').classList.remove('overflow-hidden') + } + }, [active]) + + return ( + <> + + { active && ( + <> + + +
+
{ title }
+ +
+ { children } + + + ) } + + + ) +} export default BottomPopup \ No newline at end of file diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 122a10f3..e81d6130 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -22,65 +22,65 @@ const Sidebar = ({ return ( <> - - { active && ( - <> - - -
-
- { !auth && ( - <> - Daftar - Masuk - - ) } - { auth && ( - <> -
- { greeting() }, - - { auth?.name } - -
- - - - - ) } + + { active && ( + <> + + +
+
+ { !auth && ( + <> + Daftar + Masuk + + ) } + { auth && ( + <> +
+ { greeting() }, + + { auth?.name } + +
+ + + + + ) } +
+ + Semua Brand + + + Tentang Indoteknik + + + Pusat Bantuan + +
- - Semua Brand - - - Tentang Indoteknik - - - Pusat Bantuan - - -
- - - ) } - + + + ) } + ) } -- cgit v1.2.3 From fa45f8bc91adef3bacd3460ef4e3b1151ee13e71 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 10:32:09 +0700 Subject: fix --- src/core/components/elements/Sidebar/Sidebar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index e81d6130..88de1c1c 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -18,7 +18,7 @@ const Sidebar = ({ ) const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal' - const transition = { ease: 'linear', duration: 0.1 } + const transition = { ease: 'linear', duration: 0.2 } return ( <> -- cgit v1.2.3 From fdfb47c3a825258b871ac5921605642e5e05fdd8 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 12:04:20 +0700 Subject: fix --- src/core/components/elements/Appbar/Appbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index 8d060c44..8fa5a2a7 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -22,7 +22,7 @@ const AppBar = ({ title }) => { - +
-- cgit v1.2.3 From de7361718def0f6bb32294bb074841ba2c0a3ce6 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 16:25:35 +0700 Subject: fix --- src/core/components/elements/Appbar/Appbar.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Appbar/Appbar.jsx b/src/core/components/elements/Appbar/Appbar.jsx index 8fa5a2a7..36df9edb 100644 --- a/src/core/components/elements/Appbar/Appbar.jsx +++ b/src/core/components/elements/Appbar/Appbar.jsx @@ -11,7 +11,7 @@ const AppBar = ({ title }) => { -
+
{ title }
-- cgit v1.2.3 From 5933732a74ae1ca4124ddd4e8265b1f443234736 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 21:51:51 +0700 Subject: fix --- src/core/components/elements/Image/Image.jsx | 16 +++++++++------- src/core/components/elements/Sidebar/Sidebar.jsx | 4 ++-- 2 files changed, 11 insertions(+), 9 deletions(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Image/Image.jsx b/src/core/components/elements/Image/Image.jsx index 579660a4..a6f0b00c 100644 --- a/src/core/components/elements/Image/Image.jsx +++ b/src/core/components/elements/Image/Image.jsx @@ -2,13 +2,15 @@ import { LazyLoadImage } from "react-lazy-load-image-component" import "react-lazy-load-image-component/src/effects/opacity.css" const Image = ({ ...props }) => ( - + <> + + ) Image.defaultProps = LazyLoadImage.defaultProps diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 88de1c1c..c840a688 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -44,8 +44,8 @@ const Sidebar = ({
{ !auth && ( <> - Daftar - Masuk + Daftar + Masuk ) } { auth && ( -- cgit v1.2.3 From 706088ffe9e13221207837bb658887645e76b3ed Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 21:59:24 +0700 Subject: fix --- src/core/components/elements/Navbar/Navbar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Navbar/Navbar.jsx b/src/core/components/elements/Navbar/Navbar.jsx index 99fdc446..f10ebd63 100644 --- a/src/core/components/elements/Navbar/Navbar.jsx +++ b/src/core/components/elements/Navbar/Navbar.jsx @@ -17,9 +17,9 @@ const Navbar = () => { Indoteknik Logo
- + -- cgit v1.2.3 From 036e72780ddb7a510795b329919ff9dd957af6d7 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 21 Feb 2023 22:38:25 +0700 Subject: fix --- src/core/components/elements/Sidebar/Sidebar.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index c840a688..48ceacf6 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -1,8 +1,8 @@ import Link from "../Link/Link" import greeting from "@/core/utils/greeting" -import { Cog6ToothIcon } from "@heroicons/react/24/solid" import useAuth from "@/core/hooks/useAuth" import { AnimatePresence, motion } from "framer-motion" +import { CogIcon } from "@heroicons/react/24/outline" const Sidebar = ({ active, @@ -61,7 +61,7 @@ const Sidebar = ({ href="/my/menu" className="!text-gray_r-11 ml-auto my-auto" > - + ) } -- cgit v1.2.3 From 3c559031623649a67825ff47f34512f0eb946861 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 10:14:32 +0700 Subject: fix --- src/core/components/elements/Select/HookFormSelect.jsx | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 src/core/components/elements/Select/HookFormSelect.jsx (limited to 'src/core/components/elements') diff --git a/src/core/components/elements/Select/HookFormSelect.jsx b/src/core/components/elements/Select/HookFormSelect.jsx new file mode 100644 index 00000000..45cd89b6 --- /dev/null +++ b/src/core/components/elements/Select/HookFormSelect.jsx @@ -0,0 +1,17 @@ +import ReactSelect from "react-select" + +const HookFormSelect = ({ + field, + ...props +}) => ( + field.onChange(option.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 -- cgit v1.2.3 From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 22 Feb 2023 11:03:34 +0700 Subject: prettier --- src/core/components/elements/Alert/Alert.jsx | 2 +- src/core/components/elements/Appbar/Appbar.jsx | 34 ++++--- src/core/components/elements/Badge/Badge.jsx | 15 +-- src/core/components/elements/Divider/Divider.jsx | 8 +- src/core/components/elements/Image/Image.jsx | 12 +-- src/core/components/elements/Link/Link.jsx | 8 +- src/core/components/elements/Navbar/Navbar.jsx | 40 ++++---- src/core/components/elements/Navbar/Search.jsx | 56 ++++++----- .../components/elements/Pagination/Pagination.js | 102 ++++++++++++--------- src/core/components/elements/Popup/BottomPopup.jsx | 33 +++---- .../components/elements/Select/HookFormSelect.jsx | 13 +-- src/core/components/elements/Sidebar/Sidebar.jsx | 84 +++++++++-------- .../components/elements/Skeleton/BrandSkeleton.jsx | 8 +- .../components/elements/Skeleton/ImageSkeleton.jsx | 18 +++- .../elements/Skeleton/ProductCardSkeleton.jsx | 33 ++++--- src/core/components/elements/Spinner/Spinner.jsx | 26 ++++-- 16 files changed, 262 insertions(+), 230 deletions(-) (limited to 'src/core/components/elements') 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 ( - ) } -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 ( -
- { children } +
+ {children}
) } @@ -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 ( -
- ) -} +const Divider = (props) =>
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 }) => ( <> ) 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 ( - @@ -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 ( <> -