Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | import { Center, Spinner } from "@chakra-ui/react";
import { FunctionComponent, memo } from "react";
import { WideCardList } from "./WideCardList";
import { ExtendedCatalogPackage } from "../../api/catalog-search";
import { PackageCardType } from "../PackageCard";
const listViews = {
[PackageCardType.Wide]: WideCardList,
};
export interface PackageListViewProps {
"data-event"?: string;
items: ExtendedCatalogPackage[];
}
export interface PackageListProps extends Partial<PackageListViewProps> {
cardView?: PackageCardType;
loading?: boolean;
title?: string;
}
export const PackageList: FunctionComponent<PackageListProps> = memo(
({
"data-event": dataEvent,
cardView = PackageCardType.Wide,
items,
loading,
}) => {
if (loading || !items) {
return (
<Center>
<Spinner size="xl" />
</Center>
);
}
const View = listViews[cardView];
return <View data-event={dataEvent} items={items} />;
}
);
PackageList.displayName = "PackageList";
|