danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

base compare

Browse Source
This commit is contained in:
hamid zarghami
2025-09-03 16:06:41 +03:30
parent d051e7110a
commit 40004b50b3
4 changed files with 114 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/compare/page.tsx
+86
View File
@@ -0,0 +1,86 @@
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import Layout from '@/hoc/Layout'
import { NextPage } from 'next'
import Image from 'next/image'
const ComparePage: NextPage = () => {
return (
<Layout>
<div className='mt-24 px-20'>
<div className='flex border-b border-border'>
<div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
<Image
src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
alt='compare'
width={150}
height={150}
className='max-w-[100px] max-h-[100px] object-contain'
/>
<div className='mt-6 font-light text-sm'>
رومیزی سندس کد T-2112 طرح فرش
</div>
<div className='mt-8 text-sm font-light'>
260,000 <span className='text-[10px]'>تومان</span>
</div>
<div className='mt-5'>
<Button
>
افزودن به سبد
</Button>
</div>
</div>
<div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
<Image
src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
alt='compare'
width={150}
height={150}
className='max-w-[100px] max-h-[100px] object-contain'
/>
<div className='mt-6 font-light text-sm'>
رومیزی سندس کد T-2112 طرح فرش
</div>
<div className='mt-8 text-sm font-light'>
260,000 <span className='text-[10px]'>تومان</span>
</div>
<div className='mt-5'>
<Button
>
افزودن به سبد
</Button>
</div>
</div>
</div>
<div className='mt-8'>
<div className='text-sm font-light'>
مشخصات
</div>
</div>
<div className='mt-9 border-b border-border pb-7'>
<div className='text-[#999999] text-sm'>وزن</div>
<div className='flex mt-6 font-light'>
<div className='w-[300px]'>
350 g
</div>
<div className='w-[300px] flex gap-6'>
<Separator orientation='vertical' />
350 g
</div>
</div>
</div>
</div>
</Layout>
)
}
export default ComparePage
src/app/globals.css
+11
View File
@@ -11,6 +11,17 @@ body {
max-width: 100vw;
}
/* اجازه نمایش منو در دسکتاپ */
@media (min-width: 768px) {
html {
overflow-x: auto;
}
body {
overflow-x: auto;
}
}
/* اطمینان از عدم overflow در container ها */
.container,
.max-w-full {
src/share/Header.tsx
+1 -1
View File
@@ -10,7 +10,7 @@ const Header: FC = () => {
return (
<Fragment>
<div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full overflow-hidden'>
<div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full'>
{/* بخش بالایی هدر */}
<div className='flex items-center justify-between px-3 sm:px-4 md:px-6 py-3 sm:py-4'>
{/* منوی همبرگری موبایل */}
src/share/components/Menu.tsx
+16 -1
View File
@@ -9,6 +9,7 @@ import { Category } from '../types/SharedTypes'
const Menu: FC = () => {
const [isOpen, setIsOpen] = useState(false)
const [hoveredPath, setHoveredPath] = useState<Category[]>([])
const [menuPosition, setMenuPosition] = useState({ top: 0, right: 0 })
const { data, isLoading } = useGetCategories()
const menuRef = useRef<HTMLDivElement>(null)
const router = useRouter()
@@ -25,6 +26,16 @@ const Menu: FC = () => {
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [])
useEffect(() => {
if (isOpen && menuRef.current) {
const rect = menuRef.current.getBoundingClientRect()
setMenuPosition({
top: rect.bottom + window.scrollY + 8,
right: window.innerWidth - rect.right - window.scrollX
})
}
}, [isOpen])
const parentCategories = data?.results?.data?.filter(cat => !cat.parent) || []
const handleCategoryHover = (category: Category, level: number) => {
@@ -86,7 +97,11 @@ const Menu: FC = () => {
{isOpen && (
<div
className='absolute top-full right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 z-[9999] flex max-w-[90vw] md:max-w-none max-h-screen overflow-hidden'
className='fixed bg-white rounded-xl shadow-lg border border-gray-200 z-[9999] flex max-w-[90vw] md:max-w-none max-h-[80vh] overflow-hidden'
style={{
top: `${menuPosition.top}px`,
right: `${menuPosition.right}px`
}}
onMouseLeave={() => {
setIsOpen(false)
setHoveredPath([])