Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Product card component #28

Merged
merged 1 commit into from
Oct 18, 2023
Merged

Product card component #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 38 additions & 1 deletion src/components/ProductCard/ProductCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,44 @@
import Image from "next/image";
import React from "react";
import { FaShoppingCart } from "react-icons/fa";

function ProductCard() {
return <div>ProductCard</div>;
return (
<div className='card w-[270px] bg-white shadow-xl'>
<div className='relative flex justify-center items-center m-4 mb-0 rounded-lg h-[80%] '>
<figure className=' rounded-lg '>
<Image
className='object-cover scale-100 rounded-lg transition-transform hover:scale-105 duration-300 ease-in-out overflow-hidden'
src=''
width={200}
height={200}
alt='Picture of the product'
/>
<div className='absolute top-0 m-2 left-0 rounded-full '>
<p className='rounded-full bg-[#7874F2] p-1 text-[8px] font-bold uppercase tracking-wide text-white sm:py-1 sm:px-3'>
Sale
</p>
</div>
</figure>
</div>

<div className='mt-1 px-5 p-4 mb-2 '>
<h2 className='card-title text-slate-900 text-xl max-w-lg tracking-tight font-bold text-center '>
Nike Air MX Super 2500
</h2>
<div className='mt-3 mb-4 w-full flex items-center justify-between text-slate-600 '>
<p className=' badge badge-outline '>category</p>
<p>location</p>
</div>
<div className=' flex items-center justify-between font-semibold text-slate-900 '>
<p className='text-xl '>$449</p>
<button className='text-3xl text-[#FF8A57] hover:text-orange-500'>
<FaShoppingCart />
</button>
</div>
</div>
</div>
);
}

export default ProductCard;
8 changes: 8 additions & 0 deletions src/components/ProductCard/__test__/ProductCard.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import renderer from "react-test-renderer";

import ProductCard from "../ProductCard";

it("renders correctly", () => {
const tree = renderer.create(<ProductCard />).toJSON();
expect(tree).toMatchSnapshot();
});
93 changes: 93 additions & 0 deletions src/components/ProductCard/__test__/__snapshots__/ProductCard.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<div
className="card w-[270px] bg-white shadow-xl"
>
<div
className="relative flex justify-center items-center m-4 mb-0 rounded-lg h-[80%] "
>
<figure
className=" rounded-lg "
>
<img
alt="Picture of the product"
className="object-cover scale-100 rounded-lg transition-transform hover:scale-105 duration-300 ease-in-out overflow-hidden"
data-nimg="1"
decoding="async"
height={200}
onError={[Function]}
onLoad={[Function]}
src=""
style={
Object {
"color": "transparent",
}
}
width={200}
/>
<div
className="absolute top-0 m-2 left-0 rounded-full "
>
<p
className="rounded-full bg-[#7874F2] p-1 text-[8px] font-bold uppercase tracking-wide text-white sm:py-1 sm:px-3"
>
Sale
</p>
</div>
</figure>
</div>
<div
className="mt-1 px-5 p-4 mb-2 "
>
<h2
className="card-title text-slate-900 text-xl max-w-lg tracking-tight font-bold text-center "
>
Nike Air MX Super 2500
</h2>
<div
className="mt-3 mb-4 w-full flex items-center justify-between text-slate-600 "
>
<p
className=" badge badge-outline "
>
category
</p>
<p>
location
</p>
</div>
<div
className=" flex items-center justify-between font-semibold text-slate-900 "
>
<p
className="text-xl "
>
$449
</p>
<button
className="text-3xl text-[#FF8A57] hover:text-orange-500"
>
<svg
fill="currentColor"
height="1em"
stroke="currentColor"
strokeWidth="0"
style={
Object {
"color": undefined,
}
}
viewBox="0 0 576 512"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M528.12 301.319l47.273-208C578.806 78.301 567.391 64 551.99 64H159.208l-9.166-44.81C147.758 8.021 137.93 0 126.529 0H24C10.745 0 0 10.745 0 24v16c0 13.255 10.745 24 24 24h69.883l70.248 343.435C147.325 417.1 136 435.222 136 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-15.674-6.447-29.835-16.824-40h209.647C430.447 426.165 424 440.326 424 456c0 30.928 25.072 56 56 56s56-25.072 56-56c0-22.172-12.888-41.332-31.579-50.405l5.517-24.276c3.413-15.018-8.002-29.319-23.403-29.319H218.117l-6.545-32h293.145c11.206 0 20.92-7.754 23.403-18.681z"
/>
</svg>
</button>
</div>
</div>
</div>
`;
8 changes: 6 additions & 2 deletions src/pages/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { collection, getDocs } from "firebase/firestore";
import Link from "next/link";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import * as React from "react";
import { db } from "@/util/firebase";
import { collection, getDocs } from "firebase/firestore";

import ProductCard from "@/components/ProductCard/ProductCard";

import Layout from "@/layout/Layout";
import { db } from "@/util/firebase";

export default function HomePage() {
const { t } = useTranslation("common");
Expand All @@ -17,6 +20,7 @@ export default function HomePage() {
});
return (
<Layout>
<ProductCard />
<p>{t("test")}</p>
<div style={{ display: "flex", flexDirection: "row", gap: "20px" }}>
<Link href='/' locale='en'>
Expand Down
Loading