add the productCard compo

Author: svdimitr

examples/ecommerce-jewellery-store/src/App.tsx

@@ -11,6 +11,7 @@ import "@progress/kendo-theme-default/dist/all.css";
 import "@progress/kendo-theme-utils/dist/all.scss";
 import { SizedParent } from "./components/SizedParent";
 import { DetailedCategory } from './pages/DetailedCategory';
+import { ProductDetails } from './pages/ProductsDetails';
 
 function App() {
   return (
@@ -25,6 +26,7 @@ function App() {
           <Route path="/contacts" element={<Contacts />} />
           <Route path="/products" element={<AllProductsListView />} />
           <Route path="/category" element={<DetailedCategory />} />
+          <Route path="/product/:id" element={<ProductDetails />} />
         </Routes>
         <Footer />
       </SizedParent>

examples/ecommerce-jewellery-store/src/components/CardsList.tsx

@@ -2,8 +2,16 @@ import { Badge, BadgeContainer } from "@progress/kendo-react-indicators";
 import { Button } from "@progress/kendo-react-buttons";
 import { cartIcon } from "@progress/kendo-svg-icons"
 import { CardListProps } from "../data/types";
+import { useNavigate } from "react-router-dom";
 
 export const CardsList = (props: CardListProps) => {
+  const navigate = useNavigate();
+
+
+  const onButtonClick = (index: number) => {
+    navigate(`/product/${index + 1}`);
+  }
+
   return (
     <section className="k-d-grid k-grid-cols-12 k-col-span-12 k-justify-content-center k-align-items-center k-gap-3">
       {props.data.map((item, index) => {
@@ -67,7 +75,7 @@ export const CardsList = (props: CardListProps) => {
                   >{`$${item.newPrice}`}</span>
                 </span>
                 <span>
-                  <Button fillMode={"outline"} svgIcon={cartIcon}>
+                  <Button fillMode={"outline"} svgIcon={cartIcon} onClick={() => onButtonClick(index)}>
                     Buy
                   </Button>
                 </span>

examples/ecommerce-jewellery-store/src/components/CategoryList.tsx

@@ -7,7 +7,7 @@ import { CardDescriptor } from "../data/types";
 export const CategoryList = (props: CategoryListProps) => {
     const navigate = useNavigate();
     const onNavigate = (card: CardDescriptor) => {
-        if(card.collectionText === "AURELIA"){
+        if (card.collectionText === "AURELIA") {
             navigate("/category")
         }
     }

examples/ecommerce-jewellery-store/src/components/ProductCard.tsx

@@ -0,0 +1,64 @@
+import { Breadcrumb } from "@progress/kendo-react-layout";
+import { ProductCardProps } from "../data/types";
+import { NumericTextBox, Rating } from "@progress/kendo-react-inputs";
+import { Button } from "@progress/kendo-react-buttons";
+
+export const ProductCard = (props: ProductCardProps) => {
+
+
+    return (
+        <>
+            <section
+                className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12 k-gap-2"
+                style={{
+                    paddingTop: "60px",
+                }}
+            >
+                <div className="k-rounded-lg k-col-span-5" style={{
+                    backgroundImage: `url(${props.image})`,
+                    backgroundSize: "cover",
+                    height: "385px",
+                    width: "476px"
+                }}></div>
+
+                <div className="k-col-span-7 k-h-full">
+                    <Breadcrumb data={props.breadCrumbItem}></Breadcrumb>
+
+                    <div className="k-d-grid k-gap-6">
+                        <span className="k-h2 k-text-black k-font-bold">
+                            {props.title}
+                        </span>
+                        <div className="k-font-size-xl">
+                            {props.subtitle}
+                        </div>
+                        <span className="k-d-flex k-align-items-center">
+                            <Rating value={props.rating}></Rating>
+                            <span style={{
+                                color: "red"
+                            }}>
+                                {props.reviews}
+                            </span>
+                        </span>
+
+                        <div className="k-font-size-xl" style={{
+                            color: "red"
+                        }}>
+                            {`$${props.price}`}
+                        </div>
+                    </div>
+
+                    <div className="k-font-size-sm k-pt-6">
+                        {props.description}
+                    </div>
+                    <div className="k-d-flex k-gap-3 k-pt-6">
+                        <NumericTextBox spinners={true} style={{
+                            width: "84px"
+                        }} value={1}></NumericTextBox>
+                        <Button themeColor={"primary"}>Add to Cart</Button>
+                    </div>
+
+                </div>
+            </section>
+        </>
+    );
+}

examples/ecommerce-jewellery-store/src/data/listData.ts

@@ -20,13 +20,15 @@ import stainlessSteelWatch from "../assets/listViewImages/stainlessSteelWatch.pn
 import goldEarringsGarnet from "../assets/listViewImages/goldEarringsGarnet.png";
 
 type ListDataDescriptor = {
+    id: number;
     img: string | null;
     status: string | null;
     title: string;
     category: "Bracelets" | "Earrings" | "Rings" | "Watches" | "Necklaces";
     material: "Silver" | "Gold";
     oldPrice: number | null;
     newPrice: number;
+    rating: number;
 };
 
 export const listData: ListDataDescriptor[] = [{
@@ -190,4 +192,4 @@ export const listData: ListDataDescriptor[] = [{
     title: "Gold Earrings with Garnet",
     oldPrice: null,
     newPrice: 270
-},]
+},].map((item, index) => ({ ...item, id: index + 1, rating: Math.floor(Math.random() * 5) + 1 }));

examples/ecommerce-jewellery-store/src/data/types.ts

@@ -50,4 +50,15 @@ export type SizedParentProps = {
 
 export type CategoryListProps = {
     data: any[];
+}
+
+export type ProductCardProps = {
+    breadCrumbItem: DataModel[];
+    title: string | undefined;
+    image: string | null | undefined;
+    subtitle: string | undefined;
+    rating: number | undefined;
+    reviews: string | undefined;
+    price: number | undefined;
+    description: string | undefined;
 }

examples/ecommerce-jewellery-store/src/pages/ProductsDetails.tsx

@@ -0,0 +1,37 @@
+import { useParams } from "react-router-dom"
+import { ProductCard } from "../components/ProductCard";
+import { listData } from "../data/listData";
+import { DataModel } from "../data/types";
+import { Layout } from "../components/Layout";
+
+export const ProductDetails = () => {
+    const { id } = useParams();
+    const productId = parseInt(id, 10);
+    const descriptionText = "Elegant wedding bands featuring lustrous pearls, beautifully set in sleek, timeless bands. These rings offer a unique blend of classic charm and modern sophistication, making them a perfect symbol of everlasting love. The delicate pearls add a touch of grace, creating a refined and distinctive look that’s perfect for a memorable occasion."
+
+    const product = listData.find(item => item.id === productId);
+
+    const BreakcrumbData: DataModel[] = [{
+        text: "Home"
+    },
+    {
+        text: "Jewelry"
+    }, {
+        text: product?.category
+    }]
+    return (
+        <>
+            <Layout>
+                <ProductCard title={product?.title}
+                    image={product?.img}
+                    subtitle="In Platinum with Natural Diamond"
+                    breadCrumbItem={BreakcrumbData}
+                    rating={product?.rating}
+                    reviews="208 reviews"
+                    price={product?.newPrice} 
+                    description={descriptionText}>
+                </ProductCard>
+            </Layout>
+        </>
+    );
+}