Merge pull request #345 from web-ridge/showcase

Showcase
web-ridge · Oct 18, 2023 · 04bed5d · 04bed5d
2 parents cf820b4 + c3d146c
commit 04bed5d
Show file tree

Hide file tree

Showing 8 changed files with 245 additions and 0 deletions.
diff --git a/docusaurus/docs/showcase.md 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.
+
+<Showcase />
diff --git 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
@@ -0,0 +1,29 @@
+import React from 'react';
+
+type Props = {
+  color: string;
+};
+
+const AppStoreIcon = ({ color }: Props) => (
+  <svg width="24px" height="23px" viewBox="-4 0 20 23">
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="Store-Icons"
+        transform="translate(-40.000000, -108.000000)"
+        fill={color}
+      >
+        <g
+          id="circ_iPhone_download"
+          transform="translate(25.000000, 99.000000)"
+        >
+          <path
+            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"
+            id="IPhone-Vector-2"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default AppStoreIcon;
diff --git a/docusaurus/src/components/GithubIcon.tsx b/docusaurus/src/components/GithubIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Props = {
+  color: string;
+};
+
+const GithubIcon = ({ color }: Props) => (
+  <svg width="24px" height="24px" viewBox="0 0 24 24">
+    <path
+      fill={color}
+      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"
+    />
+  </svg>
+);
+
+export default GithubIcon;
diff --git a/docusaurus/src/components/GooglePlayIcon.tsx b/docusaurus/src/components/GooglePlayIcon.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+
+type Props = {
+  color: string;
+};
+
+const GooglePlayIcon = ({ color }: Props) => (
+  <svg width="20px" height="23px" viewBox="0 0 20 23">
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g
+        id="Store-Icons"
+        transform="translate(-99.000000, -109.000000)"
+        fill={color}
+      >
+        <g
+          id="circ_Google_download"
+          transform="translate(85.000000, 99.000000)"
+        >
+          <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" />
+        </g>
+      </g>
+    </g>
+  </svg>
+);
+
+export default GooglePlayIcon;
diff --git a/docusaurus/src/components/Showcase.tsx 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 (
+    <div className="showcase-gallery">
+      {data.map((item) => {
+        const tintColor = color(item.color).isLight() ? '#000000' : '#FFFFFF';
+        return (
+          <div key={item.image}>
+            <div className="showcase-image-container">
+              <img className="showcase-image" src={item.image} alt="" />
+              <div
+                className="showcase-info"
+                style={{ backgroundColor: item.color }}
+              >
+                <h3
+                  className="showcase-app-name"
+                  style={{
+                    color: tintColor,
+                  }}
+                >
+                  {item.name}
+                </h3>
+                <div className="showcase-badge-container">
+                  <a
+                    href={item.android}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ opacity: getOpacity(item.android) }}
+                  >
+                    <GooglePlayIcon color={tintColor} />
+                  </a>
+                  <div className="showcase-separation" />
+                  <a
+                    href={item.ios}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ opacity: getOpacity(item.ios) }}
+                  >
+                    <AppStoreIcon color={tintColor} />
+                  </a>
+                  <div className="showcase-separation" />
+                  <a
+                    href={item.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ opacity: getOpacity(item.github) }}
+                  >
+                    <GithubIcon color={tintColor} />
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git 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