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>
88 lines
2.8 KiB
TypeScript
88 lines
2.8 KiB
TypeScript
import { MetaFunction } from "@remix-run/node";
|
||
import { useServiceGetFollowedSellers } from "../requestHandler/use-following-hooks";
|
||
import ProfilePagesHeader from "../components/ProfilePagesHeader";
|
||
import { Link } from "@remix-run/react";
|
||
import { FollowList } from "src/api/types";
|
||
import UiProvider from "~/components/UiProvider";
|
||
import SellerLogo from "~/components/SellerLogo";
|
||
|
||
export default function Following() {
|
||
const {
|
||
data: followedSellers,
|
||
isLoading,
|
||
isError,
|
||
refetch,
|
||
} = useServiceGetFollowedSellers();
|
||
|
||
return (
|
||
<div className="flex flex-col gap-0 pb-20 lg:max-w-[720px] lg:mx-auto lg:w-full lg:px-6 lg:py-6">
|
||
<ProfilePagesHeader title="فروشگاههای دنبال شده" />
|
||
<h1 className="hidden lg:block text-[28px] font-extrabold mb-4">
|
||
فروشگاههای دنبال شده
|
||
</h1>
|
||
<UiProvider
|
||
isLoading={isLoading}
|
||
isEmpty={!followedSellers || followedSellers.length === 0}
|
||
isError={isError}
|
||
onRetry={refetch}
|
||
type="following"
|
||
>
|
||
<FollowedSellersList followedSellers={followedSellers || []} />
|
||
</UiProvider>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
const FollowedSellersList = ({
|
||
followedSellers,
|
||
}: {
|
||
followedSellers: FollowList[];
|
||
}) => {
|
||
return (
|
||
<div className="flex flex-col w-full">
|
||
{followedSellers.map((seller) => (
|
||
<Link
|
||
to={`/seller/${seller.username}`}
|
||
key={seller.sellerId}
|
||
className="w-full"
|
||
>
|
||
<div className="w-full h-[80px] flex items-center px-4 gap-4">
|
||
<SellerLogo src={seller.storeLogo} alt="Store Logo" />
|
||
<p className="text-R14 font-bold">{seller.storeName}</p>
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export const meta: MetaFunction = () => {
|
||
const title = "فروشگاههای دنبال شده | ویترون";
|
||
const description = "مشاهده لیست فروشگاههای دنبال شده در ویترون";
|
||
const imageUrl =
|
||
"https://vitrownstatics.s3.ir-thr-at1.arvanstorage.ir/SVG-06.svg?versionId=";
|
||
|
||
return [
|
||
{ title },
|
||
{ name: "description", content: description },
|
||
{
|
||
name: "keywords",
|
||
content: "فروشگاه، دنبال شده، فالو، ویترون",
|
||
},
|
||
{ name: "robots", content: "noindex, follow" },
|
||
|
||
// Open Graph
|
||
{ property: "og:type", content: "website" },
|
||
{ property: "og:title", content: title },
|
||
{ property: "og:description", content: description },
|
||
{ property: "og:image", content: imageUrl },
|
||
{ property: "og:site_name", content: "ویترون" },
|
||
{ property: "og:locale", content: "fa_IR" },
|
||
|
||
// Twitter Card
|
||
{ name: "twitter:card", content: "summary" },
|
||
{ name: "twitter:title", content: title },
|
||
{ name: "twitter:description", content: description },
|
||
];
|
||
};
|