Current Path : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/ |
Linux v11800 5.3.0-1023-aws #25~18.04.1-Ubuntu SMP Fri Jun 5 15:19:18 UTC 2020 aarch64
|
Current File : /storage/v11800/alliedessence/public_html/wp-content/plugins/lottiefiles/src/components/ListView.tsx |
/**
* Copyright 2022 Design Barn Inc.
*/
import * as React from 'react';
import { ITileProps, Tile } from './Tile';
export interface IListProps {
isLoading: boolean;
list: ITileProps[];
}
export const ListView: React.FC<IListProps> = ({ isLoading, list }: IListProps) => {
if (isLoading) {
return <div className="lf-spinner medium bg"></div>;
}
return (
<div
style={{
gridAutoRows: '1fr',
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
gridGap: '40px',
alignItems: 'stretch',
}}
>
{list.map((item: unknown) => {
const node = item.node;
return (
<Tile
key={node.id}
id={node.id}
lottieUrl={node.lottieUrl}
bgColor={node.bgColor}
createdBy={node.createdBy}
/>
);
})}
</div>
);
};