Skip to content

I
inventory-promotion-react
Commit b125e520 authored by Ben Anderson's avatar Ben Anderson
Browse files
Options

Added Heading to products page

parent e269419a
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 228 additions and 42 deletions
src/component/ProductGrid.jsx
View file @ b125e520
import React from 'react' import React from "react";
import Product from './Product.jsx' import Product from "./Product.jsx";
import { Col, Container, Row } from 'react-bootstrap'; import { Col, Container, Row } from "react-bootstrap";
import './../styles/ProductGrid.css' import "./../styles/ProductGrid.css";
export default function ProductGrid({productData}) { export default function ProductGrid({ productData }) {
return (
return ( <div>
//uses react bootstrap components <h1 id="title" className="text-center" >Inventory</h1>
<Container id="prod-grid" > <Container id="prod-grid" className="mt-3">
<Row xs={1} sm={2} md={3} lg={4}> <Row xs={1} sm={2} md={3} lg={4}>
{productData.map((product) => { {productData.map((product) => {
return ( return (
<Col key={product.sku}> <Col key={product.sku}>
<Product product={product}/> <Product product={product} />
</Col> </Col>
) );
})} })}
</Row> </Row>
</Container> </Container>
</div>
//uses vanilla bootstrap
// <div> //uses vanilla bootstrap
// <h1 id="title">Inventory</h1> // <div>
// <div className="container" id="prod-grid" > // <h1 id="title">Inventory</h1>
// <div className="row row-cols-4"> // <div className="container" id="prod-grid" >
// {productData.map((product) => { // <div className="row row-cols-4">
// return ( // {productData.map((product) => {
// <div className="col" key={product.sku}> // return (
// <Product product={product}/> // <div className="col" key={product.sku}>
// </div> // <Product product={product}/>
// </div>
// )
// })} // )
// </div> // })}
// </div> // </div>
// </div> // </div>
) // </div>
} );
}
\ No newline at end of file
yarn.lock
View file @ b125e520
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment