Add cell image placeholder
This commit is contained in:
parent
3b769233cf
commit
df9aad36c4
1 changed files with 25 additions and 7 deletions
|
@ -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
|
||||||
|
|
Reference in a new issue