Skip to content

Commit b0a0eb2

Browse files
filipKovachevfilipKovachev
committed
add Header and Footer, add alias for imports
1 parent 53f910d commit b0a0eb2

File tree

12 files changed

+224
-139
lines changed

12 files changed

+224
-139
lines changed

‎examples/ecommerce-jewellery-store/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,18 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@progress/kendo-drawing": "^1.21.0",
14+
"@progress/kendo-licensing": "^1.3.5",
15+
"@progress/kendo-react-buttons": "^8.5.0",
16+
"@progress/kendo-react-dropdowns": "^8.5.0",
17+
"@progress/kendo-react-inputs": "^8.5.0",
18+
"@progress/kendo-react-intl": "^8.5.0",
19+
"@progress/kendo-react-layout": "^8.5.0",
20+
"@progress/kendo-react-notification": "^8.5.0",
21+
"@progress/kendo-react-progressbars": "^8.5.0",
22+
"@progress/kendo-react-treeview": "^8.5.0",
23+
"@progress/kendo-svg-icons": "^3.1.0",
24+
"@progress/kendo-theme-default": "^9.1.0",
1325
"react": "^18.3.1",
1426
"react-dom": "^18.3.1"
1527
},

‎examples/ecommerce-jewellery-store/src/App.css‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎examples/ecommerce-jewellery-store/src/App.tsx‎

Lines changed: 5 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,13 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
1+
import Header from '@/components/Header';
2+
import Footer from '@/components/Footer';
3+
import '@progress/kendo-theme-default/dist/all.css';
54

65
function App() {
7-
const [count, setCount] = useState(0)
86

97
return (
108
<>
11-
<div>
12-
<a href="https://vitejs.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.tsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
9+
<Header/>
10+
<Footer/>
3111
</>
3212
)
3313
}

‎examples/ecommerce-jewellery-store/src/assets/vilora-logo.png‎

