Skip to content

Commit 284b211

Browse files
filipKovachevfilipKovachev
committed
add header and footer
1 parent fd907eb commit 284b211

File tree

7 files changed

+198
-1
lines changed

7 files changed

+198
-1
lines changed

‎examples/kendo-react-e-commerce-astro-app/src/assets/vilora-logo.png‎

1 KB
Loading

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
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">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-4 k-mt-6 k-text-align-center">
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-4 k-mt-6 k-text-align-center">
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-4 k-mt-6 k-text-align-center" style={{marginRight: '150px'}}>
69+
<h4 className="k-color-primary k-font-bold">Legal & Privacy</h4>
70+
<a href="#" className="k-link">Terms of Use</a>
71+
<a href="#" className="k-link">Conditions of Sale</a>
72+
<a href="#" className="k-link">Return Policy</a>
73+
<a href="#" className="k-link">Privacy Policy</a>
74+
<a href="#" className="k-link">Cookie Policy</a>
75+
</div>
76+
</div>
77+
</section>
78+
);
79+
};
80+
81+
export default Footer;

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

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

‎examples/kendo-react-e-commerce-astro-app/src/data/items.ts‎

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

‎examples/kendo-react-e-commerce-astro-app/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/kendo-react-e-commerce-astro-app/src/pages/index.astro‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
11
---
22
import Layout from '@astro-layouts/Layout.astro';
3+
import Footer from '../components/Footer.tsx';
4+
import Header from '../components/Header.tsx';
5+
36
---
47

58
<Layout title="Welcome to Astro.">
69
<main>
7-
<h1> Main Page </h1>
10+
<Header client:load />
11+
<Footer client:load />
812
</main>
913
</Layout>
1014

‎examples/kendo-react-e-commerce-astro-app/tsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
{
22
"compilerOptions": {
33
"baseUrl": ".",
4+
"jsx": "react-jsx",
5+
"jsxImportSource": "react",
6+
"esModuleInterop": true,
7+
"allowSyntheticDefaultImports": true,
8+
"allowImportingTsExtensions": true,
9+
"noEmit": true,
10+
"resolveJsonModule": true,
11+
"skipLibCheck": true,
412
"paths": {
513
"@astro-layouts/*": ["src/layouts/*"],
614
"@astro-components/*": ["src/components/*"]

0 commit comments

Comments
 (0)