blob: 1760360db68a1a3654f36816b07c376a9e86d1a5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
import { useEffect, useState } from 'react'
import { getCartApi } from '../api/CartApi'
import currencyFormat from '@/core/utils/currencyFormat'
import Image from '@/core/components/elements/Image/Image'
import { createSlug } from '@/core/utils/slug'
const { ShoppingCartIcon } = require('@heroicons/react/24/outline')
const { default: Link } = require('next/link')
const Cardheader = (cartCount) => {
const [count, setCardCount] = useState(null)
const [products, setProducts] = useState(null)
const getCart = async () => {
const listCart = await getCartApi()
setProducts(listCart.products)
}
useEffect(() => {
getCart()
}, [])
return (
<div className='relative group'>
<Link
href='/shop/cart'
target='_blank'
rel='noreferrer'
className='flex items-center gap-x-2 !text-gray_r-12/80'
>
<div className={`relative ${cartCount.cartCount > 0 && 'mr-2'}`}>
<ShoppingCartIcon className='w-7' />
{cartCount.cartCount > 0 && (
<span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
{cartCount.cartCount}
</span>
)}
</div>
<span>
Keranjang
<br />
Belanja
</span>
</Link>
{/* <div className='hidden group-hover:block fixed top-0 left-0 w-full h-full bg-black opacity-50 z-10'></div> */}
<div className='hidden group-hover:block absolute z-10 left-0 w-96'>
<div className='w-full max-w-md p-2 bg-white border border-gray-200 rounded-lg shadow'>
<div className='p-2 flex justify-between items-center'>
<h5 class='text-base font-semibold leading-none'>Keranjang Belanja</h5>
<Link href='/shop/cart' class='text-sm font-medium text-red-600 underline'>
Lihat Semua
</Link>
</div>
<hr className='mt-3 mb-3 border border-gray-100' />
<div className='flow-root max-h-[250px] overflow-y-auto'>
<ul role='list' class='divide-y divide-gray-200 dark:divide-gray-700'>
{products &&
products?.map((product, index) => (
<>
<li class='py-1 sm:py-2'>
<div class='flex items-center space-x-4'>
<div class='flex-shrink-0'>
<Link
href={createSlug(
'/shop/product/',
product?.parent.name,
product?.parent.id
)}
className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
>
<Image
src={product?.parent?.image}
alt={product?.name}
className='object-contain object-center border border-gray_r-6 h-16 w-16 rounded-md'
/>
</Link>
</div>
<div class='flex-1 min-w-0'>
<Link
href={createSlug(
'/shop/product/',
product?.parent.name,
product?.parent.id
)}
className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
>
{' '}
<p class='text-caption-2 font-medium text-gray-900 truncate dark:text-white'>
{product.parent.name}
</p>
</Link>
{product?.price?.discountPercentage > 0 && (
<div className='flex gap-x-1 items-center mb-2 mt-1'>
<div className='badge-solid-red'>
{product?.price?.discountPercentage}%
</div>
<div className='text-gray_r-11 line-through text-caption-2'>
{currencyFormat(product?.price?.price)}
</div>
</div>
)}
<div className='flex justify-between items-center'>
<div className='font-semibold text-sm text-red-600'>
{currencyFormat(product?.price?.priceDiscount)}
</div>
</div>
</div>
</div>
</li>
</>
))}
</ul>
<hr />
</div>
{/* <div className='mt-3'>
<Link href='#' className='text-caption-1 text-red-600 underline'>
Buka Keranjang Belanja
</Link>
</div> */}
</div>
</div>
</div>
)
}
export default Cardheader
|
