■ ■ ■ ■ ■ ■
packages/web/src/components/ui/Card/Card.tsx
1 1 import React from 'react'; 2 2 import styles from './Card.module.scss'; 3 3 import clsx from 'clsx'; 4 - import { numberWithSpaces } from '../../../utils/helpers'; 5 - import { Bug } from 'components/icons'; 6 4 import Chip from '../Chip/Chip'; 5 + import ChipGroup from '../ChipGroup/ChipGroup'; 6 + import AvatarGroup from '../AvatarGroup/AvatarGroup'; 7 + import VulnerablePackage from '../VulnerablePackage/VulnerablePackage'; 8 + import { Icon } from '../Icon/Icon'; 7 9 8 10 export type CardProps = { 11 + id: string; 9 12 title: string; 10 13 icon?: string; 11 14 description?: string; 21 24 name: string; 22 25 moreCount?: number; 23 26 }; 24 - variant?: 'to - all ' | 'vulnerable' | string ; 27 + variant?: 'toAll ' | 'vulnerable'; 25 28 }; 26 29 27 30 export default function Card({ 31 34 packageTags, 32 35 featuredSites, 33 36 vulnerablePackage, 34 - variant = ' ' , 37 + variant, 35 38 }: CardProps) { 36 39 return ( 37 - <div className={clsx(styles.card, styles[variant])}> 40 + <div className={clsx(styles.card, variant & & styles[variant])}> 38 41 <div className={styles.cardTop}> 39 42 <header className={styles.header}> 40 43 {icon && ( 41 - <div className={styles.icon }> 42 - <img src={icon} alt='' /> 44 + <div className={styles.iconWrapper }> 45 + <img className = { styles . icon } src={icon} alt='' /> 43 46 </div> 44 47 )} 45 48 51 54 52 55 {variant === 'toAll' && ( 53 56 <button className={styles.arrowBtn} type='button'> 54 - {/* TODO: properly import SVG arrow */} 55 - <svg 56 - width='24' 57 - height='25' 58 - viewBox='0 0 24 25' 59 - fill='none' 60 - xmlns='http://www.w3.org/2000/svg' 61 - > 62 - <path 63 - d='M9 5.5L17 13L9 20.5' 64 - stroke='#212121' 65 - strokeWidth='2' 66 - strokeLinecap='round' 67 - strokeLinejoin='round' 68 - /> 69 - </svg> 57 + <Icon kind='arrow' color='#212121' width={10} height={18} /> 70 58 </button> 71 59 )} 72 60 73 61 {packageTags && ( 74 62 <div className={styles.tagsWrapper}> 75 - <div className={styles.tags}> 76 - {packageTags.featuredPackages.map((tag) => ( 77 - <Chip key={tag} size='large' font='monospace'> 78 - {tag} 79 - </Chip> 80 - ))} 81 - <Chip variant='outlined' size='large'> 63 + <ChipGroup chips={packageTags.featuredPackages}> 64 + <Chip className={styles.tag} variant='outlined' size='large'> 82 65 +{packageTags.restPackages} packages 83 66 </Chip> 84 - </div> 67 + </ChipGroup> 85 68 </div> 86 69 )} 87 70 88 71 {featuredSites && ( 89 - <div className={styles.sitesWrapper}> 90 - <div className={styles.sites}> 91 - <div className={styles.sitesList}> 92 - {featuredSites.iconList.map((featuredSite) => ( 93 - <div key={featuredSite} className={styles.sitesItem}> 94 - <img src={featuredSite} alt='' /> 95 - </div> 96 - ))} 97 - </div> 98 - 99 - <div className={styles.sitesCount}> 100 - + {numberWithSpaces(featuredSites.numberOfUses)} sites use 101 - </div> 102 - </div> 103 - </div> 72 + <AvatarGroup avatarGroup={featuredSites.iconList} counter={featuredSites.numberOfUses} /> 104 73 )} 105 74 106 75 {vulnerablePackage && ( 107 - <div className={styles.vulnerableWrapper}> 108 - <span className={styles.vulnerablePackage}> 109 - <span className={styles.vulnerableIcon}> 110 - <Bug width='28' height='28' /> 111 - </span> 112 - {vulnerablePackage.name} 113 - </span> 114 - {vulnerablePackage.moreCount && ( 115 - <span className={styles.vulnerableMore}> 116 - <Chip variant='secondary' size='medium'> 117 - +{vulnerablePackage.moreCount} 118 - 119 - <span className={styles.vulnerableMoreText}>more</span> 120 - </Chip> 121 - </span> 122 - )} 123 - </div> 76 + <VulnerablePackage name={vulnerablePackage.name} moreTotal={vulnerablePackage.moreCount} /> 124 77 )} 125 78 </div> 126 79 );
Dmitry Shakun
committed
2 years ago
1 parent bfa132b5
