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

responsive base v1

Browse Source
This commit is contained in:
hamid zarghami
2025-09-02 12:42:13 +03:30
parent c6b3aa0682
commit 2fa9ab1bbb
27 changed files with 581 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/profile/page.tsx
+17 -17
View File
@@ -36,15 +36,15 @@ const ProfilePage = () => {
}
return (
<div className="p-6">
<div className="p-4 sm:p-6">
<Menu pageActive='profile' />
<div className='mt-10'>
<div className="flex gap-6">
<div className='mt-6 sm:mt-8 md:mt-10'>
<div className="flex flex-col xl:flex-row gap-4 sm:gap-6">
{/* Left Content - Form */}
<div className="flex-1 ">
<div className="bg-[#FAFAFA] rounded-lg p-6">
<div className="flex items-center justify-between mb-6">
<h1 className="text-lg font-bold text-gray-900">اطلاعات کاربری</h1>
<div className="bg-[#FAFAFA] rounded-lg p-4 sm:p-6">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4 sm:mb-6 gap-3 sm:gap-0">
<h1 className="text-base sm:text-lg font-bold text-gray-900">اطلاعات کاربری</h1>
<Button
onClick={() => setIsEditing(!isEditing)}
variant="outline"
@@ -55,7 +55,7 @@ const ProfilePage = () => {
</Button>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
<Input
label="نام و نام خانوادگی"
value={userInfo.name}
@@ -121,7 +121,7 @@ const ProfilePage = () => {
/>
</div>
<div className="mt-4">
<div className="mt-3 sm:mt-4">
<Input
label="آدرس"
value={userInfo.address}
@@ -131,7 +131,7 @@ const ProfilePage = () => {
</div>
{isEditing && (
<div className="mt-6 flex gap-3">
<div className="mt-4 sm:mt-6 flex flex-col sm:flex-row gap-3">
<Button
onClick={handleSubmit}
className="px-8 bg-blue-600 hover:bg-blue-700"
@@ -149,18 +149,18 @@ const ProfilePage = () => {
</div>
</div>
<div className='flex flex-col gap-6'>
<div className='size-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-6 justify-center items-center h-full'>
<div className='size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<ShoppingCart size={40} color='#000' />
<div className='flex flex-row xl:flex-col gap-4 sm:gap-6'>
<div className='w-full xl:w-[240px] xl:h-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-4 sm:gap-6 justify-center items-center h-[120px] sm:h-[160px] xl:h-[240px]'>
<div className='size-12 sm:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<ShoppingCart size={24} color='#000' className='sm:w-8 sm:h-8 xl:w-10 xl:h-10' />
</div>
<div>
سفارشات
</div>
</div>
<div className='size-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-6 justify-center items-center h-full'>
<div className='size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<Heart size={40} color='#000' />
<div className='w-full xl:w-[240px] xl:h-[240px] bg-[#FAFAFA] rounded-[10px] flex flex-col gap-4 sm:gap-6 justify-center items-center h-[120px] sm:h-[160px] xl:h-[240px]'>
<div className='size-12 sm:size-16 xl:size-20 bg-[#F2F2F2] rounded-full flex justify-center items-center'>
<Heart size={24} color='#000' className='sm:w-8 sm:h-8 xl:w-10 xl:h-10' />
</div>
<div>
علاقه مندی ها
@@ -168,7 +168,7 @@ const ProfilePage = () => {
</div>
</div>
<div className='w-[300px] min-h-full bg-red-50 rounded-[10px]'>
<div className='w-full xl:w-[300px] min-h-[200px] xl:min-h-full bg-red-50 rounded-[10px] hidden xl:block'>
</div>
</div>
</div>