Skip to content

Commit b6adcc0

Browse files
svdimitrsvdimitr
committed
polish pages, extract types
1 parent acef7cd commit b6adcc0

File tree

11 files changed

+153
-140
lines changed

11 files changed

+153
-140
lines changed

‎examples/ecommerce-jewellery-store/src/components/BackgroundImage.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
import { Button } from "@progress/kendo-react-buttons";
2-
3-
type BackgroundImageProps = {
4-
title: string;
5-
subtitle: string;
6-
buttonText: string;
7-
img: string;
8-
};
2+
import { BackgroundImageProps } from "../data/types";
93

104
export const BackgroundImage = (props: BackgroundImageProps) => {
115
const { img, title, subtitle, buttonText } = props;

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

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import { Badge, BadgeContainer } from "@progress/kendo-react-indicators";
22
import { Button } from "@progress/kendo-react-buttons";
33
import { cartIcon } from "@progress/kendo-svg-icons"
4-
5-
6-
type CardListProps = {
7-
data: any[];
8-
}
4+
import { CardListProps } from "../data/types";
95

106
export const CardsList = (props: CardListProps) => {
117
return (

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

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
2+
import { useNavigate } from "react-router-dom";
3+
import { CategoryListProps } from "../data/types";
4+
import { Button } from "@progress/kendo-react-buttons";
5+
import { CardDescriptor } from "../data/types";
6+
7+
export const CategoryList = (props: CategoryListProps) => {
8+
const navigate = useNavigate();
9+
const onNavigate = (card: CardDescriptor) => {
10+
if(card.collectionText === "AURELIA"){
11+
navigate("/category")
12+
}
13+
}
14+
15+
return (
16+
<>
17+
<div className="k-h2 k-font-bold k-text-black k-col-span-12 k-text-center">
18+
Our Collections
19+
</div>
20+
<div
21+
className="k-font-size-xl k-p-5 k-col-span-12 k-text-center"
22+
style={{
23+
paddingBottom: "1rem",
24+
}}
25+
>
26+
Enjoy an excellent selection of fine jewelry
27+
</div>
28+
<div className="k-d-grid k-grid-cols-12 k-col-span-12">
29+
{props.data.map((card, index) => {
30+
return (
31+
<div key={index} className="k-col-span-4 k-text-center">
32+
<img
33+
width={"360px"}
34+
height={"319px"}
35+
style={{
36+
minWidth: "360px",
37+
paddingBottom: "1rem",
38+
}}
39+
src={card.img}
40+
/>
41+
<span className="k-pt-md">
42+
Collection "{card.collectionText}"
43+
</span>
44+
<div
45+
style={{
46+
paddingTop: "1rem",
47+
}}
48+
>
49+
<Button themeColor={"primary"} size={"large"} onClick={() => onNavigate(card)}>
50+
Buy Now
51+
</Button>
52+
</div>
53+
</div>
54+
);
55+
})}
56+
</div>
57+
</>
58+
);
59+
}

‎examples/ecommerce-jewellery-store/src/components/CustomizedSection.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
1-
export type SectionProps = {
2-
children: React.ReactNode
3-
}
4-
1+
import { SectionProps } from "../data/types";
52

63
export const CustomSection = (props: SectionProps) => {
74
return <section className="k-d-grid k-grid-cols-12 k-col-span-12 k-justify-content-center k-align-items-center">
85
{props.children}
96
</section>
10-
};
11-
// k-d-grid k-grid-cols-12 k-col-span-12 k-justify-content-center
7+
};

‎examples/ecommerce-jewellery-store/src/components/FilterComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const FilterComponent = (props: any) => {
9393
};
9494

9595
props.updateUI(customCompositeFilters);
96-
setCategoryValue(["Category"]);
96+
setCategoryValue([]);
9797
};
9898

9999
return (

‎examples/ecommerce-jewellery-store/src/components/Layout.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import "../styles.css"
2-
3-
export type LayoutProps = {
4-
children: React.ReactNode
5-
}
6-
2+
import { LayoutProps } from "../data/types";
73

84
export const Layout = (props: LayoutProps) => {
95
return <div className="kr-layout k-pb-15 k-pr-15 k-pl-15">

‎examples/ecommerce-jewellery-store/src/components/OrderedImageCard.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,4 @@
1-
type OrderedImgTextProps = {
2-
title: string;
3-
subtitle: string;
4-
contentText: string;
5-
img: string;
6-
order: string;
7-
};
8-
9-
//k-d-flex k-flex-wrap k-flex-row k-w-full k-h-full k-justify-content-center k-align-items-center k-gap-5px
1+
import { OrderedImgTextProps } from "../data/types";
102

113
export const OrderedImgText = (props: OrderedImgTextProps) => {
124
const { title, subtitle, contentText, img, order } = props;

‎examples/ecommerce-jewellery-store/src/components/SizedParent.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11

22
import "../styles.css"
3-
4-
5-
export type SizedParentProps = {
6-
children: React.ReactNode;
7-
};
3+
import { SizedParentProps } from "../data/types";
84

95
export const SizedParent = (props: SizedParentProps) => {
106
return (

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
export type CardDescriptor = {
2+
img: string;
3+
collectionText: string;
4+
};
5+
6+
export type DataModel = {
7+
text: string;
8+
}
9+
10+
export type ListDataDescriptor = {
11+
img: string | null;
12+
status: string | null;
13+
title: string;
14+
category: "Bracelets" | "Earrings" | "Rings" | "Watches" | "Necklaces";
15+
material: "Silver" | "Gold";
16+
oldPrice: number | null;
17+
newPrice: number;
18+
};
19+
20+
export type BackgroundImageProps = {
21+
title: string;
22+
subtitle: string;
23+
buttonText: string;
24+
img: string;
25+
};
26+
27+
export type CardListProps = {
28+
data: any[];
29+
}
30+
31+
export type SectionProps = {
32+
children: React.ReactNode
33+
}
34+
35+
export type LayoutProps = {
36+
children: React.ReactNode
37+
}
38+
39+
export type OrderedImgTextProps = {
40+
title: string;
41+
subtitle: string;
42+
contentText: string;
43+
img: string;
44+
order: string;
45+
};
46+
47+
export type SizedParentProps = {
48+
children: React.ReactNode;
49+
};
50+
51+
export type CategoryListProps = {
52+
data: any[];
53+
}

‎examples/ecommerce-jewellery-store/src/pages/AllProductsListView.tsx‎

Lines changed: 8 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,17 @@ import jewel from "../assets/1111.jfif?url";
88
import { Layout } from "../components/Layout";
99
import { OrderedImgText } from "../components/OrderedImageCard";
1010
import { CustomSection } from "../components/CustomizedSection";
11-
12-
import { Breadcrumb } from "@progress/kendo-react-layout";
13-
import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
1411
import { listData } from "../data/listData";
15-
import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons"
1612
import { FilterComponent } from "../components/FilterComponent";
17-
import { process, State } from "@progress/kendo-data-query";
1813
import { CardsList } from "../components/CardsList";
14+
import { CategoryList } from "../components/CategoryList";
15+
import { CardDescriptor } from "../data/types";
16+
import { DataModel } from "../data/types";
1917

18+
import { Breadcrumb } from "@progress/kendo-react-layout";
19+
import { Button, ButtonGroup } from "@progress/kendo-react-buttons";
20+
import { layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons";
21+
import { process, State } from "@progress/kendo-data-query";
2022

2123
export const AllProductsListView = () => {
2224
const title = "Fine Selection";
@@ -32,15 +34,6 @@ export const AllProductsListView = () => {
3234
setData(newData.data)
3335
};
3436

35-
type CardDescriptor = {
36-
img: string;
37-
collectionText: string;
38-
};
39-
40-
type DataModel = {
41-
text: string;
42-
}
43-
4437
const cards: CardDescriptor[] = [
4538
{
4639
img: necklace,
@@ -83,46 +76,7 @@ export const AllProductsListView = () => {
8376
</Layout>
8477
<Layout>
8578
<CustomSection>
86-
<div className="k-h2 k-font-bold k-text-black k-col-span-12 k-text-center">
87-
Our Collections
88-
</div>
89-
<div className="k-font-size-xl k-p-5 k-col-span-12 k-text-center" style={{
90-
paddingBottom: "1rem"
91-
}}>
92-
Enjoy an excellent selection of fine jewelry
93-
</div>
94-
<div className="k-d-grid k-grid-cols-12 k-col-span-12">
95-
{cards.map((card, index) => {
96-
return (
97-
<div key={index} className="k-col-span-4 k-text-center">
98-
<img
99-
width={"360px"}
100-
height={"319px"}
101-
style={{
102-
minWidth: "360px",
103-
paddingBottom: "1rem"
104-
}}
105-
src={card.img}
106-
/>
107-
<span
108-
className="k-pt-md"
109-
110-
>
111-
Collection "{card.collectionText}"
112-
</span>
113-
<div
114-
style={{
115-
paddingTop: "1rem",
116-
}}
117-
>
118-
<Button themeColor={"primary"} size={"large"}>
119-
Buy Now
120-
</Button>
121-
</div>
122-
</div>
123-
);
124-
})}
125-
</div>
79+
<CategoryList data={cards}></CategoryList>
12680
</CustomSection>
12781
</Layout>
12882
<Layout>

0 commit comments

Comments
 (0)