crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: update layout for PLP

Browse Source 
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-06-12 17:10:58 +07:00
parent 39b1235c82
commit ca37984cff
15 changed files with 226 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/layout/search/filters/filters-container.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { getProductsInCollection } from 'components/layout/products-list/actions';
import FiltersList from './filters-list';
const FiltersContainer = async ({
searchParams
}: {
searchParams?: { [key: string]: string | string[] | undefined };
}) => {
const { filters } = await getProductsInCollection({
searchParams
});
return <FiltersList filters={filters} defaultOpen={false} />;
};
export const FiltersListPlaceholder = () => {
return (
<div className="hidden lg:flex lg:flex-col lg:gap-4">
<div className="h-32 w-full rounded bg-gray-200" />
<div className="h-32 w-full rounded bg-gray-200" />
<div className="h-32 w-full rounded bg-gray-200" />
<div className="h-32 w-full rounded bg-gray-200" />
</div>
);
};
export default FiltersContainer;

2
components/layout/search/filters/filters-list.tsx
View File

@@ -42,7 +42,7 @@ const Filters = ({ filters, defaultOpen = true }: { filters: Filter[]; defaultOp
<Disclosure
key={id}
as="div"
className="flex h-auto max-h-[550px] flex-col gap-y-3 overflow-hidden pt-5"
className="flex h-auto max-h-[300px] flex-col gap-y-3 overflow-hidden pt-5"
defaultOpen={defaultOpen}
>
<DisclosureButton className="group flex items-center justify-between">

8
components/layout/search/filters/sub-menu.tsx
View File

@@ -7,11 +7,11 @@ const SubMenu = async ({ collection }: { collection: string }) => {
const subMenu = menu.find((item) => item.path === `/search/${collection}`)?.items || [];
return subMenu.length ? (
<>
<h3 className="sr-only">Categories</h3>
<div className="border-t pt-4">
<div className="text-sm font-medium text-gray-900">Manufacturers</div>
<ul
role="list"
className="space-y-4 border-b border-gray-200 pb-6 text-sm font-medium text-gray-900"
className="ml-1 mt-2 max-h-[300px] space-y-3 overflow-y-auto border-b border-gray-200 pb-6 text-sm text-gray-600"
>
{subMenu.map((subMenuItem) => (
<li key={subMenuItem.title}>
@@ -21,7 +21,7 @@ const SubMenu = async ({ collection }: { collection: string }) => {
</li>
))}
</ul>
</>
</div>
) : null;
};

22
components/layout/search/placeholder.tsx
View File

@@ -1,23 +1,9 @@
import Grid from 'components/grid';
const ProductsGridPlaceholder = () => {
return (
<section>
<Grid className="animate-pulse pt-5 lg:grid-cols-3 lg:gap-x-8 xl:grid-cols-4">
<aside className="hidden lg:flex lg:flex-col lg:gap-4">
<div className="h-32 w-full rounded bg-gray-200" />
<div className="h-32 w-full rounded bg-gray-200" />
<div className="h-32 w-full rounded bg-gray-200" />
<div className="h-32 w-full rounded bg-gray-200" />
</aside>
<div className="lg:col-span-2 xl:col-span-3">
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 9 }).map((_, index) => (
<div key={index} className="h-96 w-full rounded-lg bg-gray-200" />
))}
</Grid>
</div>
</Grid>
<section className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{Array.from({ length: 9 }).map((_, index) => (
<div key={index} className="h-96 w-full rounded-lg bg-gray-200" />
))}
</section>
);
};