Skip to content

Commit 41939bb

Browse files
filipKovachevfilipKovachev
committed
split messages, adjust switch widht
1 parent f147483 commit 41939bb

File tree

18 files changed

+797
-1370
lines changed

18 files changed

+797
-1370
lines changed

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

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,41 @@
1-
import * as React from "react";
1+
import React, { useState } from "react";
22
import { Layout } from "../components/Layout";
33
import { OrderedImgText } from "../components/OrderedImageCard";
44
import { CustomSection } from "../components/CustomizedSection";
55
import { listData } from "../data/listData";
66
import { FilterComponent } from "../components/FilterComponent";
77
import { CardsList } from "../components/CardsList";
88
import { CategoryList } from "../components/CategoryList";
9-
import { CardDescriptor } from "../data/types";
10-
import { DataModel } from "../data/types";
9+
import { CardDescriptor, DataModel } from "../data/types";
1110

1211
import { Breadcrumb } from "@progress/kendo-react-layout";
1312
import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
1413
import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons";
1514
import { process, State } from "@progress/kendo-data-query";
1615

17-
import { useStore } from '@nanostores/react';
18-
import { selectedLanguage } from '../helpers/languageStore';
19-
import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';
20-
import messages from '../data/messages';
16+
import { useStore } from "@nanostores/react";
17+
import { selectedLanguage } from "../helpers/languageStore";
18+
import { loadMessages, LocalizationProvider } from "@progress/kendo-react-intl";
2119

22-
loadMessages(messages['en'], 'en');
23-
loadMessages(messages['fr'], 'fr');
24-
loadMessages(messages['es'], 'es');
20+
import enMessages from "../data/messages/en";
21+
import frMessages from "../data/messages/fr";
22+
import esMessages from "../data/messages/es";
2523

