From 2e42e7cf85307305e55269435186a24fe5d7a4de Mon Sep 17 00:00:00 2001 From: filipKovachev Date: Thu, 14 Nov 2024 12:07:38 +0200 Subject: [PATCH] add pages --- .../package.json | 7 +- .../listViewImages/casualSilverWatch.png | Bin .../listViewImages/diamondRingRuby.png | Bin .../listViewImages/diamondRingSapphire.png | Bin .../listViewImages/diamondWeddingBands.png | Bin .../listViewImages/diamondWeddingRing.png | Bin .../listViewImages/goldEarringsGarnet.png | Bin .../listViewImages/handmadeDiamongRing.png | Bin .../listViewImages/handmadeSilverEarrings.png | Bin .../listViewImages/handmadeYellowGoldRing.png | Bin .../listViewImages/necklace.png | Bin .../listViewImages/pinkSilverBracelet.png | Bin .../listViewImages/roseGoldEarringsOpal.png | Bin .../listViewImages/silverBraceletCross.png | Bin .../listViewImages/silverBraceletOnyx.png | Bin .../listViewImages/silverBraceletTopaz.png | Bin .../listViewImages/silverHeartBracelet.png | Bin .../listViewImages/silverWeddingBands.png | Bin .../listViewImages/stainlessSteelWatch.png | Bin .../listViewImages/weddingBandsPearl.png | Bin .../listViewImages/yellowGoldEarrings.png | Bin .../src/components/AdminView.tsx | 231 ++++++++++++++++++ .../src/components/BackgroundImage.tsx | 3 - .../src/components/CategoryList.tsx | 3 - .../src/components/Contacts.tsx | 101 ++++++++ .../src/components/DetailedCategory.tsx | 188 ++++++++++++++ .../src/components/Header.tsx | 121 ++++----- .../src/components/Home.tsx | 114 +++++++++ .../src/components/Layout.tsx | 1 - .../src/components/ShoppingCartList.tsx | 188 ++------------ .../src/components/Testemonials.tsx | 12 +- .../src/data/items.ts | 6 +- .../src/data/shared-gd-sampleChartData.ts | 222 +++++++++++++++++ .../src/helpers/AdminContext.tsx | 30 +++ .../src/pages/category.astro | 10 + .../src/pages/contacts.astro | 7 + .../src/pages/index.astro | 23 +- .../src/pages/shoppingcart.astro | 7 + .../src/pages/index.astro | 9 +- 39 files changed, 1028 insertions(+), 255 deletions(-) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/casualSilverWatch.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/diamondRingRuby.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/diamondRingSapphire.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/diamondWeddingBands.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/diamondWeddingRing.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/goldEarringsGarnet.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/handmadeDiamongRing.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/handmadeSilverEarrings.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/handmadeYellowGoldRing.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/necklace.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/pinkSilverBracelet.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/roseGoldEarringsOpal.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/silverBraceletCross.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/silverBraceletOnyx.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/silverBraceletTopaz.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/silverHeartBracelet.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/silverWeddingBands.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/stainlessSteelWatch.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/weddingBandsPearl.png (100%) rename examples/kendo-react-e-commerce-astro-app/{src/assets => public}/listViewImages/yellowGoldEarrings.png (100%) create mode 100644 examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx create mode 100644 examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx create mode 100644 examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx create mode 100644 examples/kendo-react-e-commerce-astro-app/src/components/Home.tsx create mode 100644 examples/kendo-react-e-commerce-astro-app/src/data/shared-gd-sampleChartData.ts create mode 100644 examples/kendo-react-e-commerce-astro-app/src/helpers/AdminContext.tsx create mode 100644 examples/kendo-react-e-commerce-astro-app/src/pages/category.astro create mode 100644 examples/kendo-react-e-commerce-astro-app/src/pages/contacts.astro create mode 100644 examples/kendo-react-e-commerce-astro-app/src/pages/shoppingcart.astro diff --git a/examples/kendo-react-e-commerce-astro-app/package.json b/examples/kendo-react-e-commerce-astro-app/package.json index 23c5b17b..908fb0d9 100644 --- a/examples/kendo-react-e-commerce-astro-app/package.json +++ b/examples/kendo-react-e-commerce-astro-app/package.json @@ -13,18 +13,23 @@ "@astrojs/check": "^0.9.4", "@astrojs/react": "^3.6.2", "@progress/kendo-data-query": "^1.7.0", - "@progress/kendo-drawing": "^1.21.0", + "@progress/kendo-drawing": "^1.21.1", "@progress/kendo-licensing": "^1.3.5", + "@progress/kendo-react-animation": "^8.5.0", "@progress/kendo-react-buttons": "^8.5.0", "@progress/kendo-react-common": "^8.5.0", + "@progress/kendo-react-data-tools": "^8.5.0", "@progress/kendo-react-dateinputs": "^8.5.0", "@progress/kendo-react-dropdowns": "^8.5.0", "@progress/kendo-react-form": "^8.5.0", + "@progress/kendo-react-grid": "^8.5.0", "@progress/kendo-react-indicators": "^8.5.0", "@progress/kendo-react-inputs": "^8.5.0", "@progress/kendo-react-intl": "^8.5.0", "@progress/kendo-react-layout": "^8.5.0", + "@progress/kendo-react-chart-wizard": "^8.5.0", "@progress/kendo-react-notification": "^8.5.0", + "@progress/kendo-react-popup": "^8.5.0", "@progress/kendo-react-progressbars": "^8.5.0", "@progress/kendo-react-treeview": "^8.5.0", "@progress/kendo-svg-icons": "^3.3.0", diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/casualSilverWatch.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/casualSilverWatch.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/casualSilverWatch.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/casualSilverWatch.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondRingRuby.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondRingRuby.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondRingRuby.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondRingRuby.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondRingSapphire.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondRingSapphire.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondRingSapphire.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondRingSapphire.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondWeddingBands.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondWeddingBands.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondWeddingBands.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondWeddingBands.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondWeddingRing.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondWeddingRing.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/diamondWeddingRing.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/diamondWeddingRing.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/goldEarringsGarnet.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/goldEarringsGarnet.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/goldEarringsGarnet.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/goldEarringsGarnet.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/handmadeDiamongRing.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/handmadeDiamongRing.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/handmadeDiamongRing.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/handmadeDiamongRing.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/handmadeSilverEarrings.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/handmadeSilverEarrings.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/handmadeSilverEarrings.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/handmadeSilverEarrings.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/handmadeYellowGoldRing.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/handmadeYellowGoldRing.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/handmadeYellowGoldRing.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/handmadeYellowGoldRing.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/necklace.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/necklace.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/necklace.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/necklace.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/pinkSilverBracelet.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/pinkSilverBracelet.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/pinkSilverBracelet.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/pinkSilverBracelet.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/roseGoldEarringsOpal.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/roseGoldEarringsOpal.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/roseGoldEarringsOpal.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/roseGoldEarringsOpal.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverBraceletCross.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverBraceletCross.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverBraceletCross.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverBraceletCross.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverBraceletOnyx.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverBraceletOnyx.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverBraceletOnyx.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverBraceletOnyx.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverBraceletTopaz.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverBraceletTopaz.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverBraceletTopaz.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverBraceletTopaz.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverHeartBracelet.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverHeartBracelet.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverHeartBracelet.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverHeartBracelet.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverWeddingBands.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverWeddingBands.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/silverWeddingBands.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/silverWeddingBands.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/stainlessSteelWatch.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/stainlessSteelWatch.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/stainlessSteelWatch.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/stainlessSteelWatch.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/weddingBandsPearl.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/weddingBandsPearl.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/weddingBandsPearl.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/weddingBandsPearl.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/yellowGoldEarrings.png b/examples/kendo-react-e-commerce-astro-app/public/listViewImages/yellowGoldEarrings.png similarity index 100% rename from examples/kendo-react-e-commerce-astro-app/src/assets/listViewImages/yellowGoldEarrings.png rename to examples/kendo-react-e-commerce-astro-app/public/listViewImages/yellowGoldEarrings.png diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx new file mode 100644 index 00000000..ee3f1949 --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/components/AdminView.tsx @@ -0,0 +1,231 @@ +import * as React from 'react'; +import { getter } from '@progress/kendo-react-common'; +import { + Grid, + GridColumn, + GridSelectionChangeEvent, + GridHandle, + getSelectedState, + GridKeyDownEvent, + getSelectedStateFromKeyDown, + GridSortChangeEvent, +} from '@progress/kendo-react-grid'; +import { + ChartWizard, + getWizardDataFromGridSelection, +} from '@progress/kendo-react-chart-wizard'; +import { Button } from '@progress/kendo-react-buttons'; +import { orderBy, groupBy } from '@progress/kendo-data-query'; +import { chartAreaStackedIcon } from '@progress/kendo-svg-icons'; +import { sampleData, SampleDataItem } from '../data/shared-gd-sampleChartData'; +import { Pager, PageChangeEvent } from '@progress/kendo-react-data-tools'; + +const DATA_ITEM_KEY = 'ID'; +const SELECTED_FIELD = 'selected'; +const idGetter = getter(DATA_ITEM_KEY); + +interface SelectedState { + [id: string]: boolean | number[]; +} + +interface PageState { + skip: number; + take: number; +} + +const AdminView: React.FC = () => { + const gridRef = React.useRef(null); + const [selectedState, setSelectedState] = React.useState({}); + const [sort, setSort] = React.useState<{ field: string; dir: 'asc' | 'desc' }[]>([ + { field: 'Sales', dir: 'desc' }, + ]); + const [showChartWizard, setShowChartWizard] = React.useState(false); + const [chartData, setChartData] = React.useState([]); + const [top3SalesData, setTop3SalesData] = React.useState([]); + const [top3Visible, setTop3Visible] = React.useState(false); + const [page, setPage] = React.useState({ skip: 0, take: 4 }); + + const pageChange = (event: PageChangeEvent) => { + setPage(event.page); + }; + + const data = sampleData.map((item) => ({ + ...item, + [SELECTED_FIELD]: selectedState[idGetter(item)], + })); + + const pagedData = orderBy(data, sort).slice(page.skip, page.skip + page.take); + + const onSelectionChange = (event: GridSelectionChangeEvent) => { + const newSelectedState = getSelectedState({ + event, + selectedState, + dataItemKey: DATA_ITEM_KEY, + }); + setSelectedState(newSelectedState); + }; + + const onKeyDown = (event: GridKeyDownEvent) => { + const newSelectedState = getSelectedStateFromKeyDown({ + event, + selectedState, + dataItemKey: DATA_ITEM_KEY, + }); + setSelectedState(newSelectedState); + }; + + const disabled = Object.keys(selectedState).length === 0; + + const handleSelectedChart = React.useCallback(() => { + if (gridRef.current) { + const chartWizardData = getWizardDataFromGridSelection({ + grid: gridRef.current, + data: sampleData, + selectedState, + dataItemKey: DATA_ITEM_KEY, + }); + + setChartData(chartWizardData); + setShowChartWizard(true); + } else { + console.error('Grid reference is not available.'); + } + }, [selectedState]); + + const handleTop3Sales = React.useCallback(() => { + const selectedData = getWizardDataFromGridSelection({ + grid: gridRef.current, + data: sampleData, + selectedState, + dataItemKey: DATA_ITEM_KEY, + }); + + const sortedTop3Sales = selectedData + .sort( + (a, b) => + b.find((field) => field.field === 'Total Sales').value - + a.find((field) => field.field === 'Total Sales').value + ) + .slice(0, 3); + + setTop3SalesData(sortedTop3Sales); + setTop3Visible(true); + }, [selectedState]); + + const URLImageCell: React.FC<{ dataItem: SampleDataItem; field?: string }> = ({ + dataItem, + field, + }) => { + const imageUrl = dataItem[field || 'URL']; + return ( + + Product + + ); + }; + + const MyPager: React.FC<{ + skip: number; + take: number; + total: number; + onPageChange: (event: PageChangeEvent) => void; + }> = (props) => { + return ( +
+ +
+ ); + }; + + return ( + <> +
+ + +
+ } + selectable={{ + enabled: true, + drag: true, + mode: 'multiple', + }} + navigatable={true} + onSelectionChange={onSelectionChange} + onKeyDown={onKeyDown} + sortable={true} + sort={sort} + onSortChange={(e: GridSortChangeEvent) => { + setSort(e.sort); + }} + > + + + + + + + + + + {showChartWizard && ( + setShowChartWizard(false)} + /> + )} + + {top3Visible && ( + setTop3Visible(false)} + /> + )} + + ); +}; + +export default AdminView; \ No newline at end of file diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx index 88edd69e..715d8bc7 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx +++ b/examples/kendo-react-e-commerce-astro-app/src/components/BackgroundImage.tsx @@ -1,13 +1,10 @@ import { Button } from "@progress/kendo-react-buttons"; import { BackgroundImageProps } from "../data/types"; -import { useNavigate } from "react-router-dom"; export const BackgroundImage = (props: BackgroundImageProps) => { const { img, title, subtitle, buttonText } = props; - const navigate = useNavigate(); const onButtonClick = () => { - navigate('/products') } return ( diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/CategoryList.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/CategoryList.tsx index bcb61b00..9164acd8 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/components/CategoryList.tsx +++ b/examples/kendo-react-e-commerce-astro-app/src/components/CategoryList.tsx @@ -1,16 +1,13 @@ -import { useNavigate } from "react-router-dom"; import { CategoryListProps } from "../data/types"; import { Button } from "@progress/kendo-react-buttons"; import { CardDescriptor } from "../data/types"; export const CategoryList: React.FC = ({ data, title, subtitle, colSpan = 4 }) => { - const navigate = useNavigate(); const onNavigate = (card: CardDescriptor) => { console.log(card); if (card.collectionText === `Collection \"AURELIA\"`) { - navigate("/category") } } diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx new file mode 100644 index 00000000..a920b470 --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/components/Contacts.tsx @@ -0,0 +1,101 @@ +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 EmailInput from '../components/EmailInput'; +import CardHolder from '../components/CardHolder'; +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 { 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'; + +import creditCards from '../assets/creditCards.png'; + +const Contacts: React.FC = () => { + + const onSubmitClick = () => { + window.location.href="/thankyou"2 + }; + + return ( + +
+
+
+

Get in touch

+

If you have any questions, contact us

+
( + +
+ + + + + + + + + + + + +
+

Type of customer

+ +
+ + + + + + + + + + +
+ + )} + /> + +
+
+ Contacts +
+
+
+ + ); +}; + +export default Contacts; \ 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..55e46e6d --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/components/DetailedCategory.tsx @@ -0,0 +1,188 @@ +// src/components/ShoppingCartList.tsx +import * as React from "react"; +import { + chevronLeftIcon, + trashIcon, + walletSolidIcon, + heartIcon, + percentIcon, +} 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"; +import { Avatar } from "@progress/kendo-react-layout"; +import { SvgIcon } from "@progress/kendo-react-common"; + +// Temporary hardcoded cart data with image paths from the public folder +const cart = [ + { + product: { + id: 1, + img: "/sample-item1.png", // Images from public folder + 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.title} + {`$${item.product.newPrice.toLocaleString()}`} + + + + + {`$${(item.quantity * item.product.newPrice).toLocaleString()}`} +
+
+ ))} + + {cart.length > 0 ? ( + +
+
+ ( + +
+ Order Details + Please, insert your details + + + + + + + + + + + + + + + +
+
+ +
+ + )} + /> +
+
+ Shopping Cart Background +
+
+ + ) : null} + + ); +}; + +export default ShoppingCartList; diff --git a/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx b/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx index 9d602e80..8d18962f 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx +++ b/examples/kendo-react-e-commerce-astro-app/src/components/Header.tsx @@ -1,73 +1,76 @@ -import React from "react"; -import { Menu, AppBarSpacer, MenuItem } from "@progress/kendo-react-layout"; +// src/components/Header.tsx +import React, { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { Menu, AppBarSpacer, MenuSelectEvent } from "@progress/kendo-react-layout"; import { Button } from "@progress/kendo-react-buttons"; import { SvgIcon } from "@progress/kendo-react-common"; -import { useNavigate } from "react-router-dom"; - -import { - InputPrefix, - InputSeparator, - TextBox, - Switch, -} from "@progress/kendo-react-inputs"; - -import { - searchIcon, - userIcon, - cartIcon, - paletteIcon, -} from "@progress/kendo-svg-icons"; +import { InputPrefix, InputSeparator, TextBox, Switch } from "@progress/kendo-react-inputs"; +import { searchIcon, userIcon, cartIcon } from "@progress/kendo-svg-icons"; import items from "../data/items"; import languageItems from "../data/language-items"; - import { AppBar, AppBarSection } from "@progress/kendo-react-layout"; const Header: React.FC = () => { + const [isAdmin, setIsAdmin] = useState(false); - return ( - <> - - - - Logo - - - - + const handleCartClick = () => { + window.location.href="/shoppingcart" + }; - - ( - <> - - - - - - - - )} - style={{ width: 300 }} - /> -
-
- + const handleSwitchChange = () => { + setIsAdmin((prev) => !prev); + }; - + const handleMenuSelect = (event: MenuSelectEvent) => { + const selectedItem = event.item; + + // Only navigate if the item has a specific url + if (selectedItem.url) { + window.location.href = selectedItem.url; + } else { + console.warn("Selected item does not have a URL:", selectedItem.text); + } + }; + return ( + + + + Logo + + + - - - - - - + + ( + <> + + + + + + + + )} + style={{ width: 300 }} + /> + @@ -80,26 +65,16 @@ export const ShoppingCartList: React.FC = () => { const isCartItem = "quantity" in item; return ( -
+
{isCartItem
{isCartItem ? item.product.title : null} - {`$${ - isCartItem ? item.product.newPrice.toLocaleString() : null - }`} + {`$${isCartItem ? item.product.newPrice.toLocaleString() : null}`} {isCartItem ? ( { ) : ( Quantity not available )} - - - - {isCartItem - ? `$${( - item.quantity * item.product.newPrice - ).toLocaleString()}` - : `$${item.product.newPrice.toLocaleString()}`} + + {`$${(item.quantity * item.product.newPrice).toLocaleString()}`}
); @@ -135,62 +100,29 @@ export const ShoppingCartList: React.FC = () => {
( + render={() => (
Order Details Please, insert your details - + - - + - - + - - + - - +
-
@@ -198,82 +130,14 @@ export const ShoppingCartList: React.FC = () => { )} />
-
+
+ Shopping Cart Background +
) : null} - -
-
-

Why people choose us?

-
-
-
- - - -

- Return Policy -

-

- You can return your items within 30 days for a full refund or - exchange. -

-
- -
- - - -

- Included Gift Wrapping -

-

- Apply your discount code at checkout to enjoy exclusive savings - on your order. -

-
- -
- - - -

- Discount Code Available -

-

- Add gift wrapping for a special touch, along with a personalized - message for your loved ones. -

-
-
-
- ); }; + +export default ShoppingCartList; 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 index 03245300..d12e937e 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/components/Testemonials.tsx +++ b/examples/kendo-react-e-commerce-astro-app/src/components/Testemonials.tsx @@ -1,26 +1,22 @@ import { Avatar } from '@progress/kendo-react-layout'; import { Rating } from '@progress/kendo-react-inputs'; import { TestemonialsDataDescriptor } from '../data/types'; -import testemonials1 from "../assets/testemonials1.jpg" -import testemonials2 from "../assets/testemonials2.jpg" -import testemonials3 from "../assets/testemonials3.jpg" - const testemonialsData: TestemonialsDataDescriptor[] = [ { - image: testemonials1, + 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, + 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, + 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!" @@ -63,4 +59,4 @@ export const Testemonials = () => {
); -} +}; diff --git a/examples/kendo-react-e-commerce-astro-app/src/data/items.ts b/examples/kendo-react-e-commerce-astro-app/src/data/items.ts index 95c0a7f5..4d417ee8 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/data/items.ts +++ b/examples/kendo-react-e-commerce-astro-app/src/data/items.ts @@ -8,10 +8,8 @@ const items = [ "items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }], }, { - "text": "Blog" - }, - { - "text": "Contacts" + "text": "Contacts", + "url": "/contacts" } ]; diff --git a/examples/kendo-react-e-commerce-astro-app/src/data/shared-gd-sampleChartData.ts b/examples/kendo-react-e-commerce-astro-app/src/data/shared-gd-sampleChartData.ts new file mode 100644 index 00000000..6a6c63fb --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/data/shared-gd-sampleChartData.ts @@ -0,0 +1,222 @@ +export const sampleData = [ + { + ID: '1', + Product: 'Happy', + SKU: '06-0543', + Category: 'Rings', + Price: 12.39, + Sales: 300, + Status: 'Published', + Quantity: 10, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '2', + Product: 'Gorgeous', + SKU: '07-0659', + Category: 'Bracelets', + Price: 8.79, + Sales: 400, + Status: 'Draft', + Quantity: 4, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '3', + Product: 'Magical', + SKU: '06-0343', + Category: 'Earrings', + Price: 13.99, + Sales: 120, + Status: 'Published', + Quantity: 15, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '4', + Product: 'Adorable', + SKU: '07-0994', + Category: 'Necklaces', + Price: 9.49, + Sales: 260, + Status: 'Out of stock', + Quantity: 7, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '5', + Product: 'Strong', + SKU: '05-0321', + Category: 'Watches', + Price: 11.49, + Sales: 500, + Status: 'Published', + Quantity: 19, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '6', + Product: 'Elegant', + SKU: '02-1342', + Category: 'Rings', + Price: 15.99, + Sales: 150, + Status: 'Published', + Quantity: 12, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '7', + Product: 'Chic', + SKU: '03-2765', + Category: 'Bracelets', + Price: 7.99, + Sales: 320, + Status: 'Draft', + Quantity: 6, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '8', + Product: 'Classic', + SKU: '06-3412', + Category: 'Earrings', + Price: 10.49, + Sales: 180, + Status: 'Published', + Quantity: 8, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '9', + Product: 'Luxe', + SKU: '01-0999', + Category: 'Necklaces', + Price: 19.99, + Sales: 270, + Status: 'Published', + Quantity: 5, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '10', + Product: 'Bold', + SKU: '08-2034', + Category: 'Watches', + Price: 14.79, + Sales: 350, + Status: 'Out of stock', + Quantity: 0, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '11', + Product: 'Radiant', + SKU: '02-1123', + Category: 'Rings', + Price: 16.49, + Sales: 220, + Status: 'Published', + Quantity: 11, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '12', + Product: 'Sleek', + SKU: '07-0554', + Category: 'Bracelets', + Price: 8.39, + Sales: 100, + Status: 'Draft', + Quantity: 9, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '13', + Product: 'Sparkling', + SKU: '06-0998', + Category: 'Earrings', + Price: 12.89, + Sales: 290, + Status: 'Published', + Quantity: 14, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '14', + Product: 'Graceful', + SKU: '03-2456', + Category: 'Necklaces', + Price: 10.79, + Sales: 310, + Status: 'Published', + Quantity: 3, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '15', + Product: 'Timeless', + SKU: '08-3377', + Category: 'Watches', + Price: 13.59, + Sales: 430, + Status: 'Out of stock', + Quantity: 2, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '16', + Product: 'Vintage', + SKU: '01-0444', + Category: 'Rings', + Price: 11.29, + Sales: 160, + Status: 'Published', + Quantity: 18, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '17', + Product: 'Modern', + SKU: '02-9987', + Category: 'Bracelets', + Price: 6.99, + Sales: 210, + Status: 'Draft', + Quantity: 5, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '18', + Product: 'Shimmer', + SKU: '04-3321', + Category: 'Earrings', + Price: 13.79, + Sales: 240, + Status: 'Published', + Quantity: 7, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '19', + Product: 'Exquisite', + SKU: '09-7765', + Category: 'Necklaces', + Price: 17.49, + Sales: 500, + Status: 'Out of stock', + Quantity: 1, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + { + ID: '20', + Product: 'Bold', + SKU: '04-1432', + Category: 'Watches', + Price: 9.99, + Sales: 390, + Status: 'Published', + Quantity: 13, + URL: 'https://i5.walmartimages.com/seo/Women-s-ring-zircon-sparkling-diamond-ring-with-beautiful-romantic-jewelry-gift-Zirconia-Decorative-Flower-Ring_7489d8b4-1869-4524-916f-e3eebe30c7af.7597fda62aebae63fa30bd620ad12cb7.jpeg?odnHeight=2000&odnWidth=2000&odnBg=FFFFFF', + }, + ]; \ No newline at end of file diff --git a/examples/kendo-react-e-commerce-astro-app/src/helpers/AdminContext.tsx b/examples/kendo-react-e-commerce-astro-app/src/helpers/AdminContext.tsx new file mode 100644 index 00000000..4b7f62be --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/helpers/AdminContext.tsx @@ -0,0 +1,30 @@ +import React, { createContext, useContext, useState, ReactNode } from 'react'; + +interface AdminContextType { + isAdmin: boolean; + toggleRole: () => void; +} + +const AdminContext = createContext(undefined); + +export const AdminProvider: React.FC<{ children: ReactNode }> = ({ children }) => { + const [isAdmin, setIsAdmin] = useState(false); + + const toggleRole = () => { + setIsAdmin((prevRole) => !prevRole); + }; + + return ( + + {children} + + ); +}; + +export const useAdminContext = () => { + const context = useContext(AdminContext); + if (context === undefined) { + throw new Error('useAdminContext must be used within an AdminProvider'); + } + return context; +}; \ No newline at end of file diff --git a/examples/kendo-react-e-commerce-astro-app/src/pages/category.astro b/examples/kendo-react-e-commerce-astro-app/src/pages/category.astro new file mode 100644 index 00000000..9a4583f7 --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/pages/category.astro @@ -0,0 +1,10 @@ +--- +import Layout from '../layouts/Layout.astro'; +import ShoppingCartList from '../components/ShoppingCartList'; +--- + + +
+ +
+ diff --git a/examples/kendo-react-e-commerce-astro-app/src/pages/contacts.astro b/examples/kendo-react-e-commerce-astro-app/src/pages/contacts.astro new file mode 100644 index 00000000..5ab031f5 --- /dev/null +++ b/examples/kendo-react-e-commerce-astro-app/src/pages/contacts.astro @@ -0,0 +1,7 @@ +--- +import Contacts from '../components/Contacts'; +--- + +
+ +
\ No newline at end of file diff --git a/examples/kendo-react-e-commerce-astro-app/src/pages/index.astro b/examples/kendo-react-e-commerce-astro-app/src/pages/index.astro index 6cf90e12..d4990976 100644 --- a/examples/kendo-react-e-commerce-astro-app/src/pages/index.astro +++ b/examples/kendo-react-e-commerce-astro-app/src/pages/index.astro @@ -1,14 +1,17 @@ --- -import Layout from '@astro-layouts/Layout.astro'; -import Footer from '../components/Footer.tsx'; -import Header from '../components/Header.tsx'; - +import Layout from '../layouts/Layout.astro'; +import { AdminProvider } from '../helpers/AdminContext'; +import Home from '../components/Home'; +import Header from '../components/Header'; +import Footer from '../components/Footer'; --- - -
-
-
-
- + +
+
+ +
+ +