Arda Samadi
a67e81ad55
These pages are desktop-enabled (they get the DesktopHeader via the /profile allowlist) but had no desktop layout, so their content stretched edge-to-edge on wide screens. Add a centered max-width container + a desktop title to the main profile sub-pages (bookmarks, following, orders, settings, wallet, addresses, sets). Grids use a wider max-width; single-column lists a narrower one. ProfilePagesHeader is already lg:hidden, so the mobile header still disappears. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
91 lines
3.3 KiB
TypeScript
91 lines
3.3 KiB
TypeScript
import { useServiceGetUserBookmarks } from "../requestHandler/use-bookmark-hooks";
|
||
import ProfilePagesHeader from "../components/ProfilePagesHeader";
|
||
import bookmark from "../assets/icons/profile/bookmark/bookmark.svg";
|
||
import MondrianProductList from "~/components/MondrianProductList";
|
||
import { MetaFunction } from "@remix-run/node";
|
||
|
||
export default function Bookmarks() {
|
||
const {
|
||
data,
|
||
isLoading,
|
||
isError,
|
||
refetch,
|
||
fetchNextPage,
|
||
hasNextPage,
|
||
isFetchingNextPage,
|
||
} = useServiceGetUserBookmarks();
|
||
// Flatten the pages data
|
||
const bookmarks = data?.pages.flatMap((page) => page.results) || [];
|
||
|
||
return (
|
||
<div className="flex flex-col gap-6 lg:max-w-[1320px] lg:mx-auto lg:w-full lg:px-8 lg:py-6">
|
||
<ProfilePagesHeader title="ذخیره شدهها" />
|
||
<h1 className="hidden lg:block text-[28px] font-extrabold">
|
||
ذخیره شدهها
|
||
</h1>
|
||
|
||
{/* Content */}
|
||
<MondrianProductList
|
||
products={bookmarks.map((bookmark) => {
|
||
return {
|
||
id: bookmark.productId,
|
||
title: bookmark.productTitle,
|
||
images: bookmark.productImage ? [bookmark.productImage] : [],
|
||
basePrice: bookmark.basePrice
|
||
? parseInt(bookmark.basePrice)
|
||
: undefined,
|
||
discountPercent: bookmark.discountPercent
|
||
? parseInt(bookmark.discountPercent)
|
||
: undefined,
|
||
discountPrice: bookmark.discountPrice
|
||
? parseInt(bookmark.discountPrice)
|
||
: undefined,
|
||
};
|
||
})}
|
||
fetchNextPage={fetchNextPage}
|
||
hasNextPage={hasNextPage}
|
||
isFetchingNextPage={isFetchingNextPage}
|
||
isLoading={isLoading}
|
||
isError={isError}
|
||
refetch={refetch}
|
||
emptyState={{
|
||
image: <img alt="cartBanner" src={bookmark} className="w-12 h-12" />,
|
||
title: "محصولی ذخیره نشده است",
|
||
description:
|
||
"تمام محصولهایی که ذخیره کنید در این قسمت قابل مشاهده است.",
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export const meta: MetaFunction = () => {
|
||
return [
|
||
{ title: "ذخیره شدهها - ویترون" },
|
||
{
|
||
name: "description",
|
||
content:
|
||
"مدیریت و مشاهده تمام محصولات ذخیره شده شما در ویترون. فیلتر بر اساس وضعیت و جستجو در محصولات.",
|
||
},
|
||
{
|
||
name: "keywords",
|
||
content: "ذخیره شده، مدیریت ذخیره شده، فروشگاه، مشتری، ویترون",
|
||
},
|
||
{ name: "robots", content: "noindex, follow" },
|
||
{ property: "og:title", content: "ذخیره شدهها - ویترون" },
|
||
{
|
||
property: "og:description",
|
||
content:
|
||
"مدیریت و مشاهده تمام محصولات ذخیره شده شما در ویترون. فیلتر بر اساس وضعیت و جستجو در محصولات.",
|
||
},
|
||
{ property: "og:type", content: "website" },
|
||
{ name: "twitter:card", content: "summary" },
|
||
{ name: "twitter:title", content: "ذخیره شدهها - ویترون" },
|
||
{
|
||
name: "twitter:description",
|
||
content:
|
||
"مدیریت و مشاهده تمام محصولات ذخیره شده شما در ویترون. فیلتر بر اساس وضعیت و جستجو در محصولات.",
|
||
},
|
||
];
|
||
};
|