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

carousel and header

Browse Source
This commit is contained in:
hamid zarghami
2025-08-05 14:47:41 +03:30
parent 76500fb337
commit 19b3812ae6
6 changed files with 83 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+20
View File
@@ -18,6 +18,7 @@
"next": "15.4.5",
"react": "19.1.0",
"react-dom": "19.1.0",
"swiper": "^11.2.10",
"tailwind-merge": "^3.3.1",
"zustand": "^5.0.7"
},
@@ -5945,6 +5946,25 @@
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/swiper": {
"version": "11.2.10",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.10.tgz",
"integrity": "sha512-RMeVUUjTQH+6N3ckimK93oxz6Sn5la4aDlgPzB+rBrG/smPdCTicXyhxa+woIpopz+jewEloiEE3lKo1h9w2YQ==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"license": "MIT",
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/tailwind-merge": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
package.json
+1
View File
@@ -19,6 +19,7 @@
"next": "15.4.5",
"react": "19.1.0",
"react-dom": "19.1.0",
"swiper": "^11.2.10",
"tailwind-merge": "^3.3.1",
"zustand": "^5.0.7"
},
src/app/home/components/Carousel.tsx
+25
View File
@@ -0,0 +1,25 @@
'use client'
import { FC } from 'react'
import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination } from 'swiper/modules';
const Carousel: FC = () => {
return (
<div className='mt-5'>
<Swiper pagination={true} modules={[Pagination]} className="mySwiper pb-5">
<SwiperSlide>
<div className='h-[400px] bg-red-50'>
1
</div>
</SwiperSlide>
<SwiperSlide>
<div className='h-[400px] bg-red-50'>
1
</div>
</SwiperSlide>
</Swiper>
</div>
)
}
export default Carousel
src/app/layout.tsx
+1
View File
@@ -1,6 +1,7 @@
import type { Metadata } from "next";
import "./globals.css";
import "../../public/css/fontiran.css";
import 'swiper/css';
import QueryProvider from "@/config/QueryProvider";
export const metadata: Metadata = {
src/app/page.tsx
+4 -1
View File
@@ -1,9 +1,12 @@
import { NextPage } from 'next'
import withLayout from '@/hoc/withLayout'
import Carousel from './home/components/Carousel'
const Home: NextPage = () => {
return (
<div></div>
<div>
<Carousel />
</div>
)
}
src/share/Header.tsx
+32 -29
View File
@@ -1,45 +1,48 @@
import Input from '@/components/Input'
import { Separator } from '@/components/ui/separator'
import { DocumentText, Home, Profile, ShoppingCart } from 'iconsax-react'
import { FC } from 'react'
import { FC, Fragment } from 'react'
import Menu from './components/Menu'
const Header: FC = () => {
return (
<div className='fixed top-0 bg-white w-full'>
<div className='flex items-center justify-between px-6 py-[18px]'>
<div className='flex gap-[30px] items-center'>
<div>LOGO</div>
<Input className='w-[500px]' variant='search' placeholder='جستجو' />
</div>
<div className='flex items-center gap-6'>
<div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
<Profile size={20} color='#333333' />
<div className='text-sm text-[#333333]'>حساب کاربری</div>
<Fragment>
<div className='fixed top-0 bg-white w-full'>
<div className='flex items-center justify-between px-6 py-[18px]'>
<div className='flex gap-[30px] items-center'>
<div>LOGO</div>
<Input className='w-[500px]' variant='search' placeholder='جستجو' />
</div>
<Separator style={{ height: 25 }} orientation='vertical' />
<div className='flex items-center gap-6'>
<div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
<Profile size={20} color='#333333' />
<div className='text-sm text-[#333333]'>حساب کاربری</div>
</div>
<div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
<ShoppingCart size={20} color='#333333' />
<Separator style={{ height: 25 }} orientation='vertical' />
<div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
<ShoppingCart size={20} color='#333333' />
</div>
</div>
</div>
<div className='mt-7 text-sm px-6 flex items-center gap-7'>
<Menu />
<Separator style={{ height: 20 }} orientation='vertical' />
<div className='flex items-center gap-2.5'>
<Home size={20} color='#333333' />
<div className='text-[#333333]'>صفحه نخست</div>
</div>
<div className='flex items-center gap-2.5'>
<DocumentText size={20} color='#333333' />
<div className='text-[#333333]'>مجله</div>
</div>
</div>
</div>
<div className='mt-7 text-sm px-6 flex items-center gap-7'>
<Menu />
<Separator style={{ height: 20 }} orientation='vertical' />
<div className='flex items-center gap-2.5'>
<Home size={20} color='#333333' />
<div className='text-[#333333]'>صفحه نخست</div>
</div>
<div className='flex items-center gap-2.5'>
<DocumentText size={20} color='#333333' />
<div className='text-[#333333]'>مجله</div>
</div>
</div>
</div>
<div className='h-[140px]'></div>
</Fragment>
)
}