Kindmeal/my-app/src/Components/MapKindMeals.jsx at a853153478bf5dc67b4f28fc3e1ceffd74bbc32a · arnavdev25/Kindmeal · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React from 'react'
import { RoundImg, Para, MainImg, AButton, MiniContainer, SocialIcon } from './Styled'
{ }
const MapKindMeals = (data) => {
    return (


        <MiniContainer>
            <div style={{ display: "flex", justifyContent: "space-between", alignContent: "center", padding: "5px" }}>
                <div>
                    <RoundImg src={data.authorimg} alt={data.name} />
                </div>
                <div>
                    <p>{data.authorname}</p>
                    <Para>{data.date}</Para>
                </div>
                <AButton style={{ width: "80px" }}>view</AButton>
            </div>
            <MainImg src={data.img} alt={data.name} />

            <div style={{ display: "flex", justifyContent: "center", alignContent: "center", padding: "5px", height: "35px", gap: "50px" }}>
                <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                    <SocialIcon src="https://www.kindmeal.my/images/icon_heart_darkgrey.svg" />
                    <p style={{ fontSize: "20px" }}>{data.Like}</p>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                    <SocialIcon src='https://www.kindmeal.my/images/icon_camera_darkgrey.png' />
                    <p style={{ fontSize: "20px" }}>{data.camera}</p>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
                    <SocialIcon src='https://www.kindmeal.my/images/icon_comment_darkgrey.png' />
                    <p style={{ fontSize: "20px" }}>{data.Comment}</p>
                </div>
            </div>

            <div style={{ padding: "5px" }}>
                <img style={{ width: "20px", height: "19px" }}
                    src="https://www.kindmeal.my/images/icon_star.png" alt="" />
                <img style={{ width: "20px", height: "19px" }}
                    src="https://www.kindmeal.my/images/icon_star.png" alt="" />
                <img style={{ width: "20px", height: "19px" }}
                    src="https://www.kindmeal.my/images/icon_star.png" alt="" />
                <img style={{ width: "20px", height: "19px" }}
                    src="https://www.kindmeal.my/images/icon_star.png" alt="" />
                <img style={{ width: "20px", height: "19px" }}
                    src="https://www.kindmeal.my/images/icon_star.png" alt="" />
            </div>
            <p style={{ padding: "5px" }}>{data.description}</p>
            <hr />

        </MiniContainer>

    )
}

export default MapKindMeals