Skip to content

Commit 04bed5d

Browse files
iM-GeeKyiM-GeeKy
authored
Merge pull request #345 from web-ridge/showcase
Showcase
2 parents cf820b4 + c3d146c commit 04bed5d

File tree

8 files changed

+245
-0
lines changed

8 files changed

+245
-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: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
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: '#2979FF',
21+
name: 'Bluebirding',
22+
image: '/react-native-paper-dates/showcase/bluebirding.png',
23+
android:
24+
'https://play.google.com/store/apps/details?id=com.bitzllc.bluebird',
25+
ios: 'https://apps.apple.com/us/app/bluebirding/id1553837668',
26+
},
27+
];
28+
29+
const getOpacity = (item?: string) => (item ? 1 : 0.4);
30+
31+
export default function Showcase() {
32+
return (
33+
<div className="showcase-gallery">
34+
{data.map((item) => {
35+
const tintColor = color(item.color).isLight() ? '#000000' : '#FFFFFF';
36+
return (
37+
<div key={item.image}>
38+
<div className="showcase-image-container">
39+
<img className="showcase-image" src={item.image} alt="" />
40+
<div
41+
className="showcase-info"
42+
style={{ backgroundColor: item.color }}
43+
>
44+
<h3
45+
className="showcase-app-name"
46+
style={{
47+
color: tintColor,
48+
}}
49+
>
50+
{item.name}
51+
</h3>
52+
<div className="showcase-badge-container">
53+
<a
54+
href={item.android}
55+
target="_blank"
56+
rel="noopener noreferrer"
57+
style={{ opacity: getOpacity(item.android) }}
58+
>
59+
<GooglePlayIcon color={tintColor} />
60+
</a>
61+
<div className="showcase-separation" />
62+
<a
63+
href={item.ios}
64+
target="_blank"
65+
rel="noopener noreferrer"
66+
style={{ opacity: getOpacity(item.ios) }}
67+
>
68+
<AppStoreIcon color={tintColor} />
69+
</a>
70+
<div className="showcase-separation" />
71+
<a
72+
href={item.github}
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
style={{ opacity: getOpacity(item.github) }}
76+
>
77+
<GithubIcon color={tintColor} />
78+
</a>
79+
</div>
80+
</div>
81+
</div>
82+
</div>
83+
);
84+
})}
85+
</div>
86+
);
87+
}

‎docusaurus/src/css/custom.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,73 @@
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: 608px;
54+
}
55+
56+
.showcase-image-container:hover .showcase-info,
57+
.showcase-image-container:focus .showcase-info {
58+
transform: translateY(-48px);
59+
}
60+
}
61+
62+
.showcase-image {
63+
display: block;
64+
max-height: 560px;
65+
width: auto;
66+
}
67+
68+
@media (min-width: 420px) {
69+
.showcase-image {
70+
height: 560px;
71+
width: 258px;
72+
}
73+
}
74+
75+
.showcase-info {
76+
height: 96px;
77+
padding: 12px;
78+
transform: translateY(0);
79+
transition: 150ms;
80+
}
81+
82+
.showcase-app-name {
83+
font-size: 16px;
84+
margin-top: 0;
85+
margin-bottom: 12px;
86+
overflow: hidden;
87+
white-space: nowrap;
88+
text-overflow: ellipsis;
89+
}
90+
91+
.showcase-badge-container {
92+
display: flex;
93+
flex-direction: row;
94+
margin-top: 16px;
95+
padding-left: 3px;
96+
}
97+
98+
.showcase-separation {
99+
margin: 0 10px;
100+
}

‎docusaurus/static/showcase/bluebirding.png‎

317 KB
Loading

0 commit comments

Comments
 (0)