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

base information

Browse Source
This commit is contained in:
hamid zarghami
2025-09-07 11:28:45 +03:30
parent c1c29761dd
commit 42e5966e32
5 changed files with 107 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/images/tick.svg
+3
View File
@@ -0,0 +1,3 @@
<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.91602 5.99987L6.63268 10.7165L16.0827 1.2832" stroke="white" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 245 B

src/app/globals.css
+4
View File
@@ -240,3 +240,7 @@ textarea.place-black::placeholder {
.dltr {
direction: ltr;
}
.filterBlack {
filter: brightness(0) saturate(100%);
}
src/app/product/components/BaseInformation.tsx
+84 -16
View File
@@ -1,16 +1,27 @@
'use client'
import { Star1 } from 'iconsax-react'
import { FC } from 'react'
import { FC, useState } from 'react'
import { Product } from '@/types/product.types'
import Image from 'next/image'
import { clx } from '@/helpers/utils'
interface BaseInformationProps {
product: Product
}
const BaseInformation: FC<BaseInformationProps> = ({ product }) => {
const defaultVariant = product.default_variant
const brand = product.brand
const size = defaultVariant.size
// State برای انتخاب variant ها
const [selectedSize, setSelectedSize] = useState<string | null>(
product.variants.find(v => v.size)?.size?._id?.toString() || null
)
const [selectedColor, setSelectedColor] = useState<string | null>(
product.variants.find(v => v.color)?.color?._id?.toString() || null
)
const [selectedMeterage, setSelectedMeterage] = useState<string | null>(
product.variants.find(v => v.meterage)?.meterage?._id?.toString() || null
)
return (
<div className='flex-1'>
@@ -37,20 +48,77 @@ const BaseInformation: FC<BaseInformationProps> = ({ product }) => {
</div>
</div>
<div className='mt-4 sm:mt-6 text-[#333333] text-sm sm:text-base'>
اندازه : {size.value}
</div>
{/* نمایش variant ها */}
<div className='mt-4 sm:mt-6'>
{/* متراژ */}
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
{product.variants.map((variant) => {
if (variant.meterage) {
const isSelected = selectedMeterage === variant.meterage._id.toString()
return (
<button
key={variant._id}
onClick={() => setSelectedMeterage(variant.meterage!._id.toString())}
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
? 'bg-primary text-white border-primary'
: 'hover:border-primary/50'
}`}
>
{variant.meterage.value}
</button>
)
}
return null
})}
</div>
<div className='mt-2 flex gap-1.5'>
{product.variants.map((variant, index) => (
<div
key={variant._id}
className='size-6 sm:size-8 rounded-full bg-gray-200 flex items-center justify-center text-xs font-medium'
title={variant.size.value}
>
{index + 1}
</div>
))}
{/* رنگ ها */}
<div className='flex flex-wrap items-center gap-1.5 mb-4'>
{product.variants.map((variant) => {
if (variant.color) {
const isSelected = selectedColor === variant.color._id.toString()
return (
<button
key={variant._id}
onClick={() => setSelectedColor(variant.color!._id.toString())}
className={clx(
'size-10 rounded-full flex justify-center items-center',
variant.color.hexColor === '#FFFFFF' ? 'border border-border' : ''
)}
style={{ backgroundColor: variant.color.hexColor }}
>
{isSelected && <Image src='/images/tick.svg' alt='check' width={20} height={20} className={clx(
'size-5',
variant.color.hexColor === '#FFFFFF' ? 'filterBlack' : ''
)} />}
</button>
)
}
return null
})}
</div>
{/* سایزها */}
<div className='flex flex-wrap items-center gap-1.5'>
{product.variants.map((variant) => {
if (variant.size) {
const isSelected = selectedSize === variant.size._id.toString()
return (
<button
key={variant._id}
onClick={() => setSelectedSize(variant.size!._id.toString())}
className={`text-[13px] px-4 py-2 border border-border rounded-lg whitespace-nowrap transition-colors ${isSelected
? 'bg-primary text-white border-primary'
: 'hover:border-primary/50'
}`}
>
{variant.size.value}
</button>
)
}
return null
})}
</div>
</div>
<div className='mt-6 sm:mt-7 text-base sm:text-lg text-[#333333]'>
src/config/const.ts
+2 -2
View File
@@ -1,6 +1,6 @@
export const TOKEN_NAME = "sh_token";
export const REFRESH_TOKEN_NAME = "sh_refresh_token";
export const BASE_URL = "https://api.shinan.ir";
// export const BASE_URL = "https://api-sondos.run.danakcorp.com";
// export const BASE_URL = "https://api.shinan.ir";
export const BASE_URL = "https://api-sondos.run.danakcorp.com";
export const PRIMARY_COLOR = "#015699";
src/types/product.types.ts
+14 -1
View File
@@ -14,6 +14,17 @@ export interface ProductSize {
value: string;
}
export interface ProductColor {
_id: number;
value: string;
hexColor?: string;
}
export interface ProductMeterage {
_id: number;
value: string;
}
export interface ProductWarranty {
_id: number;
duration: string;
@@ -52,7 +63,9 @@ export interface ProductVariant {
shop: ProductShop;
shipmentMethod: ShipmentMethod[];
warranty: ProductWarranty;
size: ProductSize;
size?: ProductSize;
color?: ProductColor;
meterage?: ProductMeterage;
}
export interface ProductBrand {