diff options
| -rw-r--r-- | src-migrate/modules/promo/components/Hero.tsx | 55 | ||||
| -rw-r--r-- | src-migrate/modules/promo/components/Voucher.tsx | 11 | ||||
| -rw-r--r-- | src-migrate/modules/promo/styles/hero.module.css | 27 | ||||
| -rw-r--r-- | src-migrate/modules/promo/styles/voucher.module.css | 3 | ||||
| -rw-r--r-- | src-migrate/pages/shop/promo/index.tsx | 17 | ||||
| -rw-r--r-- | src-migrate/services/banner.ts | 13 | ||||
| -rw-r--r-- | src-migrate/types/banner.ts | 8 | ||||
| -rw-r--r-- | src/core/components/elements/Navbar/NavbarDesktop.jsx | 18 | ||||
| -rw-r--r-- | src/pages/shop/promo/index.jsx | 38 |
9 files changed, 181 insertions, 9 deletions
diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx new file mode 100644 index 00000000..63524509 --- /dev/null +++ b/src-migrate/modules/promo/components/Hero.tsx @@ -0,0 +1,55 @@ +import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; +import style from '../styles/hero.module.css'; +import 'swiper/css' +import Image from 'next/image'; +import { useQuery } from 'react-query'; +import { getBanner } from '~/services/banner'; + +const swiperBanner: SwiperProps = { + autoplay: { + delay: 6000, + disableOnInteraction: false + }, + // modules: [Pagination, Autoplay], + loop: true, + className: 'h-[400px] w-full', + slidesPerView: 1.1, + spaceBetween: 10 +} + +const Hero = () => { + const bannerQuery = useQuery({ + queryKey: ['banner.all-promo'], + queryFn: () => getBanner({ type: 'all-promo' }) + }) + + const banners = bannerQuery.data || [] + + return ( + <div className={style['wrapper']}> + <div className={style['desc-section']}> + <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div> + <div className='h-4' /> + <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div> + </div> + + <div className={style['banner-section']}> + <Swiper {...swiperBanner}> + {banners.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/363' + alt={banner.name} + width={666} + height={450} + className='w-full h-full object-cover object-center rounded-2xl' + /> + </SwiperSlide> + ))} + </Swiper> + </div> + </div> + ) +} + +export default Hero
\ No newline at end of file diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx new file mode 100644 index 00000000..11742f9a --- /dev/null +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -0,0 +1,11 @@ +import style from '../styles/voucher.module.css' + +const Voucher = () => { + return ( + <> + <div className={style['title']}>Pakai Voucher Belanja</div> + </> + ) +} + +export default Voucher
\ No newline at end of file diff --git a/src-migrate/modules/promo/styles/hero.module.css b/src-migrate/modules/promo/styles/hero.module.css new file mode 100644 index 00000000..70d725be --- /dev/null +++ b/src-migrate/modules/promo/styles/hero.module.css @@ -0,0 +1,27 @@ +.wrapper { + @apply bg-warning-100/50 rounded-xl w-full h-[460px] flex; +} + +.desc-section { + @apply w-full md:w-5/12 + flex flex-col + md:justify-center + p-6 md:pl-10; +} + +.title { + @apply text-title-sm md:text-title-lg + leading-[30px] md:leading-[42px] + font-semibold; +} + +.subtitle { + @apply text-body-2 leading-7 text-gray-700; +} + +.banner-section { + @apply md:w-7/12 + flex flex-col + md:justify-center + md:pr-10; +} diff --git a/src-migrate/modules/promo/styles/voucher.module.css b/src-migrate/modules/promo/styles/voucher.module.css new file mode 100644 index 00000000..22a3a0ac --- /dev/null +++ b/src-migrate/modules/promo/styles/voucher.module.css @@ -0,0 +1,3 @@ +.title { + @apply text-h-sm md:text-h-lg font-semibold; +} diff --git a/src-migrate/pages/shop/promo/index.tsx b/src-migrate/pages/shop/promo/index.tsx new file mode 100644 index 00000000..df2e9dcb --- /dev/null +++ b/src-migrate/pages/shop/promo/index.tsx @@ -0,0 +1,17 @@ +import React from 'react' +import Hero from '~/modules/promo/components/Hero' +import Voucher from '~/modules/promo/components/Voucher' + +const PromoPage = () => { + return ( + <> + <Hero /> + + <div className='h-10' /> + + <Voucher /> + </> + ) +} + +export default PromoPage
\ No newline at end of file diff --git a/src-migrate/services/banner.ts b/src-migrate/services/banner.ts new file mode 100644 index 00000000..cb7b19cc --- /dev/null +++ b/src-migrate/services/banner.ts @@ -0,0 +1,13 @@ +import odooApi from '~/libs/odooApi'; +import { IBanner } from '~/types/banner'; + +type GetBannerProps = { + type: string; +}; + +export const getBanner = async (params: GetBannerProps): Promise<IBanner[]> => { + const url = `/api/v1/banner`; + const searchParams = new URLSearchParams(params); + + return await odooApi('GET', `${url}?${searchParams}`); +}; diff --git a/src-migrate/types/banner.ts b/src-migrate/types/banner.ts new file mode 100644 index 00000000..e1604ad4 --- /dev/null +++ b/src-migrate/types/banner.ts @@ -0,0 +1,8 @@ +export interface IBanner { + image: string; + name: string; + sequence: number; + url: string | false; + group_by_week: number | false; + background_color: string | false; +} diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx index 9bcd4df2..2605acbb 100644 --- a/src/core/components/elements/Navbar/NavbarDesktop.jsx +++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx @@ -168,6 +168,14 @@ const NavbarDesktop = () => { </button> <div className='w-6/12 flex px-1 divide-x divide-gray_r-6'> <Link + href='/shop/promo' + className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' + target='_blank' + rel='noreferrer' + > + Semua Promo + </Link> + <Link href='/shop/brands' className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' target='_blank' @@ -189,15 +197,7 @@ const NavbarDesktop = () => { target='_blank' rel='noreferrer noopener' > - Blog Indoteknik - </Link> - <Link - href='/video' - className='p-4 flex-1 flex justify-center items-center !text-gray_r-12/80 hover:bg-gray_r-3 idt-transition' - target='_blank' - rel='noreferrer' - > - Indoteknik TV + Blog </Link> </div> diff --git a/src/pages/shop/promo/index.jsx b/src/pages/shop/promo/index.jsx new file mode 100644 index 00000000..0d831c21 --- /dev/null +++ b/src/pages/shop/promo/index.jsx @@ -0,0 +1,38 @@ +import BasicLayout from '@/core/components/layouts/BasicLayout'; +import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react'; +import Link from 'next/link'; +import Promo from '~/pages/shop/promo'; + +import React from 'react'; + +const PromoPage = () => { + return ( + <BasicLayout> + <div className='container mx-auto py-4 md:py-6 pb-0'> + <Breadcrumb> + <BreadcrumbItem> + <BreadcrumbLink + as={Link} + href='/' + className='!text-danger-500 whitespace-nowrap' + > + Home + </BreadcrumbLink> + </BreadcrumbItem> + + <BreadcrumbItem isCurrentPage> + <BreadcrumbLink className='whitespace-nowrap'> + Semua Promo + </BreadcrumbLink> + </BreadcrumbItem> + </Breadcrumb> + + <div className='h-10' /> + + <Promo /> + </div> + </BasicLayout> + ); +}; + +export default PromoPage; |