26-
export const AllProductsListView = () => {
27-
const language = useStore(selectedLanguage);
28-
const t = messages[language] || messages['en'];
24+
loadMessages(enMessages, "en");
25+
loadMessages(frMessages, "fr");
26+
loadMessages(esMessages, "es");
27+
28+
const messages = {
29+
en: enMessages,
30+
fr: frMessages,
31+
es: esMessages,
32+
};
2933

30-
const title = t.allProductsTitle;
31-
const subtitle = t.allProductsSubtitle;
32-
const contentText = t.allProductsContentText;
33-
const order = "first";
34+
export const AllProductsListView: React.FC = () => {
35+
const language = useStore(selectedLanguage);
36+
const t = messages[language] || messages["en"];
3437

35-
const [data, setData] = React.useState(listData);
38+
const [data, setData] = useState(listData);
3639

3740
const updateUI = (newState: State) => {
3841
const newData = process(listData, newState);
@@ -54,9 +57,9 @@ export const AllProductsListView = () => {
5457
},
5558
];
5659

57-
const BreakcrumbData: DataModel[] = [
58-
{ text: t.breadcrumbHome },
59-
{ text: t.breadcrumbJewelry },
60+
const breadcrumbData: DataModel[] = [
61+
{ text: t.breadcrumbHome},
62+
{ text: t.breadcrumbJewelry},
6063
];
6164

6265
return (
@@ -65,16 +68,16 @@ export const AllProductsListView = () => {
6568
<Layout>
6669
<section
6770
className="k-d-grid k-grid-cols-12 k-justify-content-center k-align-items-center k-col-span-12"
68-
style={{
69-
paddingTop: "60px",
70-
}}
71+
style={{ paddingTop: "60px" }}
7172
>
7273
<OrderedImgText
73-
title={title}
74-
subtitle={subtitle}
75-
contentText={contentText}
74+
title={t.allProductsTitle}
75+
subtitle={t.allProductsSubtitle}
76+
contentText={
77+
t.allProductsContentText
78+
}
7679
img="/bracelets.png"
77-
order={order}
80+
order="first"
7881
link={null}
7982
/>
8083
</section>
@@ -90,7 +93,7 @@ export const AllProductsListView = () => {
9093
</Layout>
9194
<Layout>
9295
<section className="k-d-flex k-justify-content-between">
93-
<Breadcrumb data={BreakcrumbData} />
96+
<Breadcrumb data={breadcrumbData} />
9497
<ButtonGroup>
9598
<Button fillMode={"flat"} svgIcon={gridLayoutIcon} />
9699
<Button fillMode={"flat"} svgIcon={layout2By2Icon} />

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

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,30 @@
1+
import React from 'react';
12
import { TextBox } from '@progress/kendo-react-inputs';
23
import { useStore } from '@nanostores/react';
34
import { selectedLanguage } from '../helpers/languageStore';
4-
import {
5-
loadMessages,
6-
LocalizationProvider,
7-
} from '@progress/kendo-react-intl';
8-
import messages from '../data/messages';
5+
import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';
96

10-
loadMessages(messages['en'], 'en');
11-
loadMessages(messages['fr'], 'fr');
12-
loadMessages(messages['es'], 'es');
7+
import enMessages from '../data/messages/en';
8+
import frMessages from '../data/messages/fr';
9+
import esMessages from '../data/messages/es';
10+
11+
loadMessages(enMessages, 'en');
12+
loadMessages(frMessages, 'fr');
13+
loadMessages(esMessages, 'es');
14+
15+
const messages = {
16+
en: enMessages,
17+
fr: frMessages,
18+
es: esMessages,
19+
};
1320

1421
const CardHolder = () => {
1522
const language = useStore(selectedLanguage);
1623
const t = messages[language] || messages['en'];
1724

1825
return (
1926
<LocalizationProvider language={language}>
20-
<TextBox placeholder={t.fullNamePlaceholder} />
27+
<TextBox placeholder={t.fullNamePlaceholder || 'Full Name'} />
2128
</LocalizationProvider>
2229
);
2330
};

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

Lines changed: 47 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,28 @@
1-
import { Badge, BadgeContainer } from "@progress/kendo-react-indicators";
2-
import { Button } from "@progress/kendo-react-buttons";
3-
import { cartIcon } from "@progress/kendo-svg-icons";
4-
import { CardListProps } from "../data/types";
1+
import React from 'react';
2+
import { Badge, BadgeContainer } from '@progress/kendo-react-indicators';
3+
import { Button } from '@progress/kendo-react-buttons';
4+
import { cartIcon } from '@progress/kendo-svg-icons';
5+
import { CardListProps } from '../data/types';
56

67
import { useStore } from '@nanostores/react';
78
import { selectedLanguage } from '../helpers/languageStore';
89
import { loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';
9-
import { messages } from '../data/messages'; // Use named import
1010

11-
loadMessages(messages['en'], 'en');
12-
loadMessages(messages['fr'], 'fr');
13-
loadMessages(messages['es'], 'es');
11+
import enMessages from '../data/messages/en';
12+
import frMessages from '../data/messages/fr';
13+
import esMessages from '../data/messages/es';
1414

15-
export const CardsList = (props: CardListProps) => {
15+
loadMessages(enMessages, 'en');
16+
loadMessages(frMessages, 'fr');
17+
loadMessages(esMessages, 'es');
18+
19+
const messages = {
20+
en: enMessages,
21+
fr: frMessages,
22+
es: esMessages,
23+
};
24+
25+
export const CardsList: React.FC<CardListProps> = (props) => {
1626
const language = useStore(selectedLanguage);
1727
const t = messages[language] || messages['en'];
1828

@@ -29,69 +39,68 @@ export const CardsList = (props: CardListProps) => {
2939
key={index}
3040
className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
3141
>
32-
{item.status != null ? (
42+
{item.status ? (
3343
<BadgeContainer>
3444
<div
3545
className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
3646
style={{
3747
backgroundImage: `url(${item.img})`,
38-
width: "278px",
39-
height: "236px",
40-
backgroundSize: "cover",
41-
backgroundPosition: "center",
42-
backgroundRepeat: "no-repeat",
48+
width: '278px',
49+
height: '236px',
50+
backgroundSize: 'cover',
51+
backgroundPosition: 'center',
52+
backgroundRepeat: 'no-repeat',
4353
}}
4454
></div>
45-
46-
{item.status && (
47-
<Badge
48-
themeColor="primary"
49-
className="k-text-uppercase"
50-
position={"inside"}
51-
align={{
52-
horizontal: "start",
53-
vertical: "top",
54-
}}
55-
>
56-
{t.statuses[item.status]}
57-
</Badge>
58-
)}
55+
{item.status && (
56+
<Badge
57+
themeColor="primary"
58+
className="k-text-uppercase"
59+
position={'inside'}
60+
align={{
61+
horizontal: 'start',
62+
vertical: 'top',
63+
}}
64+
>
65+
{t.statuses[item.status] || item.status}
66+
</Badge>
67+
)}
5968
</BadgeContainer>
6069
) : (
6170
<div
6271
className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
6372
style={{
6473
backgroundImage: `url(${item.img})`,
65-
width: "278px",
66-
height: "236px",
74+
width: '278px',
75+
height: '236px',
6776
}}
6877
></div>
6978
)}
7079
<div>
71-
<div className="k-pt-2">{t[item.title]}</div>
80+
<div className="k-pt-2">{t[item.title] || item.title}</div>
7281
<div className="k-d-flex k-justify-content-center k-gap-xl k-align-items-center k-pt-2">
7382
<span>
7483
{item.oldPrice && (
7584
<span
7685
className="k-text-line-through"
7786
style={{
78-
paddingRight: "8px",
87+
paddingRight: '8px',
7988
}}
8089
>{`$${item.oldPrice}`}</span>
8190
)}
8291
<span
8392
style={{
84-
color: "red",
93+
color: 'red',
8594
}}
8695
>{`$${item.newPrice}`}</span>
8796
</span>
8897
<span>
8998
<Button
90-
fillMode={"outline"}
99+
fillMode={'outline'}
91100
svgIcon={cartIcon}
92101
onClick={() => onButtonClick(index)}
93102
>
94-
{t.buyButtonText}
103+
{t.buyButtonText || 'Buy'}
95104
</Button>
96105
</span>
97106
</div>
@@ -103,3 +112,5 @@ export const CardsList = (props: CardListProps) => {
103112
</LocalizationProvider>
104113
);
105114
};
115+
116+
export default CardsList;

0 commit comments

Comments
 (0)