-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
This commit add the product UI card that will be used to list product in a grid system on the homepage and archive pages
- Loading branch information
1 parent
84ed4a5
commit 5d076ed
Showing
4 changed files
with
70 additions
and
1 deletion.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import { Link } from 'react-router-dom'; | ||
import { FiPlus } from 'react-icons/fi'; | ||
import { FaRegHeart } from 'react-icons/fa'; | ||
|
||
function ProductCard() { | ||
return ( | ||
<div className="product-card rounded-md shadow-md "> | ||
<div className="card-img-container w-full"> | ||
<img | ||
src="https://teddybusinessgroup.com/wp-content/uploads/2023/11/32A4G-1-300x300.webp" | ||
alt="product" | ||
className="product-card-img rounded-t-md w-full" | ||
/> | ||
<span className="p-2 bg-red-600 text-white font-normal rounded-lg text-xs"> | ||
10% Off | ||
</span> | ||
</div> | ||
<div className="card-content p-4"> | ||
<div className="flex"> | ||
<Link to="/"> | ||
<h3 className="text-xl">Product name</h3> | ||
</Link> | ||
|
||
<button | ||
type="button" | ||
aria-label="addToWishlist" | ||
className="rounded p-2.5 bg-gray-400 text-black" | ||
> | ||
<FaRegHeart /> | ||
</button> | ||
</div> | ||
<p>Ullamco tempor duis mollit ullamco incididunt culpa elit commodo.</p> | ||
<div className="flex"> | ||
<span className="text-sm">4.7</span> | ||
</div> | ||
<div className="flex"> | ||
<p className="text-2xl font-bold text-red-600"> | ||
$12,099 | ||
<span className="text-sm font-normal text-black">$18,999</span> | ||
</p> | ||
<button | ||
type="button" | ||
aria-label="addToCart" | ||
className="rounded p-2.5 bg-violet-800 text-white" | ||
> | ||
<FiPlus /> | ||
</button> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
} | ||
export default ProductCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,11 @@ | ||
import ProductCard from '@/components/productCard'; | ||
|
||
function Home() { | ||
return <p className="text-blueBg">Welcome to Dynamites E-commerce</p>; | ||
return ( | ||
<div className="container mx-auto grid grid-cols-4 gap-4"> | ||
<ProductCard /> | ||
</div> | ||
); | ||
} | ||
|
||
export default Home; |