+
+
+
+
+
+
+
+ + {title} +
+{subtitle}
+ {buttonText && ( + + )} +
+ {item.status != null ? (
+
+
+
+
+ {item.status}
+
+
+ ) : (
+
+ )}
+
+ );
+ })}
+
+
+ {item.title}
+
+
+ {item.oldPrice && (
+ {`$${item.oldPrice}`}
+ )}
+ {`$${item.newPrice}`}
+
+
+
+
+
+
+ {title}
+
+
+ {subtitle}
+
+
+ {data.map((card, index) => {
+ return (
+
+
+ );
+}
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/CityInput.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/CityInput.tsx
new file mode 100644
index 00000000..faf00772
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/CityInput.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import {
+ DropDownList,
+ DropDownListChangeEvent,
+ } from '@progress/kendo-react-dropdowns';
+
+ const CityInput: React.FC = () => {
+ const cities = [
+ { text: 'London', id: 1 },
+ { text: 'Liverpool', id: 2 },
+ { text: 'Canterbury', id: 3 },
+ { text: 'Lancaster', id: 4 },
+ ];
+
+ const [state, setState] = React.useState({
+ value: { text: 'Liverpool', id: 2 },
+ });
+
+ const handleChange = (event: DropDownListChangeEvent) => {
+ setState({
+ value: event.target.value,
+ });
+ };
+
+ return (
+
+ 
+
+ {card.collectionText}
+
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+ Get in touch
+If you have any questions, contact us
+
+ 
+
+
+
+
+
+
+ );
+}
+
+export default ContactsRadioButtons;
\ No newline at end of file
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/CustomizedSection.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/CustomizedSection.tsx
new file mode 100644
index 00000000..739651b4
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/CustomizedSection.tsx
@@ -0,0 +1,7 @@
+import { SectionProps } from "../data/types";
+
+export const CustomSection = (props: SectionProps) => {
+ return +
+
+
;
+};
+
+export default DateChooserInput;
\ No newline at end of file
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx
new file mode 100644
index 00000000..07b093ba
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx
@@ -0,0 +1,181 @@
+import * as React from "react";
+import {
+ chevronLeftIcon,
+ trashIcon,
+} from "@progress/kendo-svg-icons";
+import {
+ Form,
+ Field,
+ FormElement,
+ FieldRenderProps,
+ FieldWrapper,
+} from "@progress/kendo-react-form";
+import { Error } from "@progress/kendo-react-labels";
+import { Input, NumericTextBox } from "@progress/kendo-react-inputs";
+import { Button } from "@progress/kendo-react-buttons";
+import { Layout } from "./Layout";
+
+const cart = [
+ {
+ product: {
+ id: 1,
+ img: "/sample-item1.png",
+ title: "Silver Bracelet with Onyx",
+ newPrice: 49.99,
+ },
+ quantity: 2,
+ },
+ {
+ product: {
+ id: 2,
+ img: "/sample-item2.png",
+ title: "Diamond Wedding Ring",
+ newPrice: 120.0,
+ },
+ quantity: 1,
+ },
+ {
+ product: {
+ id: 3,
+ img: "/sample-item3.png",
+ title: "Casual Silver Watch",
+ newPrice: 85.0,
+ },
+ quantity: 3,
+ },
+];
+
+const EmailInput = (fieldRenderProps: FieldRenderProps) => {
+ const { validationMessage, visited, ...others } = fieldRenderProps;
+ return (
+
+
+ {visited && validationMessage && {validationMessage} }
+
+ );
+};
+
+const ShoppingCartList: React.FC = () => {
+ const updateQuantity = (event: any) => {
+ const target = event.target.element;
+ const id = target.getAttribute("id");
+ console.log(`Update quantity for item with ID ${id}`);
+ };
+
+ return (
+ <>
+
+ Shopping Cart
+
+
+
+
+
+ {cart.map((item) => (
+
+ 
+
+ ))}
+
+ {item.product.title}
+ {`$${item.product.newPrice.toLocaleString()}`}
+
+
+
+
+
+ 
+
+
+
+
+
+ );
+};
+
+export default EmailInput;
\ No newline at end of file
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/ExpiryDate.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/ExpiryDate.tsx
new file mode 100644
index 00000000..442dcc43
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/ExpiryDate.tsx
@@ -0,0 +1,9 @@
+import { DateInput } from "@progress/kendo-react-dateinputs";
+
+const ExpiryDate = () => {
+ return (
+
+
+
+
+ 
+
+ (
+
+
+ )}
+ />
+
+
+
+
+ We use cookies to improve your experience.
+All rights reserved.
+Subscribe to our Newsletter:
+ +Follow us:
+
+
+
+
+
+
+
+
+ Customer Care
+ Contact Us + Shopping Online + Track Your Order + Shipping & Delivery + Orders & Payment + Help +
+
+
+ Our Company
+ Prominent Locations + Careers + Corporate Responsibility + Sustainability + Society Care +
+
+ Legal & Privacy
+ Terms of Use + Conditions of Sale + Return Policy + Privacy Policy + Cookie Policy +
+
+
+
+
+
+ {props.children}
+
;
+};
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/OrderedImageCard.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/OrderedImageCard.tsx
new file mode 100644
index 00000000..e1e7a54b
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/OrderedImageCard.tsx
@@ -0,0 +1,31 @@
+import { Button } from "@progress/kendo-react-buttons";
+import { OrderedImgTextProps } from "../data/types";
+
+export const OrderedImgText = (props: OrderedImgTextProps) => {
+ const { title, subtitle, contentText, img, order, link } = props;
+
+ return (
+ <>
+
+
+ {title}
+ {subtitle}
+ {contentText}
+
+ {link && (
+
+
+
+ )}
+
+
+ );
+};
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/PasswordInput.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/PasswordInput.tsx
new file mode 100644
index 00000000..5b288652
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/PasswordInput.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { TextBox, TextBoxChangeEvent } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+import { eyeIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
+
+const PasswordInput: React.FC = () => {
+ const [value, setValue] = React.useState
+ (
+
+ )}
+ />
+
+ );
+};
+
+export default PasswordInput;
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/PaymentDetails.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/PaymentDetails.tsx
new file mode 100644
index 00000000..be2adb31
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/PaymentDetails.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Layout } from "../components/Layout";
+import CardNumber from "../components/CardNumber";
+import ExpiryDate from "../components/ExpiryDate";
+import PasswordInput from "../components/PasswordInput";
+import CardHolder from "../components/CardHolder";
+import { Button } from "@progress/kendo-react-buttons";
+
+import {
+ Form,
+ Field,
+ FormElement,
+ FieldWrapper,
+} from "@progress/kendo-react-form";
+import {
+ RadioButton,
+} from "@progress/kendo-react-inputs";
+import {
+ Label,
+} from "@progress/kendo-react-labels";
+
+const PaymentDetails: React.FC = () => {
+ const onSubmitClick = () => {
+ window.location.href = "/thankyou";
+ };
+
+ return (
+
+
+
+
+
+
+
+ Payment Details
+Please, submit your payment details
+
+ 
+
+
+
+
+
+
+
+
+
+
+ Sub total
+US Dollars
+VAT
+US Dollars
+Shipping Method
+Standard Free Delivery
+Gift Wrapping
+Included Gift Wrapping
+Total
+US Dollars
+
+
+
+ {props.title}
+
+
+ {props.subtitle}
+
+
+ {`$${props.price}`}
+
+ {props.description}
+
+
+
+ Shopping Cart
+
+
+
+
+
+ {shoppingCart.length > 0 ? (
+ shoppingCart.map((item, index) => (
+
+ 
+
+ ))
+ ) : (
+
+ {item.title}
+ {`$${item.newPrice.toLocaleString()}`}
+
+
+ updateQuantity(index, e.value ?? item.quantity)
+ }
+ width={"118px"}
+ fillMode={"flat"}
+ />
+
+
+
+ Your shopping cart is empty.
+ )} +
+ {props.children}
+
+ );
+};
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Testemonials.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Testemonials.tsx
new file mode 100644
index 00000000..d12e937e
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/Testemonials.tsx
@@ -0,0 +1,62 @@
+import { Avatar } from '@progress/kendo-react-layout';
+import { Rating } from '@progress/kendo-react-inputs';
+import { TestemonialsDataDescriptor } from '../data/types';
+
+const testemonialsData: TestemonialsDataDescriptor[] = [
+ {
+ image: '/testemonials1.jpg',
+ name: "Erica Moore",
+ rating: 5,
+ description: "Vilora exceeded all my expectations! The craftsmanship of my diamond necklace is absolutely stunning, and the attention to detail is unparalleled. From the moment I placed my order to the day it arrived, the entire experience was flawless."
+ },
+ {
+ image: '/testemonials2.jpg',
+ name: "Kelvin Hettinger",
+ rating: 4.5,
+ description: "I couldn't be happier with my custom engagement ring from Vilora. The team helped me design the perfect piece, and the final result was even more beautiful than I imagined. Their service, quality, and dedication to excellence make Vilora my go-to for all fine jewelry."
+ },
+ {
+ image: '/testemonials3.jpg',
+ name: "Karen Brooks",
+ rating: 5,
+ description: "Vilora’s collection is nothing short of breathtaking. I recently purchased a white sapphire ring, and it’s become my favorite piece. The elegance and brilliance of the jewelry reflect their impeccable taste and high standards. Highly recommend!"
+ }
+];
+
+export const Testemonials = () => {
+ return (
+
+
+ );
+};
diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/ThankYou.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/ThankYou.tsx
new file mode 100644
index 00000000..c3c95b8a
--- /dev/null
+++ b/examples/kendo-react-e-commerce-astro-app/src/components/ThankYou.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Layout } from "../components/Layout";
+import { BackgroundImage } from '../components/BackgroundImage';
+import { Button } from "@progress/kendo-react-buttons";
+
+const ThankYou: React.FC = () => {
+
+ const onBacktoShoppingClick = () => {
+ window.location.href = "/products";
+ };
+
+ return (
+ <>
+
+
+ Customers words
++ What do they say about us? +
+
+ {testemonialsData.map((item, index) => (
+
+
+
+ ))}
+
+
+
+
+ 
+
+
+ {item.name}
+
+
+ + {item.description} +
+
+
+ Thank You For Your Order!
+You have submitted your order
+ +Product not found
+ )}
+