1 KB
Loading

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

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
import React from 'react';
2+
import { Button } from '@progress/kendo-react-buttons';
3+
import { SvgIcon } from '@progress/kendo-react-common';
4+
import { TextBox, InputSuffix, InputSeparator } from '@progress/kendo-react-inputs';
5+
import { Label } from '@progress/kendo-react-labels';
6+
import {
7+
facebookIcon,
8+
linkedinIcon,
9+
twitterIcon,
10+
} from '@progress/kendo-svg-icons';
11+
import viloraLogo from '@/assets/vilora-logo.png';
12+
13+
const Footer: React.FC = () => {
14+
return (
15+
<section className="k-py-10 k-px-12 header">
16+
<div className="k-d-flex k-flex-wrap k-justify-content-between k-gap-8 k-text-align-left">
17+
<div className="k-flex-basis-250 k-flex-grow-1 k-mb-4 k-mt-6" style={{marginLeft: '50px'}}>
18+
<a href="#" className="k-d-block k-mb-4 k-text-align-center">
19+
<img src={viloraLogo} alt="Logo" />
20+
</a>
21+
<p className="k-m-0">We use cookies to improve your experience.</p>
22+
<p className="k-m-0">All rights reserved.</p>
23+
<p className="k-mt-4">Subscribe to our Newsletter:</p>
24+
<Label editorId="email" className="k-sr-only">Your Email</Label>
25+
<TextBox
26+
placeholder="Email"
27+
className="k-w-full"
28+
suffix={() => (
29+
<InputSuffix>
30+
<InputSeparator />
31+
<Button themeColor="primary">Subscribe</Button>
32+
</InputSuffix>
33+
)}
34+
/>
35+
<p className="k-mt-6 k-font-weight-bold">Follow us:</p>
36+
<div className="k-d-flex k-gap-2 k-align-items-center">
37+
<p className="k-d-flex k-align-items-center" style={{ gap: '10px' }}>
38+
<SvgIcon icon={facebookIcon} size="xlarge" /> Facebook
39+
</p>
40+
<p className="k-d-flex k-align-items-center" style={{ gap: '10px' }}>
41+
<SvgIcon icon={twitterIcon} size="xlarge" /> Twitter
42+
</p>
43+
<p className="k-d-flex k-align-items-center" style={{ gap: '10px' }}>
44+
<SvgIcon icon={linkedinIcon} size="xlarge" /> LinkedIn
45+
</p>
46+
</div>
47+
</div>
48+
49+
<div className="k-flex-basis-200 k-flex-grow-1 k-d-flex k-flex-col k-gap-2 k-mt-6">
50+
<h4 className="k-color-primary k-font-bold">Customer Care</h4>
51+
<a href="#" className="k-link">Contact Us</a>
52+
<a href="#" className="k-link">Shopping Online</a>
53+
<a href="#" className="k-link">Track Your Order</a>
54+
<a href="#" className="k-link">Shipping & Delivery</a>
55+
<a href="#" className="k-link">Orders & Payment</a>
56+
<a href="#" className="k-link">Help</a>
57+
</div>
58+
59+
<div className="k-flex-basis-200 k-flex-grow-1 k-d-flex k-flex-col k-gap-2 k-mt-6">
60+
<h4 className="k-color-primary k-font-bold">Our Company</h4>
61+
<a href="#" className="k-link">Prominent Locations</a>
62+
<a href="#" className="k-link">Careers</a>
63+
<a href="#" className="k-link">Corporate Responsibility</a>
64+
<a href="#" className="k-link">Sustainability</a>
65+
<a href="#" className="k-link">Society Care</a>
66+
</div>
67+
68+
<div className="k-flex-basis-200 k-flex-grow-1 k-d-flex k-flex-col k-gap-2 k-mt-6" style={{marginRight: '150px'}}>
69+
<h4 className="k-color-primary k-font-bold">Legal & Privacy</h4>
70+
<div className="k-d-flex k-gap-2">
71+
<p className="k-m-0">Prominent Locations</p>
72+
</div>
73+
<div className="k-d-flex k-gap-2">
74+
<p className="k-m-0">Careers</p>
75+
</div>
76+
<div className="k-d-flex k-gap-2">
77+
<p className="k-m-0">Corporate Responsibility</p>
78+
</div>
79+
<div className="k-d-flex k-gap-2">
80+
<p className="k-m-0">Sustainability</p>
81+
</div>
82+
</div>
83+
</div>
84+
</section>
85+
);
86+
};
87+
88+
export default Footer;

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from 'react';
2+
import { Menu, AppBarSpacer } from "@progress/kendo-react-layout";
3+
import { Button } from "@progress/kendo-react-buttons";
4+
import { SvgIcon } from "@progress/kendo-react-common";
5+
6+
import {
7+
InputPrefix,
8+
InputSeparator,
9+
TextBox,
10+
Switch
11+
} from "@progress/kendo-react-inputs";
12+
13+
14+
import { searchIcon, userIcon, cartIcon, paletteIcon } from "@progress/kendo-svg-icons";
15+
import viloraLogo from '@/assets/vilora-logo.png';
16+
import items from '@/data/items'
17+
import languageItems from '@/data/language-items';
18+
19+
import {
20+
AppBar,
21+
AppBarSection,
22+
} from "@progress/kendo-react-layout";
23+
24+
const Header: React.FC = () => {
25+
return (
26+
<>
27+
<AppBar themeColor="inherit">
28+
<AppBarSection className="k-d-flex k-align-items-center" style={{ paddingLeft: '50px' }}>
29+
<a href="#" className="k-d-sm-flex" style={{ marginRight: '50px' }}>
30+
<img src={viloraLogo} alt="Logo" />
31+
</a>
32+
<Menu items={items} />
33+
</AppBarSection>
34+
35+
<AppBarSection className="k-mx-auto k-w-full k-d-flex k-justify-content-center">
36+
<TextBox
37+
placeholder="Search"
38+
prefix={() => (
39+
<>
40+
<InputPrefix orientation="horizontal">
41+
<span className="k-input-prefix-text">
42+
<SvgIcon icon={searchIcon} size="medium" />
43+
44+
</span>
45+
</InputPrefix>
46+
<InputSeparator />
47+
</>
48+
)}
49+
style={{ width: 300 }}
50+
/>
51+
<div style={{ marginLeft: '20px' }}>
52+
<Button svgIcon={userIcon} fillMode="flat" className="k-ml-2" />
53+
<Button svgIcon={cartIcon} fillMode="flat" className="k-ml-2" />
54+
<Button svgIcon={paletteIcon} fillMode="flat" className="k-ml-2" />
55+
</div>
56+
</AppBarSection>
57+
58+
<AppBarSpacer style={{ width: 4 }} />
59+
60+
<AppBarSection className="k-d-flex k-flex-grow k-justify-content-end" style={{ marginRight: '50px' }}>
61+
<Switch />
62+
<Menu items={languageItems} />
63+
</AppBarSection>
64+
</AppBar>
65+
</>
66+
);
67+
};
68+
69+
export default Header;

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const items = [
2+
{
3+
"text": "Home",
4+
},
5+
{
6+
"text": "Jewelry",
7+
"items": [{ "text": "Bracelets" }, { "text": "Rings" }, { "text": "Earings" }, { "text": "Watches" },{ "text": "All" }]
8+
},
9+
{
10+
"text": "Blog"
11+
},
12+
{
13+
"text": "Contacts"
14+
}
15+
];
16+
17+
export default items;
18+

‎examples/ecommerce-jewellery-store/src/data/language-items.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const languageItems = [
2+
3+
{
4+
"text": "English",
5+
"items": [{ "text": "English" }, { "text": "French" }, { "text": "Spanish" }]
6+
},
7+
8+
];
9+
10+
export default languageItems;
11+

‎examples/ecommerce-jewellery-store/src/index.css‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎examples/ecommerce-jewellery-store/src/main.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { StrictMode } from 'react'
22
import { createRoot } from 'react-dom/client'
33
import App from './App.tsx'
4-
import './index.css'
4+
import './styles.css'
55

66
createRoot(document.getElementById('root')!).render(
77
<StrictMode>

0 commit comments

Comments
 (0)