Skip to content

Commit 0c7b094

Browse files
TechQueryTechQuery
committed
[add] Product example page
1 parent c9e6456 commit 0c7b094

File tree

9 files changed

+309
-6
lines changed

9 files changed

+309
-6
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"@nuintun/qrcode": "^2.1.1",
7-
"boot-cell": "^1.0.0-rc.29",
7+
"boot-cell": "^1.0.0-rc.30",
88
"cell-router": "^2.0.0-rc.8",
99
"classnames": "^2.2.6",
1010
"github-web-widget": "^3.0.0-beta.5",
@@ -25,7 +25,7 @@
2525
"@types/lodash.groupby": "^4.6.6",
2626
"husky": "^4.2.5",
2727
"less": "^3.11.3",
28-
"lint-staged": "^10.2.10",
28+
"lint-staged": "^10.2.11",
2929
"mark-cell": "^0.4.1",
3030
"parcel": "^1.12.4",
3131
"postcss-modules": "^2.0.0",

‎source/page/Example/Home.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function Section({ title, description, list }: typeof data[0]) {
3434
<h2>{title}</h2>
3535
<p className="lead">{description}</p>
3636

37-
<div className="card-deck">
37+
<div className="card-deck m-auto">
3838
{list.map(({ href, image, title, description }) => {
3939
href =
4040
href ||
@@ -44,11 +44,15 @@ function Section({ title, description, list }: typeof data[0]) {
4444
<Card
4545
className="mb-4"
4646
style={{
47-
minWidth: '15.5rem',
48-
maxWidth: '15.5rem'
47+
minWidth: '15rem',
48+
maxWidth: '15rem'
4949
}}
5050
image={image}
51-
title={<a href={href}>{title}</a>}
51+
title={
52+
<a className="stretched-link" href={href}>
53+
{title}
54+
</a>
55+
}
5256
text={description}
5357
/>
5458
);

‎source/page/Example/Product/Case.less‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.preview {
2+
width: 80%;
3+
height: 300px;
4+
border-radius: 21px 21px 0 0;
5+
}

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { createCell } from 'web-cell';
2+
import classNames from 'classnames';
3+
import { BackgroundColors } from 'boot-cell/source/utility/constant';
4+
5+
import style from './Case.less';
6+
7+
export interface CaseProps {
8+
background?: BackgroundColors;
9+
color?: BackgroundColors;
10+
name: string;
11+
description: string;
12+
}
13+
14+
const dark_colors = ['dark', 'primary'];
15+
16+
export function Case({ background, color, name, description }: CaseProps) {
17+
return (
18+
<section
19+
className={classNames(
20+
'flex-md-grow-1',
21+
'mr-md-3',
22+
'pt-3',
23+
'px-3',
24+
'pt-md-5',
25+
'px-md-5',
26+
'text-center',
27+
'position-relative',
28+
`bg-${background}`,
29+
dark_colors.includes(background) && 'text-white'
30+
)}
31+
>
32+
<div className="my-3 py-3">
33+
<h2 className="display-5">{name}</h2>
34+
<p className="lead">{description}</p>
35+
</div>
36+
<div
37+
className={classNames(
38+
`bg-${color}`,
39+
'shadow-sm',
40+
'mx-auto',
41+
style.preview
42+
)}
43+
/>
44+
</section>
45+
);
46+
}

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { createCell } from 'web-cell';
2+
import { HTMLHyperLinkProps } from 'web-utility/source/DOM-type';
3+
import { isXDomain } from 'web-utility/source/URL';
4+
5+
export interface FooterListProps {
6+
title: string;
7+
menu: HTMLHyperLinkProps;
8+
}
9+
10+
export function FooterList({ title, menu }: FooterListProps) {
11+
return (
12+
<div className="col-4 col-md">
13+
<h5>{title}</h5>
14+
<ul className="list-unstyled text-small">
15+
{menu.map(({ href, title }) => (
16+
<li>
17+
<a
18+
className="text-muted"
19+
target={isXDomain(href) ? '_blank' : ''}
20+
href={href}
21+
>
22+
{title}
23+
</a>
24+
</li>
25+
))}
26+
</ul>
27+
</div>
28+
);
29+
}

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

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { NavProps } from 'boot-cell/source/Navigator';
2+
import { CaseProps } from './Case';
3+
import { FooterListProps } from './FooterList';
4+
5+
export const headers: NavProps['list'] = [
6+
{ title: 'Tour' },
7+
{ title: 'Product' },
8+
{ title: 'Features' },
9+
{ title: 'Enterprise' },
10+
{ title: 'Support' },
11+
{ title: 'Pricing' },
12+
{ title: 'Cart' }
13+
];
14+
15+
export const products: Pick<CaseProps, 'background' | 'color'>[][] = [
16+
[
17+
{ background: 'dark', color: 'light' },
18+
{ background: 'light', color: 'dark' }
19+
],
20+
[
21+
{ background: 'light', color: 'dark' },
22+
{ background: 'primary', color: 'light' }
23+
],
24+
[
25+
{ background: 'light', color: 'white' },
26+
{ background: 'light', color: 'white' }
27+
],
28+
[
29+
{ background: 'light', color: 'white' },
30+
{ background: 'light', color: 'white' }
31+
]
32+
];
33+
34+
export const footers: FooterListProps[] = [
35+
{
36+
title: 'Features',
37+
menu: [
38+
{
39+
title: 'Cool stuff'
40+
},
41+
{
42+
title: 'Random feature'
43+
},
44+
{
45+
title: 'Team feature'
46+
},
47+
{
48+
title: 'Stuff for developers'
49+
},
50+
{
51+
title: 'Another one'
52+
},
53+
{
54+
title: 'Last time'
55+
}
56+
]
57+
},
58+
{
59+
title: 'Resources',
60+
menu: [
61+
{
62+
title: 'Resource'
63+
},
64+
{
65+
title: 'Resource name'
66+
},
67+
{
68+
title: 'Another resource'
69+
},
70+
{
71+
title: 'Final resource'
72+
}
73+
]
74+
},
75+
{
76+
title: 'Resources',
77+
menu: [
78+
{
79+
title: 'Business'
80+
},
81+
{
82+
title: 'Education'
83+
},
84+
{
85+
title: 'Government'
86+
},
87+
{
88+
title: 'Gaming'
89+
}
90+
]
91+
},
92+
{
93+
title: 'About',
94+
menu: [
95+
{
96+
title: 'Team'
97+
},
98+
{
99+
title: 'Locations'
100+
},
101+
{
102+
title: 'Privacy'
103+
},
104+
{
105+
title: 'Terms'
106+
}
107+
]
108+
}
109+
];

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.product-device {
2+
position: absolute;
3+
right: 10%;
4+
bottom: -30%;
5+
width: 300px;
6+
height: 540px;
7+
background-color: #333;
8+
border-radius: 21px;
9+
-webkit-transform: rotate(30deg);
10+
transform: rotate(30deg);
11+
12+
&::before {
13+
position: absolute;
14+
top: 10%;
15+
right: 10px;
16+
bottom: 10%;
17+
left: 10px;
18+
content: '';
19+
background-color: rgba(255, 255, 255, 0.1);
20+
border-radius: 5px;
21+
}
22+
}
23+
.product-device-2 {
24+
top: -25%;
25+
right: auto;
26+
bottom: 0;
27+
left: 5%;
28+
background-color: #e5e5e5;
29+
}

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

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { createCell, Fragment } from 'web-cell';
2+
import { Nav } from 'boot-cell/source/Navigator/Nav';
3+
import { Button } from 'boot-cell/source/Form/Button';
4+
5+
import { Case } from './Case';
6+
import { FooterList } from './FooterList';
7+
8+
import style from './index.less';
9+
import { headers, products, footers } from './data';
10+
11+
export function ProductPage() {
12+
const logo = (
13+
<img
14+
style={{ width: '24px' }}
15+
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
16+
/>
17+
);
18+
return (
19+
<Fragment>
20+
<nav className="bg-dark sticky-top py-1">
21+
<Nav
22+
className="container text-light"
23+
align="between"
24+
list={[
25+
{
26+
title: logo
27+
},
28+
...headers
29+
]}
30+
/>
31+
</nav>
32+
<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">
36+
And an even wittier subheading to boot. Jumpstart your
37+
marketing efforts with this example based on Apple’s
38+
marketing pages.
39+
</p>
40+
<Button outline kind="secondary" href="#">
41+
Coming soon
42+
</Button>
43+
</div>
44+
<div
45+
className={`${style['product-device']} shadow-sm d-none d-lg-block`}
46+
/>
47+
<div
48+
className={`${style['product-device']} ${style['product-device-2']} shadow-sm d-none d-lg-block`}
49+
/>
50+
</header>
51+
<main>
52+
{products.map(row => (
53+
<div className="d-md-flex w-100 my-md-3 pl-md-3">
54+
{row.map(item => (
55+
<Case
56+
{...item}
57+
name="Another headline"
58+
description="And an even wittier subheading."
59+
/>
60+
))}
61+
</div>
62+
))}
63+
</main>
64+
<footer className="container py-5">
65+
<div className="row">
66+
<div class="col-12 col-md">
67+
{logo}
68+
<small class="d-block mb-3 text-muted">
69+
© 2019-{new Date().getFullYear()}
70+
</small>
71+
</div>
72+
{footers.map(FooterList)}
73+
</div>
74+
</footer>
75+
</Fragment>
76+
);
77+
}

‎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/product'],
8+
component: async () => (await import('./Product')).ProductPage
9+
},
610
{
711
paths: ['example/offcanvas'],
812
component: async () => (await import('./Offcanvas')).OffcanvasPage

0 commit comments

Comments
 (0)