Skip to content

Commit f4a6a53

Browse files
svdimitrsvdimitr
committed
extract cardlist component
1 parent 9431821 commit f4a6a53

File tree

3 files changed

+89
-52
lines changed

3 files changed

+89
-52
lines changed

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
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+
5+
6+
type CardListProps = {
7+
data: any[];
8+
}
9+
10+
export const CardsList = (props: CardListProps) => {
11+
return (
12+
<section className="k-d-grid k-grid-cols-12 k-col-span-12 k-justify-content-center k-align-items-center k-gap-3">
13+
{props.data.map((item, index) => {
14+
return (
15+
<div
16+
key={index}
17+
className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5"
18+
>
19+
{item.status != null ? (
20+
<BadgeContainer>
21+
<div
22+
className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
23+
style={{
24+
backgroundImage: `url(${item.img})`,
25+
width: "278px",
26+
height: "236px",
27+
backgroundSize: "cover",
28+
backgroundPosition: "center",
29+
backgroundRepeat: "no-repeat",
30+
}}
31+
></div>
32+
33+
<Badge
34+
themeColor="primary"
35+
className="k-text-uppercase"
36+
position={"inside"}
37+
align={{
38+
horizontal: "start",
39+
vertical: "top",
40+
}}
41+
>
42+
{item.status}
43+
</Badge>
44+
</BadgeContainer>
45+
) : (
46+
<div
47+
className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg"
48+
style={{
49+
backgroundImage: `url(${item.img})`,
50+
width: "278px",
51+
height: "236px",
52+
}}
53+
></div>
54+
)}
55+
<div>
56+
<div className="k-pt-2">{item.title}</div>
57+
<div className="k-d-flex k-justify-content-center k-gap-xl k-align-items-center k-pt-2">
58+
<span>
59+
{item.oldPrice && (
60+
<span
61+
className="k-text-line-through"
62+
style={{
63+
paddingRight: "8px",
64+
}}
65+
>{`$${item.oldPrice}`}</span>
66+
)}
67+
<span
68+
style={{
69+
color: "red",
70+
}}
71+
>{`$${item.newPrice}`}</span>
72+
</span>
73+
<span>
74+
<Button fillMode={"outline"} svgIcon={cartIcon}>
75+
Buy
76+
</Button>
77+
</span>
78+
</div>
79+
</div>
80+
</div>
81+
);
82+
})}
83+
</section>
84+
);
85+
};

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const DropDownSettings: DropDownsPopupSettings = {
3030
};
3131

3232
export const FilterComponent = (props: any) => {
33-
const [categoryValue, setCategoryValue] = React.useState<string[]>(["Category"]);
33+
const [categoryValue, setCategoryValue] = React.useState<string[]>([]);
3434
const [statusValue, setStatusValue] = React.useState<string>("Recommended");
3535
const [materialValue, setMaterialValue] = React.useState<string>("Material");
3636

@@ -113,6 +113,7 @@ export const FilterComponent = (props: any) => {
113113
fillMode={"flat"}
114114
data={chips}
115115
value={categoryValue}
116+
placeholder="Category"
116117
onChange={onMsChange}
117118
></MultiSelect>
118119
</span>

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

Lines changed: 2 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { Badge, BadgeContainer } from "@progress/kendo-react-indicators";
1616
import { cartIcon, layout2By2Icon, gridLayoutIcon } from "@progress/kendo-svg-icons"
1717
import { FilterComponent } from "../components/FilterComponent";
1818
import { process, State } from "@progress/kendo-data-query";
19+
import { CardsList } from "../components/CardsList";
1920

2021

2122
export const AllProductsListView = () => {
@@ -139,57 +140,7 @@ export const AllProductsListView = () => {
139140
<FilterComponent updateUI={updateUI}></FilterComponent>
140141
</Layout>
141142
<Layout>
142-
<section className="k-d-grid k-grid-cols-12 k-col-span-12 k-justify-content-center k-align-items-center k-gap-3">
143-
{
144-
data.map((item, index) => {
145-
return (
146-
<div key={index} className="k-col-span-3 k-text-center k-border k-border-primary k-gap-1 k-pb-5">
147-
{item.status != null ? (
148-
<BadgeContainer>
149-
<div className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg" style={{
150-
backgroundImage: `url(${item.img})`,
151-
width: "278px",
152-
height: "236px",
153-
backgroundSize: "cover",
154-
backgroundPosition: "center",
155-
backgroundRepeat: "no-repeat"
156-
}}>
157-
</div>
158-
159-
<Badge themeColor="primary" className="k-text-uppercase" position={"inside"} align={{
160-
horizontal: "start",
161-
vertical: "top"
162-
}}>{item.status}</Badge>
163-
</BadgeContainer>
164-
) : (
165-
<div className="k-d-flex k-justify-content-center k-align-items-center k-rounded-lg" style={{
166-
backgroundImage: `url(${item.img})`,
167-
width: "278px",
168-
height: "236px"
169-
}}>
170-
</div>
171-
)}
172-
<div>
173-
<div className="k-pt-2">{item.title}</div>
174-
<div className="k-d-flex k-justify-content-center k-gap-xl k-align-items-center k-pt-2">
175-
<span>
176-
{item.oldPrice && <span className="k-text-line-through" style={{
177-
paddingRight: "8px"
178-
}}>{`$${item.oldPrice}`}</span>}
179-
<span style={{
180-
color: "red"
181-
}}>{`$${item.newPrice}`}</span>
182-
</span>
183-
<span>
184-
<Button fillMode={"outline"} svgIcon={cartIcon}>Buy</Button>
185-
</span>
186-
</div>
187-
</div>
188-
</div>
189-
);
190-
})
191-
}
192-
</section>
143+
<CardsList data={data}></CardsList>
193144
</Layout>
194145
</>
195146
);

0 commit comments

Comments
 (0)