Premium Ionic Templates for your next project.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React from 'react';
import './ProductComponent.css';
      
interface ProductProps {
  name: string;
  description: string;
  rating: number;
  status: string;
  image: string;
}

const ProductComponent: React.FC<ProductProps> = ({ name, description, rating, status, image }) => {
  return (
    <IonItem button>
      <IonThumbnail slot="start">
        <img src={image} alt={name} />
      </IonThumbnail>
      <IonLabel>
        <IonText>
          <h2><strong>{name}</strong></h2>
        </IonText>
        <IonText color="medium">
          <p>{description}</p>
        </IonText>
        <IonBadge color="dark">{status}</IonBadge>
      </IonLabel>
      <div slot="end">
        <IonText color="dark">
          {rating} <IonIcon icon={star} color="warning"></IonIcon>
        </IonText>
      </div>
    </IonItem>
  );
};

export default ProductComponent;