Skip to content

Commit 35191ff

Browse files
TechQueryTechQuery
committed
[add] Pricing example page
1 parent 0c7b094 commit 35191ff

File tree

7 files changed

+153
-18
lines changed

7 files changed

+153
-18
lines changed

source/page/Example/Product/FooterList.tsx renamed to source/component/FooterList.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
import { createCell } from 'web-cell';
22
import { HTMLHyperLinkProps } from 'web-utility/source/DOM-type';
33
import { isXDomain } from 'web-utility/source/URL';
4+
import classNames from 'classnames';
45

56
export interface FooterListProps {
7+
colSpan: number;
68
title: string;
79
menu: HTMLHyperLinkProps;
810
}
911

10-
export function FooterList({ title, menu }: FooterListProps) {
12+
export function FooterList({ colSpan, title, menu }: FooterListProps) {
1113
return (
12-
<div className="col-4 col-md">
14+
<div className={classNames(`col-${colSpan}`, 'col-md')}>
1315
<h5>{title}</h5>
1416
<ul className="list-unstyled text-small">
1517
{menu.map(({ href, title }) => (

‎source/page/Example/Offcanvas.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ export function OffcanvasPage() {
102102
<small>Since 2019</small>
103103
</div>
104104
</div>
105-
<div class="my-3 p-3 bg-white rounded shadow-sm">
106-
<h6 class="border-bottom border-gray pb-2 mb-0">
105+
<div className="my-3 p-3 bg-white rounded shadow-sm">
106+
<h6 className="border-bottom border-gray pb-2 mb-0">
107107
Recent updates
108108
</h6>
109109
{Array.from(new Array(3), () => (
@@ -121,7 +121,7 @@ export function OffcanvasPage() {
121121
'border-bottom'
122122
)}
123123
>
124-
<strong class="d-block">@TechQuery</strong>
124+
<strong className="d-block">@TechQuery</strong>
125125
Web Components engine based on JSX &amp;
126126
TypeScript
127127
</p>
@@ -131,8 +131,8 @@ export function OffcanvasPage() {
131131
<a href="#">All updates</a>
132132
</small>
133133
</div>
134-
<div class="my-3 p-3 bg-white rounded shadow-sm">
135-
<h6 class="border-bottom border-gray pb-2 mb-0">
134+
<div className="my-3 p-3 bg-white rounded shadow-sm">
135+
<h6 className="border-bottom border-gray pb-2 mb-0">
136136
Suggestions
137137
</h6>
138138
{Array.from(new Array(3), () => (
@@ -150,11 +150,11 @@ export function OffcanvasPage() {
150150
'border-bottom'
151151
)}
152152
>
153-
<div class="d-flex justify-content-between align-items-center w-100">
153+
<div className="d-flex justify-content-between align-items-center w-100">
154154
<strong>Full Name</strong>
155155
<a href="#">Follow</a>
156156
</div>
157-
<span class="d-block">@username</span>
157+
<span className="d-block">@username</span>
158158
</div>
159159
</MediaObject>
160160
))}

‎source/page/Example/Pricing/data.ts‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
export const prices = [
2+
{
3+
level: 'Free',
4+
amount: 0,
5+
details: [
6+
'10 users included',
7+
'2 GB of storage',
8+
'Email support',
9+
'Help center access'
10+
],
11+
action: 'Sign up for free'
12+
},
13+
{
14+
level: 'Pro',
15+
amount: 15,
16+
details: [
17+
'20 users included',
18+
'10 GB of storage',
19+
'Priority email support',
20+
'Help center access'
21+
],
22+
action: 'Get started'
23+
},
24+
{
25+
level: 'Enterprise',
26+
amount: 29,
27+
details: [
28+
'30 users included',
29+
'15 GB of storage',
30+
'Phone and email support',
31+
'Help center access'
32+
],
33+
action: 'Contact us'
34+
}
35+
];

‎source/page/Example/Pricing/index.tsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { createCell, Fragment } from 'web-cell';
2+
import { NavBar } from 'boot-cell/source/Navigator';
3+
import { Button } from 'boot-cell/source/Form';
4+
import { Card } from 'boot-cell/source/Content/Card';
5+
6+
import { FooterList } from '../../../component/FooterList';
7+
import { prices } from './data';
8+
import { footers } from '../Product/data';
9+
10+
export function PricingPage() {
11+
const foot_nav = [...footers];
12+
13+
foot_nav.splice(-2, 1);
14+
15+
return (
16+
<Fragment>
17+
<NavBar
18+
theme="light"
19+
background="light"
20+
brand="Company name"
21+
menu={[
22+
{ title: 'Features' },
23+
{ title: 'Enterprise' },
24+
{ title: 'Support' },
25+
{ title: 'Pricing' }
26+
]}
27+
>
28+
<Button outline>Sign up</Button>
29+
</NavBar>
30+
<div
31+
className="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center"
32+
style={{ maxWidth: '43.75rem' }}
33+
>
34+
<h1 className="display-4">Pricing</h1>
35+
<p className="lead">
36+
Quickly build an effective pricing table for your potential
37+
customers with this Bootstrap example. It’s built with
38+
default Bootstrap components and utilities with little
39+
customization.
40+
</p>
41+
</div>
42+
<div class="container">
43+
<div class="card-deck mb-3 text-center">
44+
{prices.map(({ level, amount, details, action }, index) => (
45+
<Card
46+
class="mb-4 shadow-sm"
47+
header={
48+
<h4 class="my-0 font-weight-normal">{level}</h4>
49+
}
50+
title={
51+
<span style={{ fontSize: '2.5rem' }}>
52+
${amount}{' '}
53+
<small class="text-muted">/ mo</small>
54+
</span>
55+
}
56+
>
57+
<ul class="list-unstyled mt-3 mb-4">
58+
{details.map(item => (
59+
<li>{item}</li>
60+
))}
61+
</ul>
62+
<Button outline={!index} block size="lg">
63+
{action}
64+
</Button>
65+
</Card>
66+
))}
67+
</div>
68+
<footer class="pt-4 my-md-5 pt-md-5 border-top">
69+
<div class="row">
70+
<div class="col-12 col-md">
71+
<img
72+
style={{ width: '24px' }}
73+
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
74+
/>
75+
<small class="d-block mb-3 text-muted">
76+
© 2017-{new Date().getFullYear()}
77+
</small>
78+
</div>
79+
{foot_nav.map(item => (
80+
<FooterList
81+
colSpan={12 / foot_nav.length}
82+
{...item}
83+
/>
84+
))}
85+
</div>
86+
</footer>
87+
</div>
88+
</Fragment>
89+
);
90+
}

‎source/page/Example/Product/data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { NavProps } from 'boot-cell/source/Navigator';
2+
import { FooterListProps } from '../../../component/FooterList';
23
import { CaseProps } from './Case';
3-
import { FooterListProps } from './FooterList';
44

55
export const headers: NavProps['list'] = [
66
{ title: 'Tour' },
@@ -31,7 +31,7 @@ export const products: Pick<CaseProps, 'background' | 'color'>[][] = [
3131
]
3232
];
3333

34-
export const footers: FooterListProps[] = [
34+
export const footers: Pick<FooterListProps, 'title' | 'menu'>[] = [
3535
{
3636
title: 'Features',
3737
menu: [

‎source/page/Example/Product/index.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { createCell, Fragment } from 'web-cell';
22
import { Nav } from 'boot-cell/source/Navigator/Nav';
33
import { Button } from 'boot-cell/source/Form/Button';
44

5+
import { FooterList } from '../../../component/FooterList';
56
import { Case } from './Case';
6-
import { FooterList } from './FooterList';
77

88
import style from './index.less';
99
import { headers, products, footers } from './data';
@@ -30,9 +30,11 @@ export function ProductPage() {
3030
/>
3131
</nav>
3232
<header className="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
33-
<div class="col-md-5 p-lg-5 mx-auto my-5">
34-
<h1 class="display-4 font-weight-normal">Punny headline</h1>
35-
<p class="lead font-weight-normal">
33+
<div className="col-md-5 p-lg-5 mx-auto my-5">
34+
<h1 className="display-4 font-weight-normal">
35+
Punny headline
36+
</h1>
37+
<p className="lead font-weight-normal">
3638
And an even wittier subheading to boot. Jumpstart your
3739
marketing efforts with this example based on Apple’s
3840
marketing pages.
@@ -63,13 +65,15 @@ export function ProductPage() {
6365
</main>
6466
<footer className="container py-5">
6567
<div className="row">
66-
<div class="col-12 col-md">
68+
<div className="col-12 col-md">
6769
{logo}
68-
<small class="d-block mb-3 text-muted">
70+
<small className="d-block mb-3 text-muted">
6971
© 2019-{new Date().getFullYear()}
7072
</small>
7173
</div>
72-
{footers.map(FooterList)}
74+
{footers.map(item => (
75+
<FooterList colSpan={12 / footers.length} {...item} />
76+
))}
7377
</div>
7478
</footer>
7579
</Fragment>

‎source/page/Example/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ export default [
33
paths: ['example'],
44
component: async () => (await import('./Home')).HomePage
55
},
6+
{
7+
paths: ['example/pricing'],
8+
component: async () => (await import('./Pricing')).PricingPage
9+
},
610
{
711
paths: ['example/product'],
812
component: async () => (await import('./Product')).ProductPage

0 commit comments

Comments
 (0)