Skip to content

Commit

Permalink
Refactor Bootcamp component and BootcampsPage
Browse files Browse the repository at this point in the history
- Create new Bootcamp component to display individual bootcamp details
- Update BootcampsPage to dynamically render bootcamp data using the new component
  • Loading branch information
prasadhonrao committed Oct 7, 2024
1 parent 5e7b41f commit e9d10ba
Show file tree
Hide file tree
Showing 7 changed files with 56 additions and 79 deletions.
Binary file added ui/public/images/image_1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/public/images/image_2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/public/images/image_3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/public/images/image_4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ui/public/images/showcase.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
30 changes: 30 additions & 0 deletions ui/src/components/Bootcamp.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Link } from 'react-router-dom';
import { Image } from 'react-bootstrap';

const Bootcamp = (props) => {
const { image, name, rating, location, careers, id } = props.bootcamp;

return (
<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4">
<Image src={image} className="card-img" alt={name} />
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">
<Link to={`/bootcamps/${id}`}>
{name}
<span className="float-right badge badge-success">{rating}</span>
</Link>
</h5>
<span className="badge badge-dark mb-2">{location}</span>
<p className="card-text">{careers.join(', ')}</p>
</div>
</div>
</div>
</div>
);
};

export default Bootcamp;
105 changes: 26 additions & 79 deletions ui/src/pages/bootcamps/BootcampsPage.jsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,25 @@
import Bootcamp from '../../components/Bootcamp';

const bootcamps = [
{
id: 1,
image: '/images/image_1.jpg',
name: 'Bootcamp 1',
rating: 4.5,
location: 'Location 1',
careers: ['Web Development', 'Data Science'],
},
{
id: 2,
image: '/images/image_2.jpg',
name: 'Bootcamp 2',
rating: 4.0,
location: 'Location 2',
careers: ['Web Development', 'UI/UX'],
},
// Add more bootcamp data as needed
];

const BootcampsPage = () => {
return (
<section className="browse my-5">
Expand Down Expand Up @@ -74,87 +96,12 @@ const BootcampsPage = () => {
<input type="submit" value="Find Bootcamps" className="btn btn-primary btn-block" />
</form>
</div>

{/* <!-- Main col --> */}
<div className="col-md-8">
{/* <!-- Bootcamps --> */}
<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4">
<img src="/img/image_1.jpg" className="card-img" alt="..." />
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">
<a href="/">
Devworks Bootcamp
<span className="float-right badge badge-success">8.8</span>
</a>
</h5>
<span className="badge badge-dark mb-2">Boston, MA</span>
<p className="card-text">Web Development, UI/UX, Mobile Development</p>
</div>
</div>
</div>
</div>

<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4">
<img src="../img/image_2.jpg" className="card-img" alt="..." />
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">
<a href="/">
ModernTech Bootcamp
<span className="float-right badge badge-success">7.5</span>
</a>
</h5>
<span className="badge badge-dark mb-2">Boston, MA</span>
<p className="card-text">Web Development, UI/UX, Mobile Development</p>
</div>
</div>
</div>
</div>
<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4">
<img src="../img/image_3.jpg" className="card-img" alt="..." />
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">
<a href="/">
Codemasters
<span className="float-right badge badge-success">9.2</span>
</a>
</h5>
<span className="badge badge-dark mb-2">Burlington, VT</span>
<p className="card-text">Web Development, Data Science, Marketing</p>
</div>
</div>
</div>
</div>

<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4">
<img src="../img/image_4.jpg" className="card-img" alt="..." />
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">
<a href="/">
DevCentral Bootcamp
<span className="float-right badge badge-success">6.4</span>
</a>
</h5>
<span className="badge badge-dark mb-2">Kingston, RI</span>
<p className="card-text">Web Development, UI/UX, Mobile Development, Marketing</p>
</div>
</div>
</div>
</div>
{bootcamps.map((bootcamp) => (
<Bootcamp key={bootcamp.id} bootcamp={bootcamp} />
))}

{/* <!-- Pagination --> */}
<nav aria-label="Page navigation example">
Expand Down

0 comments on commit e9d10ba

Please sign in to comment.