Add cell image placeholder

This commit is contained in:
jeffvli 2022-12-25 04:54:16 -08:00
parent 3b769233cf
commit df9aad36c4

View file

@ -1,6 +1,8 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import type { ICellRendererParams } from '@ag-grid-community/core'; import type { ICellRendererParams } from '@ag-grid-community/core';
import { Center } from '@mantine/core';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { RiAlbumFill } from 'react-icons/ri';
import { generatePath } from 'react-router'; import { generatePath } from 'react-router';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
@ -72,6 +74,7 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
return ( return (
<CellContainer height={node.rowHeight || 40}> <CellContainer height={node.rowHeight || 40}>
<ImageWrapper> <ImageWrapper>
{value.imageUrl ? (
<StyledImage <StyledImage
alt="cover" alt="cover"
height={(node.rowHeight || 40) - 10} height={(node.rowHeight || 40) - 10}
@ -79,6 +82,21 @@ export const CombinedTitleCell = ({ value, rowIndex, node }: ICellRendererParams
style={{}} style={{}}
width={(node.rowHeight || 40) - 10} width={(node.rowHeight || 40) - 10}
/> />
) : (
<Center
sx={{
background: 'var(--placeholder-bg)',
borderRadius: 'var(--card-default-radius)',
height: `${(node.rowHeight || 40) - 10}px`,
width: `${(node.rowHeight || 40) - 10}px`,
}}
>
<RiAlbumFill
color="var(--placeholder-fg)"
size={35}
/>
</Center>
)}
</ImageWrapper> </ImageWrapper>
<MetadataWrapper> <MetadataWrapper>
<Text <Text