2023-04-17 23:00:47 -04:00
|
|
|
import clsx from 'clsx';
|
|
|
|
import { Suspense } from 'react';
|
|
|
|
|
|
|
|
import { getCollections } from 'lib/shopify';
|
|
|
|
import FilterList from './filter';
|
|
|
|
|
|
|
|
async function CollectionList() {
|
|
|
|
const collections = await getCollections();
|
|
|
|
return <FilterList list={collections} title="Collections" />;
|
|
|
|
}
|
|
|
|
|
|
|
|
const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
|
2023-07-24 21:40:29 -05:00
|
|
|
const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
|
|
|
|
const items = 'bg-neutral-400 dark:bg-neutral-700';
|
2023-04-17 23:00:47 -04:00
|
|
|
|
|
|
|
export default function Collections() {
|
|
|
|
return (
|
|
|
|
<Suspense
|
|
|
|
fallback={
|
2023-07-24 21:40:29 -05:00
|
|
|
<div className="col-span-2 hidden h-[400px] w-full flex-none py-4 lg:block">
|
2023-04-17 23:00:47 -04:00
|
|
|
<div className={clsx(skeleton, activeAndTitles)} />
|
|
|
|
<div className={clsx(skeleton, activeAndTitles)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
<div className={clsx(skeleton, items)} />
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<CollectionList />
|
|
|
|
</Suspense>
|
|
|
|
);
|
|
|
|
}
|