v0.0.2

src/4-features/user-marker/ui/user-marker.jsx

@@ -1,9 +1,11 @@
 import {useEffect, useState} from 'react';
 import {Marker, Popup, useMap, useMapEvents} from "react-leaflet";
 import {UserIcon} from "./user-icon.jsx";
+import CatPopup from "../../../6-shared/ui/cat-popup.jsx";
 
 const UserMarker = () => {
     const [position, setPosition] = useState(null)
+    const [open, setOpen] = useState(false)
     let map = useMap()
 
     useEffect(() => {
@@ -20,8 +22,12 @@ const UserMarker = () => {
     })
 
     return position === null ? null : (
-        <Marker position={position} icon={UserIcon}>
-            <Popup>You are here</Popup>
+        <Marker position={position}
+                icon={UserIcon}
+                onClick={() => setOpen(true)}>
+            <CatPopup>
+                Ololo
+            </CatPopup>
         </Marker>
     )
 }

src/5-entities/cat/ui/cat-card.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import classes from './cat-card.module.css'
+
+const CatCard = (cat) => {
+
+    // TODO: get values from cat model
+    const catImage = 'https://t4.ftcdn.net/jpg/00/97/58/97/360_F_97589769_t45CqXyzjz0KXwoBZT9PRaWGHRk5hQqQ.jpg'
+    const catName = 'Boris'
+
+    return (
+        <div className={classes.card}>
+            <img src={catImage}  alt="Boris" className={classes.image}/>
+            <h1>{catName}</h1>
+            <p className={classes.title}>Хороший уличный кот</p>
+            <p>Последний раз кормили: вчера в 21:10</p>
+            <p><button>Покормить!</button></p>
+        </div>
+    );
+};
+
+export default CatCard;

src/5-entities/cat/ui/cat-card.module.css

@@ -0,0 +1,37 @@
+.card {
+    width: auto;
+    margin: auto;
+    text-align: center;
+}
+
+.image {
+    width: 100%;
+}
+
+.title {
+    color: grey;
+    font-size: 18px;
+}
+
+button {
+    border: none;
+    outline: 0;
+    display: inline-block;
+    padding: 8px;
+    color: white;
+    background-color: #000;
+    text-align: center;
+    cursor: pointer;
+    width: 100%;
+    font-size: 18px;
+}
+
+a {
+    text-decoration: none;
+    font-size: 22px;
+    color: black;
+}
+
+button:hover, a:hover {
+    opacity: 0.7;
+}

src/6-shared/ui/cat-popup.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import classes from './cat-popup.module.css'
+import {Popup} from "react-leaflet";
+import CatCard from "../../5-entities/cat/ui/cat-card.jsx";
+
+export default function CatPopup({children, onClick}) {
+
+    return (            //TODO: Cat card!
+        <Popup autoPan={true}>
+            <CatCard />
+        </Popup>
+    )
+}

src/6-shared/ui/cat-popup.module.css

@@ -0,0 +1,25 @@
+.catPopup {
+    align-items: center;
+    justify-content: center;
+    min-width: 250px;
+    display: flex;
+}
+
+.catPopupImage {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    align-content: center;
+}
+
+.catPopupHead {
+    font-weight: bold;
+    font-size: 22px;
+    text-align: center;
+}
+
+.catPopupContent {
+    padding: 25px;
+    background: white;
+    border-radius: 16px;
+}

src/main.jsx

@@ -6,5 +6,5 @@ import MapView from "./3-widgets/map-view/ui/map-view.jsx";
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <MapView />
-  </React.StrictMode>,
+  </React.StrictMode>
 )