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

responsive

Browse Source
This commit is contained in:
hamid zarghami
2025-09-03 15:06:15 +03:30
parent 138f26e293
commit d051e7110a
33 changed files with 440 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/product/components/Reviews.tsx
+19 -19
View File
@@ -64,17 +64,17 @@ const Reviews: FC = () => {
}, [])
return (
<div className="mt-16 w-full">
<div className="mt-12 sm:mt-16 w-full">
<div className="flex items-center justify-end gap-3 flex-row-reverse">
<h2 className="text-primary text-lg">نظرات خریداران</h2>
<h2 className="text-primary text-base sm:text-lg">نظرات خریداران</h2>
<div className="w-1 h-6 bg-primary rounded"></div>
</div>
<div className="mt-6 grid grid-cols-12 gap-6">
<div className="mt-4 sm:mt-6 grid grid-cols-12 gap-4 sm:gap-6">
<div className="col-span-12 md:col-span-9 md:order-last">
<div className="flex items-center justify-start gap-4 text-sm text-[#7F7F7F]">
<div className="flex flex-col sm:flex-row sm:items-center justify-start gap-2 sm:gap-4 text-xs sm:text-sm text-[#7F7F7F]">
<span>مرتب سازی بر اساس:</span>
<div className="flex items-center gap-6">
<div className="flex items-center gap-4 sm:gap-6">
<button
type="button"
onClick={() => setSort('new')}
@@ -96,12 +96,12 @@ const Reviews: FC = () => {
</div>
</div>
<div className="mt-6 rounded-xl bg-white">
<div className="mt-4 sm:mt-6 rounded-xl bg-white">
{sortedReviews.map((r, idx) => (
<div key={r.id} className="px-6 py-5">
<div className="flex items-center justify-start gap-3">
<div className="px-2 py-0.5 rounded-full bg-[#02A55A] text-white text-xs">{r.rating}</div>
<div className="flex items-center gap-2 text-xs text-[#999999]">
<div key={r.id} className="px-4 sm:px-6 py-4 sm:py-5">
<div className="flex flex-col sm:flex-row sm:items-center justify-start gap-2 sm:gap-3">
<div className="px-2 py-0.5 rounded-full bg-[#02A55A] text-white text-xs w-fit">{r.rating}</div>
<div className="flex flex-wrap items-center gap-1 sm:gap-2 text-xs text-[#999999]">
{r.isBuyer && (
<span className="px-2 py-0.5 rounded bg-[#F1F1F1] text-[#7F7F7F]">خریدار</span>
)}
@@ -112,28 +112,28 @@ const Reviews: FC = () => {
</div>
</div>
<div className="mt-3 text-[#333333] text-sm leading-7 text-right">{r.text}</div>
<div className="mt-3 text-[#333333] text-xs sm:text-sm leading-6 sm:leading-7 text-right">{r.text}</div>
{idx !== sortedReviews.length - 1 && <div className="mt-5"> <Separator /> </div>}
{idx !== sortedReviews.length - 1 && <div className="mt-4 sm:mt-5"> <Separator /> </div>}
</div>
))}
</div>
</div>
<div className="col-span-12 md:col-span-3 order-first md:order-first">
<div className=" rounded-[10px] p-6 h-fit md:sticky md:top-[170px]">
<div className="text-primary text-sm">نظرات خریداران</div>
<div className="mt-4 flex items-center justify-end gap-2">
<Star1 size={18} color="#FFC107" variant="Bold" />
<div className="text-sm">
<div className="rounded-[10px] p-4 sm:p-6 h-fit md:sticky md:top-[170px]">
<div className="text-primary text-xs sm:text-sm">نظرات خریداران</div>
<div className="mt-3 sm:mt-4 flex items-center justify-end gap-2">
<Star1 size={16} color="#FFC107" variant="Bold" className="sm:w-[18px] sm:h-[18px]" />
<div className="text-xs sm:text-sm">
<span className="font-medium">{average}</span>
<span className="text-[#7F7F7F]"> / 5</span>
</div>
</div>
<div className="mt-4 text-xs text-[#7F7F7F] leading-6 text-justify">
<div className="mt-3 sm:mt-4 text-xs text-[#7F7F7F] leading-5 sm:leading-6 text-justify">
شما هم درباره این کالا نظر خود را ثبت کنید. نظر شما پس از بررسی و تایید نمایش داده می‌شود.
</div>
<Button className="w-full mt-5">ثبت دیدگاه</Button>
<Button className="w-full mt-4 sm:mt-5 text-xs sm:text-sm">ثبت دیدگاه</Button>
</div>
</div>
</div>