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
|
import React, { useState } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import 'swiper/swiper.min.css'
import Image from '@/core/components/elements/Image/Image'
import useDevice from '@/core/hooks/useDevice'
const HomePage = () => {
const [activeTab, setActiveTab] = useState('Tab 1')
const { isMobile, isDesktop } = useDevice()
const handleTabClick = (label) => {
setActiveTab(label)
}
const tabItems = [
{ label: 'Tab 1', content: 'Content for Tab 1' },
{ label: 'Tab 2', content: 'Content for Tab 2' },
{ label: 'Tab 3', content: 'Content for Tab 3' },
{ label: 'Tab 4', content: 'Content for Tab 4' },
{ label: 'Tab 5', content: 'Content for Tab 5' },
{ label: 'Tab 6', content: 'Content for Tab 6' },
{ label: 'Tab 7', content: 'Content for Tab 7' },
{ label: 'Tab 8', content: 'Content for Tab 8' },
{ label: 'Tab 9', content: 'Content for Tab 9' },
{ label: 'Tab 10', content: 'Content for Tab 10' }
]
return (
<div className='px-4 sm:px-0'>
<div className='flex justify-between items-center mb-4'>
<div className='font-medium sm:text-h-lg'>{activeTab}</div>
</div>
<Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
{tabItems.map((item, index) => (
<SwiperSlide key={index}>
<button
className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
activeTab === item.label ? 'border-red-500' : 'border-gray_r-6'
}`}
onClick={() => handleTabClick(item.label)}
>
{' '}
<Image
src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/10'
alt=''
className='h-full w-full object-contain object-center'
/>
</button>
</SwiperSlide>
))}
</Swiper>
<div className='mt-4'>
{tabItems.map((item, index) => (
<div
key={index}
className={`${
activeTab === item.label ? 'block' : 'hidden'
} bg-gray-100 p-4 rounded-md`}
>
{item.content}
</div>
))}
</div>
</div>
)
}
export default HomePage
|
