#22 add preview component

src/lib/components/ExpertBlock.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import cards from '../constants/mockDataCards';
+
+interface IExpertProps{
+  infoCards: typeof cards;
+}
+
+export const ExpertBlock:React.FC<IExpertProps> = (props)=> {
+  const {infoCards} = props;
+  return (
+    <div>
+      <h4>Experts</h4>
+      <div className="row">{infoCards.map((card) => {
+    return (
+      <div className="col m3" key={card.phone}>
+        <div className="card small">
+          <div className="card-image waves-effect waves-block waves-light">
+            <img className="activator" src={card.photo} alt="doctor" />
+          </div>
+        </div>
+      </div>
+    );
+  })}</div>
+    </div>
+  );
+};

src/lib/components/Experts.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ExpertBlock } from './ExpertBlock';
+import cards from '../constants/mockDataCards';
+
+export const Experts: React.FC = () => {
+  return (
+    <div>
+      <ExpertBlock infoCards={cards}/>
+    </div>
+  );
+};

src/lib/constants/mockDataCards.tsx

@@ -0,0 +1,33 @@
+import { IExpert, ExpertStatus } from '../types';
+
+const cards: IExpert[] = [
+  {
+    status: ExpertStatus.ACTIVE,
+    firstName: 'Oleksandr',
+    secondName: 'Adamenko',
+    email: 'adamenko@gmail.com',
+    phone: '+380980000000',
+    photo:
+      'https://purepng.com/public/uploads/large/purepng.com-manmanadult-malemale-childboy-beingmens-1421526920869cscbo.png',
+  },
+  {
+    status: ExpertStatus.DELETED,
+    firstName: 'Andriy',
+    secondName: 'Bushyn',
+    email: 'byshin@gmail.com',
+    phone: '+380987770000',
+    photo:
+      'https://purepng.com/public/uploads/large/purepng.com-manmanadult-malemale-childboy-beingmens-1421526920869cscbo.png',
+  },
+  {
+    status: ExpertStatus.NEW,
+    firstName: 'Leonid',
+    secondName: 'Liah',
+    email: 'liah@gmail.com',
+    phone: '+380988090000',
+    photo:
+      'https://purepng.com/public/uploads/large/purepng.com-manmanadult-malemale-childboy-beingmens-1421526920869cscbo.png',
+  },
+];
+
+export default cards;

src/lib/types.ts

@@ -1,44 +1,44 @@
 export interface IExpert {
-    status: ExpertStatus,
-    firstName: string,
-    secondName: string,
-    email: string,
-    phone: string,
+  status: ExpertStatus;
+  firstName: string;
+  secondName: string;
+  email: string;
+  phone: string;
+  photo: string;
 }
 
-enum ExpertStatus {
-    NEW = 'NEW',
-    ACTIVE = 'ACTIVE',
-    DELETED = 'DELETED',
+export enum ExpertStatus {
+  NEW = 'NEW',
+  ACTIVE = 'ACTIVE',
+  DELETED = 'DELETED',
 }
 
 export interface IPost {
-    direction: DirectionEnum,
-    title: string,
-    content: string,
-    status: PostStatus,
-    important: boolean,
-    tags: string[],
-    createdAt: Date,
-    modifiedAt: Date,
-    postType: PostTypeEnum,
-    preview: string,
+  direction: DirectionEnum;
+  title: string;
+  content: string;
+  status: PostStatus;
+  important: boolean;
+  tags: string[];
+  createdAt: Date;
+  modifiedAt: Date;
+  postType: PostTypeEnum;
+  preview: string;
 }
 
-enum PostStatus {
-    DRAFT = 'DRAFT',
-    MODERATION_FIRST_SIGN = 'MODERATION_FIRST_SIGN',
-    MODERATION_SECOND_SIGN = 'MODERATION_SECOND_SIGN',
-    PUBLISHED = 'PUBLISHED',
-    ARCHIVED = 'ARCHIVED',
+export enum PostStatus {
+  DRAFT = 'DRAFT',
+  MODERATION_FIRST_SIGN = 'MODERATION_FIRST_SIGN',
+  MODERATION_SECOND_SIGN = 'MODERATION_SECOND_SIGN',
+  PUBLISHED = 'PUBLISHED',
+  ARCHIVED = 'ARCHIVED',
 }
 
-enum PostTypeEnum {
-    DOPYS = 'DOPYS'
+export enum PostTypeEnum {
+  DOPYS = 'DOPYS',
 }
 
-enum DirectionEnum {
-    CARDIOLOGY = 'CARDIOLOGY',
-    PEDIATRICS = 'PEDIATRICS'
+export enum DirectionEnum {
+  CARDIOLOGY = 'CARDIOLOGY',
+  PEDIATRICS = 'PEDIATRICS',
 }
-