diff --git a/src/assets/styles/Rocket.css b/src/assets/styles/Rocket.css
new file mode 100644
index 0000000..199f228
--- /dev/null
+++ b/src/assets/styles/Rocket.css
@@ -0,0 +1,35 @@
+.rocket-item {
+ display: flex;
+ flex-direction: column;
+ gap: 1.2rem;
+ width: 100%;
+ padding: 1rem 0;
+}
+
+.rocket-image {
+ width: 100%;
+ height: auto;
+}
+
+.rocket-image img {
+ width: 100%;
+}
+
+.rocket-details {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ width: 100%;
+}
+
+.rocket-details .title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: #333;
+}
+
+.rocket-details .description {
+ font-size: 1rem;
+ color: #333;
+ line-height: 1.5;
+}
diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css
index ea27b5a..cfa7125 100644
--- a/src/assets/styles/index.css
+++ b/src/assets/styles/index.css
@@ -89,6 +89,17 @@ main {
border-color: #d73a5c;
}
+.btn-blue {
+ color: #fff;
+ background-color: #0d6efd;
+}
+
+.btn-blue:active {
+ color: #0d6efd;
+ background-color: transparent;
+ border-color: #0d6efd;
+}
+
.badge {
font-size: 0.8rem;
font-weight: 600;
diff --git a/src/assets/styles/responsive.css b/src/assets/styles/responsive.css
index 35ea29c..98be181 100644
--- a/src/assets/styles/responsive.css
+++ b/src/assets/styles/responsive.css
@@ -33,6 +33,15 @@
.missions-table {
overflow: hidden;
}
+
+ .rocket-item {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .rocket-image {
+ width: 350px;
+ }
}
@media (min-width: 992px) {
diff --git a/src/components/RocketItem.jsx b/src/components/RocketItem.jsx
new file mode 100644
index 0000000..27c723c
--- /dev/null
+++ b/src/components/RocketItem.jsx
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+
+const RocketItem = ({ rocket }) => (
+
+
+
+
+
+
{rocket.name}
+
{rocket.description}
+
+
+
+
+
+);
+
+RocketItem.propTypes = {
+ rocket: PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ description: PropTypes.string.isRequired,
+ image: PropTypes.string.isRequired,
+ }).isRequired,
+};
+
+export default RocketItem;
diff --git a/src/components/RocketsContent.jsx b/src/components/RocketsContent.jsx
new file mode 100644
index 0000000..790aacc
--- /dev/null
+++ b/src/components/RocketsContent.jsx
@@ -0,0 +1,32 @@
+import { useSelector } from 'react-redux';
+import RocketItem from './RocketItem';
+
+const RocketsContent = () => {
+ const { rockets, isLoading, error } = useSelector((state) => state.rockets);
+
+ if (error) {
+ return (
+
+
{error}
+
+ );
+ }
+
+ if (isLoading) {
+ return (
+
+
Loading Rockets...
+
+ );
+ }
+
+ return (
+
+ { rockets.map((rocket) => (
+
+ ))}
+
+ );
+};
+
+export default RocketsContent;
diff --git a/src/redux/rockets/rocketsSlice.js b/src/redux/rockets/rocketsSlice.js
index 35e2063..1b11367 100644
--- a/src/redux/rockets/rocketsSlice.js
+++ b/src/redux/rockets/rocketsSlice.js
@@ -27,24 +27,26 @@ const rocketsSlice = createSlice({
extraReducers: (builder) => {
builder
.addCase(getAllRockets.pending, (state) => {
- state.isLoading = true;
+ if (state.rockets.length === 0) state.isLoading = true;
})
.addCase(getAllRockets.fulfilled, (state, action) => {
- state.isLoading = false;
if (state.rockets.length === 0) {
+ state.isLoading = false;
state.rockets = action.payload.map((rocket) => (
{
id: rocket.id,
name: rocket.name,
- type: rocket.type,
+ description: rocket.description,
image: rocket.flickr_images[0],
}
));
}
})
.addCase(getAllRockets.rejected, (state, action) => {
- state.isLoading = false;
- state.error = action.payload;
+ if (state.rockets.length === 0) {
+ state.isLoading = false;
+ state.error = action.payload;
+ }
});
},
});
diff --git a/src/views/Rockets.jsx b/src/views/Rockets.jsx
index 987fd93..471ee5d 100644
--- a/src/views/Rockets.jsx
+++ b/src/views/Rockets.jsx
@@ -2,6 +2,8 @@ import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { getAllRockets } from '../redux/rockets/rocketsSlice';
import Layout from './Layout';
+import RocketsContent from '../components/RocketsContent';
+import '../assets/styles/Rocket.css';
const Rockets = () => {
const dispatch = useDispatch();
@@ -12,7 +14,11 @@ const Rockets = () => {
return (
-
+
);
};