add pages and layouts

Author: filipKovachev

examples/kendo-react-e-commerce-astro-app/public/contactsImage.png

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { Layout } from "../components/Layout";
+import { OrderedImgText } from "../components/OrderedImageCard";
+import { CustomSection } from "../components/CustomizedSection";
+import { listData } from "../data/listData";
+import { FilterComponent } from "../components/FilterComponent";
+import { CardsList } from "../components/CardsList";
+import { CategoryList } from "../components/CategoryList";
+import { CardDescriptor } from "../data/types";
+import { DataModel } from "../data/types";
+
+import { Breadcrumb } from "@progress/kendo-react-layout";
+import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
+import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons";
+import { process, State } from "@progress/kendo-data-query";
+
+export const AllProductsListView = () => {
+  const title = "Fine Selection";
+  const subtitle = "Enjoy the real craftsmanship";
+  const contentText =
+    "Jewelry is a meaningful form of self-expression that enhances personal style and adds beauty to any occasion.";
+  const order = "first";
+
+  const [data, setData] = React.useState(listData);
+
+  const updateUI = (newState: State) => {
+    const newData = process(listData, newState);
+    setData(newData.data);
+  };
+
+  const cards: CardDescriptor[] = [
+    {
+      img: "/necklace_1.jfif",
+      collectionText: 'Collection "SERENE"',
+    },
+    {
+      img: "/ring_1.jfif",
+      collectionText: 'Collection "AURELIA"',
+    },
+    {
+      img: "/1111.jfif",
+      collectionText: 'Collection "RAVINA"',
+    },
+  ];
+
+  const BreakcrumbData: DataModel[] = [
+    { text: "Home" },
+    { text: "Jewelry" },
+  ];
+
+  return (
+    <>
+      <Layout>
+        <section
+          className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
+          style={{
+            paddingTop: "60px",
+          }}
+        >
+          <OrderedImgText
+            title={title}
+            subtitle={subtitle}
+            contentText={contentText}
+            img="/bracelets.png"
+            order={order}
+            link={null}
+          />
+        </section>
+      </Layout>
+      <Layout>
+        <CustomSection>
+          <CategoryList title="Our Collections" subtitle="Enjoy an excellent selection of fine jewelry" data={cards} />
+        </CustomSection>
+      </Layout>
+      <Layout>
+        <section className="k-d-flex k-justify-content-between">
+          <Breadcrumb data={BreakcrumbData} />
+          <ButtonGroup>
+            <Button fillMode={"flat"} svgIcon={gridLayoutIcon} />
+            <Button fillMode={"flat"} svgIcon={layout2By2Icon} />
+          </ButtonGroup>
+        </section>
+      </Layout>
+      <Layout>
+        <FilterComponent updateUI={updateUI} />
+      </Layout>
+      <Layout>
+        <CardsList data={data} />
+      </Layout>
+    </>
+  );
+};
+
+export default AllProductsListView

examples/kendo-react-e-commerce-astro-app/src/components/AllProductsListView.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+
+import {
+    DropDownList,
+    DropDownListChangeEvent,
+  } from '@progress/kendo-react-dropdowns';
+  
+  const AppointmentInput: React.FC = () => {
+    const appointments = [
+      { text: 'Customer Service Appointment', id: 1 },
+      { text: 'Sales Representative Appointment', id: 2 },
+      { text: 'Refund Appointment', id: 3 },
+    ];
+  
+    const [state, setState] = React.useState({
+      value: { text: 'Customer Service Appointment', id: 1 },
+    });
+  
+    const handleChange = (event: DropDownListChangeEvent) => {
+      setState({
+        value: event.target.value,
+      });
+    };
+  
+    return (
+      <DropDownList
+        data={appointments}
+        textField="text"
+        dataItemKey="id"
+        value={state.value}
+        onChange={handleChange}
+      />
+    );
+  };
+  
+  export default AppointmentInput;
+  

examples/kendo-react-e-commerce-astro-app/src/components/AppointmentInput.tsx

