diff --git a/docusaurus/docs/showcase.md b/docusaurus/docs/showcase.md new file mode 100644 index 00000000..60b6242e --- /dev/null +++ b/docusaurus/docs/showcase.md @@ -0,0 +1,11 @@ +--- +title: Showcase +--- + +import Showcase from '../src/components/Showcase.tsx'; + +# Who's using Paper Dates? + +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. + + \ No newline at end of file diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js index 7846c540..12376b5f 100644 --- a/docusaurus/docusaurus.config.js +++ b/docusaurus/docusaurus.config.js @@ -59,6 +59,12 @@ const config = { position: 'left', label: 'Docs', }, + { + type: 'doc', + docId: 'showcase', + position: 'left', + label: 'Showcase', + }, { href: 'https://www.reactnativepaperdates.com', label: 'Example', diff --git a/docusaurus/src/components/AppStoreIcon.tsx b/docusaurus/src/components/AppStoreIcon.tsx new file mode 100644 index 00000000..e59e2ffd --- /dev/null +++ b/docusaurus/src/components/AppStoreIcon.tsx @@ -0,0 +1,29 @@ +import React from 'react'; + +type Props = { + color: string; +}; + +const AppStoreIcon = ({ color }: Props) => ( + + + + + + + + + +); + +export default AppStoreIcon; \ No newline at end of file diff --git a/docusaurus/src/components/GithubIcon.tsx b/docusaurus/src/components/GithubIcon.tsx new file mode 100644 index 00000000..09d8359f --- /dev/null +++ b/docusaurus/src/components/GithubIcon.tsx @@ -0,0 +1,16 @@ +import React from 'react'; + +type Props = { + color: string; +}; + +const GithubIcon = ({ color }: Props) => ( + + + +); + +export default GithubIcon; \ No newline at end of file diff --git a/docusaurus/src/components/GooglePlayIcon.tsx b/docusaurus/src/components/GooglePlayIcon.tsx new file mode 100644 index 00000000..e6f775d8 --- /dev/null +++ b/docusaurus/src/components/GooglePlayIcon.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +type Props = { + color: string; +}; + +const GooglePlayIcon = ({ color }: Props) => ( + + + + + + + + + +); + +export default GooglePlayIcon; \ No newline at end of file diff --git a/docusaurus/src/components/Showcase.tsx b/docusaurus/src/components/Showcase.tsx new file mode 100644 index 00000000..e01f4c51 --- /dev/null +++ b/docusaurus/src/components/Showcase.tsx @@ -0,0 +1,87 @@ +import React from 'react'; + +import color from 'color'; + +import AppStoreIcon from './AppStoreIcon'; +import GithubIcon from './GithubIcon'; +import GooglePlayIcon from './GooglePlayIcon'; + +type Data = { + color: string; + name: string; + image: string; + android?: string; + ios?: string; + github?: string; +}; + +const data: Data[] = [ + { + color: '#2979FF', + name: 'Bluebirding', + image: '/react-native-paper-dates/showcase/bluebirding.png', + android: + 'https://play.google.com/store/apps/details?id=com.bitzllc.bluebird', + ios: 'https://apps.apple.com/us/app/bluebirding/id1553837668', + }, +]; + +const getOpacity = (item?: string) => (item ? 1 : 0.4); + +export default function Showcase() { + return ( +
+ {data.map((item) => { + const tintColor = color(item.color).isLight() ? '#000000' : '#FFFFFF'; + return ( +
+
+ +
+

+ {item.name} +

+
+ + + +
+ + + +
+ + + +
+
+
+
+ ); + })} +
+ ); +} \ No newline at end of file diff --git a/docusaurus/src/css/custom.css b/docusaurus/src/css/custom.css index 2bc6a4cf..9172154a 100644 --- a/docusaurus/src/css/custom.css +++ b/docusaurus/src/css/custom.css @@ -28,3 +28,73 @@ --ifm-color-primary-lightest: #4fddbf; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); } + +.showcase-gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + min-width: 0; +} + +@media (max-width: 680px) { + .showcase-gallery { + justify-content: center; + } +} + +.showcase-image-container { + overflow: hidden; + margin: 16px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); +} + +@media (min-width: 420px) { + .showcase-image-container { + height: 608px; + } + + .showcase-image-container:hover .showcase-info, + .showcase-image-container:focus .showcase-info { + transform: translateY(-48px); + } +} + +.showcase-image { + display: block; + max-height: 560px; + width: auto; +} + +@media (min-width: 420px) { + .showcase-image { + height: 560px; + width: 258px; + } +} + +.showcase-info { + height: 96px; + padding: 12px; + transform: translateY(0); + transition: 150ms; +} + +.showcase-app-name { + font-size: 16px; + margin-top: 0; + margin-bottom: 12px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.showcase-badge-container { + display: flex; + flex-direction: row; + margin-top: 16px; + padding-left: 3px; +} + +.showcase-separation { + margin: 0 10px; +} diff --git a/docusaurus/static/showcase/bluebirding.png b/docusaurus/static/showcase/bluebirding.png new file mode 100644 index 00000000..32784905 Binary files /dev/null and b/docusaurus/static/showcase/bluebirding.png differ