Skip to content

Commit b1578ac

Browse files
iM-GeeKyiM-GeeKy
committed
feat: add skeleton for showcase page
1 parent cf820b4 commit b1578ac

File tree

8 files changed

+249
-0
lines changed

8 files changed

+249
-0
lines changed

‎docusaurus/docs/showcase.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
title: Showcase
3+
---
4+
5+
import Showcase from '../src/components/Showcase.tsx';
6+
7+
# Who's using Paper Dates?
8+
9+
Check out these apps built using Paper Dates. Send us a [pull request](https://github.com/web-ridge/react-native-paper-dates/pulls) to add your app to this list.
10+
11+
<Showcase />

‎docusaurus/docusaurus.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,12 @@ const config = {
5959
position: 'left',
6060
label: 'Docs',
6161
},
62+
{
63+
type: 'doc',
64+
docId: 'showcase',
65+
position: 'left',
66+
label: 'Showcase',
67+
},
6268
{
6369
href: 'https://www.reactnativepaperdates.com',
6470
label: 'Example',

‎docusaurus/src/components/AppStoreIcon.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
3+
type Props = {
4+
color: string;
5+
};
6+
7+
const AppStoreIcon = ({ color }: Props) => (
8+
<svg width="24px" height="23px" viewBox="-4 0 20 23">
9+
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
10+
<g
11+
id="Store-Icons"
12+
transform="translate(-40.000000, -108.000000)"
13+
fill={color}
14+
>
15+
<g
16+
id="circ_iPhone_download"
17+
transform="translate(25.000000, 99.000000)"
18+
>
19+
<path
20+
d="M16.7193074,9 C15.7697602,9 15,9.83217005 15,10.8627041 L15,30.1372959 C15,31.166039 15.7689087,32 16.7193074,32 L25.2806926,32 C26.2302398,32 27,31.16783 27,30.1372959 L27,10.8627041 C27,9.83396103 26.2310913,9 25.2806926,9 L16.7193074,9 L16.7193074,9 Z M16.125,12.0163934 L16.125,28.9836066 L25.875,28.9836066 L25.875,12.0163934 L16.125,12.0163934 L16.125,12.0163934 Z M21,31.2459016 C21.4142136,31.2459016 21.75,30.9082803 21.75,30.4918033 C21.75,30.0753263 21.4142136,29.7377049 21,29.7377049 C20.5857864,29.7377049 20.25,30.0753263 20.25,30.4918033 C20.25,30.9082803 20.5857864,31.2459016 21,31.2459016 L21,31.2459016 Z M19.5,10.5081967 C19.5,10.7164352 19.6289062,10.8852459 19.7986193,10.8852459 L22.2013807,10.8852459 C22.3663036,10.8852459 22.5,10.7103452 22.5,10.5081967 C22.5,10.2999582 22.3710938,10.1311475 22.2013807,10.1311475 L19.7986193,10.1311475 C19.6336964,10.1311475 19.5,10.3060483 19.5,10.5081967 Z"
21+
id="IPhone-Vector-2"
22+
/>
23+
</g>
24+
</g>
25+
</g>
26+
</svg>
27+
);
28+
29+
export default AppStoreIcon;

‎docusaurus/src/components/GithubIcon.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
3+
type Props = {
4+
color: string;
5+
};
6+
7+
const GithubIcon = ({ color }: Props) => (
8+
<svg width="24px" height="24px" viewBox="0 0 24 24">
9+
<path
10+
fill={color}
11+
d="M12 .5C5.37.5 0 5.78 0 12.292c0 5.211 3.438 9.63 8.205 11.188.6.111.82-.254.82-.567 0-.28-.01-1.022-.015-2.005-3.338.711-4.042-1.582-4.042-1.582-.546-1.361-1.335-1.725-1.335-1.725-1.087-.731.084-.716.084-.716 1.205.082 1.838 1.215 1.838 1.215 1.07 1.803 2.809 1.282 3.495.981.108-.763.417-1.282.76-1.577-2.665-.295-5.466-1.309-5.466-5.827 0-1.287.465-2.339 1.235-3.164-.135-.298-.54-1.497.105-3.121 0 0 1.005-.316 3.3 1.209.96-.262 1.98-.392 3-.398 1.02.006 2.04.136 3 .398 2.28-1.525 3.285-1.209 3.285-1.209.645 1.624.24 2.823.12 3.121.765.825 1.23 1.877 1.23 3.164 0 4.53-2.805 5.527-5.475 5.817.42.354.81 1.077.81 2.182 0 1.578-.015 2.846-.015 3.229 0 .309.21.678.825.56C20.565 21.917 24 17.495 24 12.292 24 5.78 18.627.5 12 .5z"
12+
/>
13+
</svg>
14+
);
15+
16+
export default GithubIcon;

‎docusaurus/src/components/GooglePlayIcon.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
3+
type Props = {
4+
color: string;
5+
};
6+
7+
const GooglePlayIcon = ({ color }: Props) => (
8+
<svg width="20px" height="23px" viewBox="0 0 20 23">
9+
<g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
10+
<g
11+
id="Store-Icons"
12+
transform="translate(-99.000000, -109.000000)"
13+
fill={color}
14+
>
15+
<g
16+
id="circ_Google_download"
17+
transform="translate(85.000000, 99.000000)"
18+
>
19+
<path d="M14.6531183,32.3718354 C14.2575042,32.2646912 14,31.869772 14,31.2586525 L14,11.0864944 C14,10.5205045 14.2180326,10.1387856 14.5636564,10 L14.5636564,10 L24.4228332,21.2416571 L14.6531183,32.3718354 L14.6531183,32.3718354 Z M16.0103048,31.9436451 L27.8776422,25.1809087 L24.9871835,21.8851421 L16.0103048,31.9436451 L16.0103048,31.9436451 Z M27.9593618,17.2126559 L16.2574085,10.5426155 L25.0042946,20.5792254 L27.9593618,17.2126559 L27.9593618,17.2126559 Z M28.7533298,17.6652127 L33.3375107,20.2781673 C34.2054705,20.7728989 34.213408,21.5704009 33.3375107,22.0695409 L28.6373545,24.7479781 L25.5716571,21.2302452 L28.7533298,17.6652127 L28.7533298,17.6652127 Z" />
20+
</g>
21+
</g>
22+
</g>
23+
</svg>
24+
);
25+
26+
export default GooglePlayIcon;

‎docusaurus/src/components/Showcase.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+
3+
import color from 'color';
4+
5+
import AppStoreIcon from './AppStoreIcon';
6+
import GithubIcon from './GithubIcon';
7+
import GooglePlayIcon from './GooglePlayIcon';
8+
9+
type Data = {
10+
color: string;
11+
name: string;
12+
image: string;
13+
android?: string;
14+
ios?: string;
15+
github?: string;
16+
};
17+
18+
const data: Data[] = [
19+
{
20+
color: '#6200EE',
21+
name: 'Paper Example App',
22+
image: '/react-native-paper-dates/showcase/paper.png',
23+
android:
24+
'https://play.google.com/store/apps/details?id=com.callstack.reactnativepaperexample',
25+
ios: 'https://apps.apple.com/app/react-native-paper/id1548934513',
26+
github: 'https://github.com/callstack/react-native-paper/tree/main/example',
27+
},
28+
];
29+
30+
const getOpacity = (item?: string) => (item ? 1 : 0.4);
31+
32+
export default function Showcase() {
33+
return (
34+
<div className="showcase-gallery">
35+
{data.map((item) => {
36+
const tintColor = color(item.color).isLight() ? '#000000' : '#FFFFFF';
37+
return (
38+
<div key={item.image}>
39+
<div className="showcase-image-container">
40+
<img className="showcase-image" src={item.image} alt="" />
41+
<div
42+
className="showcase-info"
43+
style={{ backgroundColor: item.color }}
44+
>
45+
<h3
46+
className="showcase-app-name"
47+
style={{
48+
color: tintColor,
49+
}}
50+
>
51+
{item.name}
52+
</h3>
53+
<div className="showcase-badge-container">
54+
<a
55+
href={item.android}
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
style={{ opacity: getOpacity(item.android) }}
59+
>
60+
<GooglePlayIcon color={tintColor} />
61+
</a>
62+
<div className="showcase-separation" />
63+
<a
64+
href={item.ios}
65+
target="_blank"
66+
rel="noopener noreferrer"
67+
style={{ opacity: getOpacity(item.ios) }}
68+
>
69+
<AppStoreIcon color={tintColor} />
70+
</a>
71+
<div className="showcase-separation" />
72+
<a
73+
href={item.github}
74+
target="_blank"
75+
rel="noopener noreferrer"
76+
style={{ opacity: getOpacity(item.github) }}
77+
>
78+
<GithubIcon color={tintColor} />
79+
</a>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
);
85+
})}
86+
</div>
87+
);
88+
}

‎docusaurus/src/css/custom.css‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,76 @@
2828
--ifm-color-primary-lightest: #4fddbf;
2929
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
3030
}
31+
32+
.showcase-gallery {
33+
display: flex;
34+
flex-direction: row;
35+
flex-wrap: wrap;
36+
min-width: 0;
37+
}
38+
39+
@media (max-width: 680px) {
40+
.showcase-gallery {
41+
justify-content: center;
42+
}
43+
}
44+
45+
.showcase-image-container {
46+
overflow: hidden;
47+
margin: 16px;
48+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
49+
}
50+
51+
@media (min-width: 420px) {
52+
.showcase-image-container {
53+
height: 528px;
54+
}
55+
56+
.showcase-image-container:hover .showcase-info,
57+
.showcase-image-container:focus .showcase-info {
58+
transform: translateY(-48px);
59+
}
60+
}
61+
62+
63+
.showcase-image {
64+
display: block;
65+
max-height: 480px;
66+
width: auto;
67+
}
68+
69+
@media (min-width: 420px) {
70+
.showcase-image {
71+
height: 480px;
72+
width: 270px;
73+
}
74+
}
75+
76+
.showcase-info {
77+
height: 96px;
78+
padding: 12px;
79+
transform: translateY(0);
80+
transition: 150ms;
81+
}
82+
83+
.showcase-app-name {
84+
font-size: 16px;
85+
margin-top: 0;
86+
margin-bottom: 12px;
87+
88+
width: 246px;
89+
overflow: hidden;
90+
white-space: nowrap;
91+
text-overflow: ellipsis;
92+
}
93+
94+
.showcase-badge-container {
95+
display: flex;
96+
flex-direction: row;
97+
margin-top: 16px;
98+
padding-left: 3px;
99+
}
100+
101+
.showcase-separation {
102+
margin: 0 10px;
103+
}

‎docusaurus/static/showcase/paper.png‎

1.69 MB
Loading

0 commit comments

Comments
 (0)