@@ -5,10 +5,9 @@ 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}`);
+    // navigate(`/product/${index + 1}`);
   };
 
   return (

examples/kendo-react-e-commerce-astro-app/src/components/CardsList.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 (
+      <DropDownList
+        data={cities}
+        textField="text"
+        dataItemKey="id"
+        value={state.value}
+        onChange={handleChange}
+      />
+    );
+  };
+  
+  export default CityInput;

examples/kendo-react-e-commerce-astro-app/src/components/CityInput.tsx

@@ -9,9 +9,7 @@ import CityInput from '../components/CityInput';
 import PhoneInput from '../components/PhoneInput';
 import AppointmentInput from '../components/AppointmentInput';
 import DateChooserInput from '../components/DateChooserInput';
-import ContactsRadioButtons from '../components/ContactsRadioButtons'
-import { BackgroundImage } from '../components/BackgroundImage';
-import contactsImage from '@/assets/contactsImage.png';
+import ContactsRadioButtons from '../components/ContactsRadioButtons';
 import { Button } from '@progress/kendo-react-buttons';
 
 import {
@@ -20,15 +18,11 @@ import {
   FormElement,
   FieldWrapper,
 } from '@progress/kendo-react-form';
-import { RadioButton } from '@progress/kendo-react-inputs';
 import { Label } from '@progress/kendo-react-labels';
 
-import creditCards from '../assets/creditCards.png';
-
 const Contacts: React.FC = () => {
-
   const onSubmitClick = () => {
-    window.location.href="/thankyou"2
+    window.location.href = "/thankyou";
   };
 
   return (
@@ -56,7 +50,7 @@ const Contacts: React.FC = () => {
                     </FieldWrapper>
                     <div className="k-d-flex k-flex-col k-align-items-start k-gap-4">
                       <p>Type of customer</p>
-                      <ContactsRadioButtons/>
+                      <ContactsRadioButtons />
                     </div>
                     <FieldWrapper className="k-col-span-1">
                       <Field name="city" component={CityInput} />
@@ -82,7 +76,7 @@ const Contacts: React.FC = () => {
           </div>
           <div className="k-col-span-5 k-col-start-8 k-d-flex k-flex-col k-align-items-start">
             <img
-              src={contactsImage}
+              src="/contactsImage.png"
               alt="Contacts"
               style={{
                 maxWidth: '630px',

examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx

@@ -0,0 +1,28 @@
+
+
+import * as React from 'react';
+
+import { RadioButton, RadioButtonChangeEvent } from '@progress/kendo-react-inputs';
+
+const ContactsRadioButtons: React.FC  = () => {
+    const [selectedValue, setSelectedValue] = React.useState('first');
+
+    const handleChange = React.useCallback(
+        (e: RadioButtonChangeEvent) => {
+            setSelectedValue(e.value);
+        },
+        [setSelectedValue]
+    );
+
+    return (
+      <div className="k-d-flex k-gap-4">
+        <RadioButton name="group1" value="new" checked={selectedValue === 'new'} label="New" onChange={handleChange} />
+        <br />
+        <RadioButton name="group2" value="existing" checked={selectedValue === 'existing'} label="Existing" onChange={handleChange} />
+        <br />
+        <RadioButton name="group3" value="just curious" checked={selectedValue === 'just curious'} label="Just curious" onChange={handleChange} />
+      </div>
+    );
+}
+
+export default ContactsRadioButtons;

examples/kendo-react-e-commerce-astro-app/src/components/ContactsRadioButtons.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DateInput, DateInputChangeEvent } from '@progress/kendo-react-dateinputs';
+
+const DateChooserInput: React.FC  = () => {
+    const [value, setValue] = React.useState<Date | null>(new Date(2017, 1, 13));
+    const min = new Date(2000, 2, 10);
+    const max = new Date(2020, 2, 10);
+
+    const changeDate = (event: DateInputChangeEvent) => {
+        setValue(event.value);
+    };
+
+  return <div>
+            <DateInput value={value} min={min} max={max} onChange={changeDate} />
+        </div>;
+};
+
+export default DateChooserInput;

examples/kendo-react-e-commerce-astro-app/src/components/DateChooserInput.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Input, InputChangeEvent } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+import { eyeIcon, eyeSlashIcon } from '@progress/kendo-svg-icons';
+
+const EmailInput: React.FC = () => {
+ 
+  return (
+    <div>
+      <Input placeholder="[email protected]"/>
+    </div>
+  );
+};
+
+export default EmailInput;

examples/kendo-react-e-commerce-astro-app/src/components/EmailInput.tsx

@@ -0,0 +1,9 @@
+import { MaskedTextBox } from '@progress/kendo-react-inputs';
+
+const PhoneNumber: React.FC = () => {
+  return (
+    <MaskedTextBox mask="(999) 000-00-00-00" defaultValue="(359) 884-12-33-21" />
+  );
+};
+
+export default PhoneNumber;