responsive base v1
This commit is contained in:
hamid zarghami
@@ -0,0 +1,216 @@
|
||||
'use client'
|
||||
import { FC, useState } from 'react'
|
||||
import { ArrowLeft2 } from 'iconsax-react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
type Props = {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const CategoryModal: FC<Props> = ({ isOpen, onClose }) => {
|
||||
const router = useRouter()
|
||||
const [selectedMainCategory, setSelectedMainCategory] = useState<number>(0)
|
||||
const [expandedSubcategory, setExpandedSubcategory] = useState<string | null>(null)
|
||||
|
||||
// Main categories for the left column
|
||||
const mainCategories = [
|
||||
{ icon: '🏪', title: 'سوپر مارکت ارگانیک' },
|
||||
{ icon: '🍞', title: 'خانه نان و شیرینی سالم' },
|
||||
{ icon: '🍎', title: 'بوفه رژیمهای خاص' },
|
||||
{ icon: '💪', title: 'بوفه سبک زندگی' },
|
||||
{ icon: '🌿', title: 'عطاری سلامت' },
|
||||
{ icon: '🎁', title: 'بوفه هدایا و سوغات' }
|
||||
]
|
||||
|
||||
// Subcategories for each main category
|
||||
const categorySubcategories = {
|
||||
'سوپر مارکت ارگانیک': [
|
||||
{ title: 'ارگانیک گواهیدار', hasChildren: false },
|
||||
{ title: 'روغن های سالم', hasChildren: true },
|
||||
{ title: 'چاشنی سلامت', hasChildren: true },
|
||||
{ title: 'صبحانه سالم', hasChildren: false },
|
||||
{ title: 'نوشیدنی سالم', hasChildren: false },
|
||||
{ title: 'آرایشی', hasChildren: false },
|
||||
{ title: 'بهداشتی', hasChildren: false },
|
||||
{ title: 'تازه خوری', hasChildren: false },
|
||||
{ title: 'حبوبات و غلات', hasChildren: false },
|
||||
{ title: 'تنقلات', hasChildren: false },
|
||||
{ title: 'چای و دمنوش', hasChildren: false },
|
||||
{ title: 'قهوه', hasChildren: false },
|
||||
{ title: 'قند و شکر', hasChildren: false }
|
||||
],
|
||||
'خانه نان و شیرینی سالم': [
|
||||
{ title: 'نان سنتی', hasChildren: false },
|
||||
{ title: 'نان صنعتی', hasChildren: false },
|
||||
{ title: 'شیرینی', hasChildren: false },
|
||||
{ title: 'کیک و کلوچه', hasChildren: false }
|
||||
],
|
||||
'بوفه رژیمهای خاص': [
|
||||
{ title: 'رژیم کتو', hasChildren: false },
|
||||
{ title: 'رژیم وگان', hasChildren: false },
|
||||
{ title: 'بدون گلوتن', hasChildren: false }
|
||||
],
|
||||
'بوفه سبک زندگی': [
|
||||
{ title: 'ورزشی', hasChildren: false },
|
||||
{ title: 'لاغری', hasChildren: false },
|
||||
{ title: 'سالمندان', hasChildren: false }
|
||||
],
|
||||
'عطاری سلامت': [
|
||||
{ title: 'گیاهان دارویی', hasChildren: false },
|
||||
{ title: 'عسل طبیعی', hasChildren: false },
|
||||
{ title: 'دمنوش', hasChildren: false }
|
||||
],
|
||||
'بوفه هدایا و سوغات': [
|
||||
{ title: 'هدایا', hasChildren: false },
|
||||
{ title: 'سوغات', hasChildren: false },
|
||||
{ title: 'بسته بندی ویژه', hasChildren: false }
|
||||
]
|
||||
}
|
||||
|
||||
// Third level subcategories (for items that expand)
|
||||
const thirdLevelCategories = {
|
||||
'روغن های سالم': [
|
||||
{ icon: '🫒', title: 'روغن زیتون پیوست و مو' },
|
||||
{ icon: '🌻', title: 'روغن ماساژ' },
|
||||
{ icon: '🥥', title: 'روغن های خوراکی' }
|
||||
],
|
||||
'چاشنی سلامت': [
|
||||
{ icon: '🥒', title: 'ترشی' },
|
||||
{ icon: '🥫', title: 'رب ها' },
|
||||
{ icon: '🍯', title: 'سس ها' },
|
||||
{ icon: '🥬', title: 'سبزیجات خشک' },
|
||||
{ icon: '🌶️', title: 'ادویه' },
|
||||
{ icon: '🍎', title: 'سرکه' },
|
||||
{ icon: '🫒', title: 'زیتون' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleMainCategoryClick = (index: number) => {
|
||||
setSelectedMainCategory(index)
|
||||
setExpandedSubcategory(null)
|
||||
}
|
||||
|
||||
const handleSubcategoryClick = (subcategory: { title: string; hasChildren: boolean }) => {
|
||||
if (subcategory.hasChildren && thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories]) {
|
||||
setExpandedSubcategory(expandedSubcategory === subcategory.title ? null : subcategory.title)
|
||||
} else {
|
||||
router.push(`/products/${subcategory.title}`)
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
const currentMainCategory = mainCategories[selectedMainCategory]
|
||||
const currentSubcategories = categorySubcategories[currentMainCategory.title as keyof typeof categorySubcategories] || []
|
||||
|
||||
return (
|
||||
<div className="fixed top-[120px] left-0 right-0 bottom-0 bg-white z-40 md:hidden">
|
||||
<div className="flex h-full overflow-hidden">
|
||||
{/* Left Column - Main Categories */}
|
||||
<div className="w-28 bg-gray-100 overflow-y-auto">
|
||||
<div className="p-2 space-y-2">
|
||||
{mainCategories.map((category, index) => (
|
||||
<div key={index}>
|
||||
<div
|
||||
className={`flex flex-col items-center text-center p-2 cursor-pointer rounded-lg transition-colors ${index === selectedMainCategory ? 'bg-white shadow-sm' : 'hover:bg-gray-200'
|
||||
}`}
|
||||
onClick={() => handleMainCategoryClick(index)}
|
||||
>
|
||||
<div className="w-12 h-12 bg-white rounded-full flex items-center justify-center mb-1 shadow-sm">
|
||||
<span className="text-lg">{category.icon}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-800 leading-tight text-center">
|
||||
{category.title}
|
||||
</span>
|
||||
</div>
|
||||
{index < mainCategories.length - 1 && (
|
||||
<div className="border-b border-gray-200 mx-1" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Subcategories */}
|
||||
<div className="flex-1 bg-white overflow-y-auto">
|
||||
<div className="px-4 py-4">
|
||||
{/* Special Categories */}
|
||||
<div className="space-y-1 mb-4">
|
||||
<div
|
||||
className="py-3 cursor-pointer hover:bg-gray-50 transition-colors"
|
||||
onClick={() => {
|
||||
router.push('/products')
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
<span className="text-primary font-medium text-sm">همه محصولات سوپر مارکت ارگانیک</span>
|
||||
</div>
|
||||
<div
|
||||
className="py-3 cursor-pointer hover:bg-gray-50 transition-colors"
|
||||
onClick={() => {
|
||||
router.push('/products/organic')
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
<span className="text-gray-800 font-medium text-sm">ارگانیک گواهیدار</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subcategories List */}
|
||||
<div>
|
||||
{currentSubcategories.map((subcategory, index) => (
|
||||
<div key={index}>
|
||||
<div
|
||||
className="flex items-center justify-between py-3 cursor-pointer hover:bg-gray-50 transition-colors"
|
||||
onClick={() => handleSubcategoryClick(subcategory)}
|
||||
>
|
||||
<span className="text-gray-800 text-sm">{subcategory.title}</span>
|
||||
{subcategory.hasChildren && (
|
||||
<ArrowLeft2 size={16} color="#666" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Expanded third level categories */}
|
||||
{expandedSubcategory === subcategory.title && thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories] && (
|
||||
<div className="mt-2 mb-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="text-sm text-primary mb-3 font-medium">
|
||||
همه محصولات {subcategory.title}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{thirdLevelCategories[subcategory.title as keyof typeof thirdLevelCategories].map((item, itemIndex) => (
|
||||
<div
|
||||
key={itemIndex}
|
||||
className="flex flex-col items-center p-4 bg-white rounded-lg cursor-pointer hover:bg-gray-100 transition-colors"
|
||||
onClick={() => {
|
||||
router.push(`/products/${item.title}`)
|
||||
onClose()
|
||||
}}
|
||||
>
|
||||
<div className="w-14 h-14 bg-white rounded-full flex items-center justify-center mb-3 border border-gray-200">
|
||||
<span className="text-xl">{item.icon}</span>
|
||||
</div>
|
||||
<span className="text-sm text-gray-800 text-center leading-tight font-medium">
|
||||
{item.title}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{index < currentSubcategories.length - 1 && (
|
||||
<div className="border-b border-gray-100" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CategoryModal
|
||||
Reference in New Issue
Block a user