diff --git a/src/0-app/App.jsx b/src/0-app/App.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/4-features/user-marker/ui/user-marker.jsx b/src/4-features/user-marker/ui/user-marker.jsx index 4cd3a0c..05af795 100644 --- a/src/4-features/user-marker/ui/user-marker.jsx +++ b/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 : ( - - You are here + setOpen(true)}> + + Ololo + ) } diff --git a/src/5-entities/cat/ui/cat-card.jsx b/src/5-entities/cat/ui/cat-card.jsx index e69de29..a6b8a9e 100644 --- a/src/5-entities/cat/ui/cat-card.jsx +++ b/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 ( +
+ Boris +

{catName}

+

Хороший уличный кот

+

Последний раз кормили: вчера в 21:10

+

+
+ ); +}; + +export default CatCard; \ No newline at end of file diff --git a/src/5-entities/cat/ui/cat-card.module.css b/src/5-entities/cat/ui/cat-card.module.css new file mode 100644 index 0000000..d07c92f --- /dev/null +++ b/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; +} diff --git a/src/6-shared/ui/cat-popup.jsx b/src/6-shared/ui/cat-popup.jsx new file mode 100644 index 0000000..1e2e5dc --- /dev/null +++ b/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! + + + + ) +} \ No newline at end of file diff --git a/src/6-shared/ui/cat-popup.module.css b/src/6-shared/ui/cat-popup.module.css new file mode 100644 index 0000000..40957ba --- /dev/null +++ b/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; +} diff --git a/src/main.jsx b/src/main.jsx index ed1d5a3..4bcba23 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -6,5 +6,5 @@ import MapView from "./3-widgets/map-view/ui/map-view.jsx"; ReactDOM.createRoot(document.getElementById('root')).render( - , + )