yawaflua/SusMarket
1
0
Fork 0
mirror of https://github.com/yawaflua/SusMarket.git synced 2026-04-25 17:20:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Coding product card, home page & other fixes

Browse Source 
Uploaded images in webp format for product, coding html and css for product cards, add banner and home page
This commit is contained in:
RailTH
2024-02-03 20:50:41 +11:00
parent a814031d1a
commit 630c6dab80
22 changed files with 72 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
reactapp/src/components/blocks/AddBanner.tsx
+8
View File
@@ -0,0 +1,8 @@
import React from "react";
export default function Banner() {
return(
<div className="banner-div">
</div>
)
}
reactapp/src/components/blocks/ProductCard.tsx
+2 -3
View File
@@ -1,8 +1,7 @@
import React from "react";
import Pefsfsdf from "./image-placeholder.png"
type ProductTypes = {
ProductImg: any,
ProductImg: string,
ProductName: string,
Price: number
}
@@ -10,7 +9,7 @@ type ProductTypes = {
export default function ProductCard({ProductName, ProductImg, Price}:ProductTypes) {
return(
<article className="product-article">
<img src={Pefsfsdf} alt="" className="product-article__img"/>
<img src={ProductImg} alt="" className="product-article__img"/>
<h5 className="product-article__price-h5">{Price} ₽</h5>
<h6 className="product-article__name-h6">{ProductName}</h6>
</article>
reactapp/src/components/blocks/image-placeholder.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 814 B

reactapp/src/components/pages/HomePage.tsx
+25 -2
View File
@@ -1,10 +1,33 @@
import React from "react";
import ProductCard from "../blocks/ProductCard";
import Banner from "../blocks/AddBanner";
import Image1 from "../../assets/img/product-image-1.webp";
import Image2 from "../../assets/img/product-image-2.webp";
import Image3 from "../../assets/img/product-image-3.webp";
import Image4 from "../../assets/img/product-image-4.webp";
import Image5 from "../../assets/img/product-image-5.webp";
import Image6 from "../../assets/img/product-image-6.webp";
import Image7 from "../../assets/img/product-image-7.webp";
import Image8 from "../../assets/img/product-image-8.webp";
import Image9 from "../../assets/img/product-image-9.webp";
import Image10 from "../../assets/img/product-image-10.webp";
export default function HomePage(Placeholder:any) {
export default function HomePage() {
return(
<section className="home-section">
<ProductCard ProductName="Абеме" ProductImg={Placeholder} Price={150} />
<Banner />
<div className="products-div">
<ProductCard ProductName="Шоколадка Mr. Beast" ProductImg={Image1} Price={2000} />
<ProductCard ProductName="Салат" ProductImg={Image2} Price={200} />
<ProductCard ProductName="Футболка 'Инфантил'" ProductImg={Image3} Price={1500} />
<ProductCard ProductName="Мороженое" ProductImg={Image4} Price={150} />
<ProductCard ProductName="Фигурка" ProductImg={Image5} Price={1799} />
<ProductCard ProductName="Трансформер" ProductImg={Image6} Price={19999} />
<ProductCard ProductName="Старая игрушка Баз-Лайтер" ProductImg={Image7} Price={99999999999} />
<ProductCard ProductName="Одёжка" ProductImg={Image8} Price={756} />
<ProductCard ProductName="Книга про ботанику" ProductImg={Image9} Price={2345} />
<ProductCard ProductName="Книга белая" ProductImg={Image10} Price={150} />
</div>
</section>
)
}