CollectionCard.tsx 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import {
  2. makeStyles,
  3. Theme,
  4. Link,
  5. Typography,
  6. Divider,
  7. } from '@material-ui/core';
  8. import { FC } from 'react';
  9. import CustomButton from '../../../components/customButton/CustomButton';
  10. import icons from '../../../components/icons/Icons';
  11. import Status from '../../../components/status/Status';
  12. import CustomToolTip from '../../../components/customToolTip/CustomToolTip';
  13. import { CollectionCardProps } from './Types';
  14. import { useTranslation } from 'react-i18next';
  15. import CustomIconButton from '../../../components/customButton/CustomIconButton';
  16. import { useHistory } from 'react-router-dom';
  17. const useStyles = makeStyles((theme: Theme) => ({
  18. wrapper: {
  19. padding: theme.spacing(2),
  20. textAlign: 'end',
  21. },
  22. link: {
  23. display: 'flex',
  24. alignItems: 'center',
  25. margin: theme.spacing(2, 0),
  26. color: theme.palette.milvusDark.main,
  27. fontSize: '20px',
  28. lineHeight: '24px',
  29. fontWeight: 'bold',
  30. },
  31. icon: {
  32. color: theme.palette.primary.main,
  33. marginLeft: theme.spacing(0.5),
  34. fontSize: '16px',
  35. },
  36. content: {
  37. display: 'flex',
  38. alignItems: 'center',
  39. marginBottom: theme.spacing(2),
  40. },
  41. rowCount: {
  42. marginLeft: theme.spacing(1),
  43. },
  44. divider: {
  45. marginBottom: theme.spacing(2),
  46. },
  47. release: {
  48. fontSize: '16px',
  49. '& path': {
  50. fill: theme.palette.primary.main,
  51. },
  52. },
  53. search: {
  54. fontSize: '16px',
  55. marginRight: theme.spacing(0.5),
  56. '& path': {
  57. fill: '#fff',
  58. },
  59. },
  60. btn: {
  61. marginRight: theme.spacing(1),
  62. padding: theme.spacing(0.5, 1),
  63. lineHeight: '20px',
  64. fontSize: 14,
  65. },
  66. }));
  67. const CollectionCard: FC<CollectionCardProps> = ({
  68. data,
  69. handleRelease,
  70. wrapperClass = '',
  71. }) => {
  72. const classes = useStyles();
  73. const { _name: name, _status: status, _rowCount: rowCount } = data;
  74. const history = useHistory();
  75. // icons
  76. const RightArrowIcon = icons.rightArrow;
  77. const InfoIcon = icons.info;
  78. const ReleaseIcon = icons.release;
  79. const VectorSearchIcon = icons.navSearch;
  80. // i18n
  81. const { t: collectionTrans } = useTranslation('collection');
  82. const { t: btnTrans } = useTranslation('btn');
  83. const onReleaseClick = () => {
  84. handleRelease(data);
  85. };
  86. const onVectorSearchClick = () => {
  87. history.push({ pathname: '/search', search: `?collectionName=${name}` });
  88. };
  89. return (
  90. <div className={`card-wrapper ${classes.wrapper} ${wrapperClass}`}>
  91. <div>
  92. <Status status={status} />
  93. </div>
  94. <Link
  95. classes={{ root: classes.link }}
  96. underline="none"
  97. href={`/collections/${name}`}
  98. >
  99. {name}
  100. <RightArrowIcon classes={{ root: classes.icon }} />
  101. </Link>
  102. <div className={classes.content}>
  103. <Typography>{collectionTrans('rowCount')}</Typography>
  104. <CustomToolTip title={collectionTrans('tooltip')} placement="bottom">
  105. <InfoIcon classes={{ root: classes.icon }} />
  106. </CustomToolTip>
  107. <Typography className={classes.rowCount}>{rowCount}</Typography>
  108. </div>
  109. <Divider classes={{ root: classes.divider }} />
  110. <CustomButton
  111. variant="contained"
  112. className={classes.btn}
  113. onClick={onVectorSearchClick}
  114. >
  115. <VectorSearchIcon classes={{ root: classes.search }} />
  116. {btnTrans('vectorSearch')}
  117. </CustomButton>
  118. <CustomIconButton onClick={onReleaseClick} tooltip={btnTrans('release')}>
  119. <ReleaseIcon classes={{ root: classes.release }} />
  120. </CustomIconButton>
  121. </div>
  122. );
  123. };
  124. export default CollectionCard;