diff --git a/src/App.css b/src/App.css index f055418..e8f3029 100644 --- a/src/App.css +++ b/src/App.css @@ -30,6 +30,7 @@ body { align-items: center; gap: 25px; } + .navbar .brand span { font-size: 25px; font-weight: 600; @@ -51,8 +52,12 @@ body { text-decoration: none; } -.rockets-container{ - padding: 20px 0px; +.rockets-container { + padding: 20px 0; +} + +.profile-container { + margin: 20px; } @media screen and (min-width: 800px) { diff --git a/src/components/Profile/profile.js b/src/components/Profile/profile.js index 3102ee3..aa8bcd7 100644 --- a/src/components/Profile/profile.js +++ b/src/components/Profile/profile.js @@ -1,12 +1,18 @@ /* eslint-disable linebreak-style */ /* eslint-disable no-unused-vars */ /* eslint-disable quotes */ -import { ListGroup, Col } from "react-bootstrap"; +import { + Container, Row, ListGroup, Col, +} from "react-bootstrap"; import { useSelector } from "react-redux"; // import { Row } from "react-bootstrap/Row"; const Profile = () => { const profileParts = useSelector((state) => [ + { + RocketTitle: "My Missions", + data: state.missions.filter((mission) => mission.reserved), + }, { RocketTitle: "My Rockets", data: state.rockets.filter((rocket) => rocket.reserved), @@ -14,16 +20,20 @@ const Profile = () => { ]); return ( <> - {profileParts.map(({ RocketTitle, data }) => ( - -

{RocketTitle}

- - {data.map((item) => ( - {item.name} - ))} - - - ))} + + + {profileParts.map(({ RocketTitle, data }) => ( + +

{RocketTitle}

+ + {data.map((item) => ( + {item.name} + ))} + + + ))} +
+
); };