hamid zarghami
97 lines
3.2 KiB
TypeScript
97 lines
3.2 KiB
TypeScript
import { Layer, ArrowRight2, Book1 } from 'iconsax-react'
|
|
import { clx } from '@/helpers/utils'
|
|
import { useState } from 'react'
|
|
import PagesPanel from './PagesPanel'
|
|
import LayersList from './LayersList'
|
|
|
|
type TabType = 'pages' | 'layers'
|
|
|
|
type LayersPanelProps = {
|
|
isOpen: boolean
|
|
setIsOpen: (isOpen: boolean) => void
|
|
}
|
|
|
|
const LayersPanel = ({ isOpen, setIsOpen }: LayersPanelProps) => {
|
|
const [activeTab, setActiveTab] = useState<TabType>('pages')
|
|
|
|
if (!isOpen) {
|
|
return (
|
|
<div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
|
|
<div className="bg-white rounded-t-[32px] rounded-b-[32px] w-16 h-full flex flex-col items-center gap-4 p-4">
|
|
<button
|
|
onClick={() => {
|
|
setActiveTab('pages')
|
|
setIsOpen(true)
|
|
}}
|
|
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
|
|
>
|
|
<Book1 size={24} color="black" />
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setActiveTab('layers')
|
|
setIsOpen(true)
|
|
}}
|
|
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-200 transition-colors"
|
|
>
|
|
<Layer size={24} color="black" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="fixed left-4 top-[100px] bottom-4 z-30 flex flex-col">
|
|
<div className="bg-white rounded-l-4xl w-16 h-full flex flex-col items-center gap-4 p-4">
|
|
<button
|
|
onClick={() => {
|
|
setActiveTab('pages')
|
|
}}
|
|
className={clx(
|
|
'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
|
|
activeTab === 'pages' ? 'bg-white' : 'hover:bg-gray-200'
|
|
)}
|
|
>
|
|
<Book1 variant={activeTab === 'pages' ? 'Bold' : 'Outline'} size={24} color="black" />
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
setActiveTab('layers')
|
|
}}
|
|
className={clx(
|
|
'w-10 h-10 flex items-center justify-center rounded-lg transition-colors',
|
|
activeTab === 'layers' ? 'bg-white' : 'hover:bg-gray-200'
|
|
)}
|
|
>
|
|
<Layer variant={activeTab === 'layers' ? 'Bold' : 'Outline'} size={24} color="black" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="fixed border-l border-border left-20 top-[100px] bottom-4 z-30 flex flex-col w-[232px]">
|
|
<div className="bg-white rounded-r-4xl flex flex-col h-full">
|
|
<div className="flex items-center justify-between p-4 border-b border-border">
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
onClick={() => setIsOpen(false)}
|
|
className="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-100 transition-colors"
|
|
>
|
|
<ArrowRight2 size={20} color="black" />
|
|
</button>
|
|
<h2 className="text-lg font-medium">
|
|
{activeTab === 'pages' ? 'صفحات' : 'لایه ها'}
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
|
|
{activeTab === 'pages' ? <PagesPanel /> : <LayersList />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LayersPanel
|
|
|