frontend: Add CNCF badge to charts

Signed-off-by: Vincent T <[email protected]>

app-catalog/src/components/charts/List.tsx

@@ -1,3 +1,4 @@
+import { Icon } from '@iconify/react';
 import {
  Link as RouterLink,
  Loader,
@@ -158,25 +159,50 @@ export function ChartsList({ fetchCharts = fetchChartsFromArtifact }) {
  ) : charts.length === 0 ? (
  <Box mt={2} mx={2}>
  <Typography variant="h5" component="h2">
- {`No charts found for ${
- search ? `search term: ${search}` : `category: ${chartCategory.title}`
- }`}
+ {`No charts found for ${search ? `search term: ${search}` : `category: ${chartCategory.title}`
+ }`}
  </Typography>
  </Box>
  ) : (
  charts.map(chart => {
+ console.log('chart', chart)
  return (
  <Box maxWidth="30%" width="400px" m={1}>
  <Card>
- <Box height="60px" display="flex" alignItems="center" marginTop="15px">
+ <Box height="60px" display="flex" alignItems="center" justifyContent="space-between" marginTop="15px">
  <CardMedia
  image={`https://artifacthub.io/image/${chart.logo_image_id}`}
  style={{
  width: '60px',
  margin: '1rem',
+ alignSelf: 'flex-start',
  }}
  component="img"
  />
+ <Box display="flex" alignItems="center" justifyContent="space-around" marginRight="10px" >
+ {chart.repository.cncf && (
+ <Tooltip title="CNCF Project">
+ <CardMedia
+ image={`https://github.com/cncf/artwork/blob/1e04eb8355adcf8ffd7bb40ff1da098ea80452e3/other/cncf/icon/color/cncf-icon-color.png?raw=true`}
+ style={{
+ width: '30px',
+ alignSelf: 'flex-end',
+ }}
+ component="img"
+ />
+ </Tooltip>
+ )}
+ {chart.official && (
+ <Tooltip title="Official">
+ <Icon icon="mdi:shield-check" style={{ fontSize: '2em' }} />
+ </Tooltip>
+ )}
+ {chart.repository.verified_publisher && (
+ <Tooltip title="Verified Publisher">
+ <Icon icon="mdi:check-decagram" style={{ fontSize: '2em' }} />
+ </Tooltip>
+ )}
+ </Box>
  </Box>
  <CardContent
  style={{