#232 package bottle info

src/assets/scripts/package-bottles.jsx

@@ -0,0 +1,68 @@
+function PackageBottles() {
+  const [bottles, setBottles] = React.useState();
+
+  React.useEffect(() => {
+    const url = window.location.pathname.replace('/+', 'https://app.tea.xyz/api/bottles/');
+    fetch(url)
+      .then((res) => res.json())
+      .then((res) => setBottles(res));
+  }, []);
+
+  if (!bottles) return null;
+
+  const names = [...new Set(bottles.map((b) => b.name))];
+
+  return (
+    <div>
+      {names.map((name) => (
+        <Bottle key={name} name={name} />
+      ))}
+    </div>
+  );
+
+  function Bottle({ name }) {
+    const [expanded, toggleExpanded] = React.useState(false);
+    const versions = [
+      ...new Set(bottles.map((b) => b.version)),
+    ];
+    return (
+      <div className="expand" onClick={() => toggleExpanded(!expanded)}>
+        <div className="expand-text one-box-down">
+          <h4 className="display-6">
+            {versions.length} version{versions.length === 1 ? "" : "s"} bottled
+          </h4>
+        </div>
+        <table className="one-box-down">
+          <thead>
+            <tr>
+              <th>version</th>
+              <th>darwin-aarch64</th>
+              <th>darwin-x86-64</th>
+              <th>linux-aarch64</th>
+              <th>linux-x86-64</th>
+            </tr>
+          </thead>
+          <tbody>
+            {versions.map((v) => {
+              const available = new Set(
+                bottles
+                  .filter((b) => b.name === name && b.version == v)
+                  .map((b) => `${b.platform}-${b.arch}`)
+              );
+              return (
+                <tr key={v}>
+                  <th>{v}</th>
+                  <td>{available.has("darwin-aarch64") ? "✅" : "❌"}</td>
+                  <td>{available.has("darwin-x86-64") ? "✅" : "❌"}</td>
+                  <td>{available.has("linux-aarch64") ? "✅" : "❌"}</td>
+                  <td>{available.has("linux-x86-64") ? "✅" : "❌"}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+}
+ReactDOM.render(React.createElement(PackageBottles), document.getElementById("packageApp"));

src/layouts/page/package-detail.html

@@ -30,10 +30,18 @@
   </div>
 </section>
 
+
 <!-- Copy to clipboard field -->
 
 <section>
   <div class="container">
+    <div class="row">
+      <div class="col bottles-container">
+
+        {{- partial "package-bottle.html" .Title -}}
+
+      </div>
+    </div>
     <div class="row">
       <div class="col grid-gray">
         Copy the tea one-liner below into your terminal to install &#160;{{- .Title -}}. tea will interpret the documentation and take care of any dependencies.
@@ -71,6 +79,41 @@
     box-shadow: inset 0vw 0vw 0vw 0.335vw #1a1a1a !important;
   }
 
-</style>
+  table{
+    color: #fff;
+    width: 100%;
+  }
 
+  table, th, td {
+    border: 1px solid #949494;
+    font-family: "sono", sans-serif;
+    padding: 20px;
+  }
+
+  .expand{
+    cursor: pointer;
+  }
+
+  @media screen and (max-width: 576px) {
+
+    .bottles-container{
+      padding: 0px !important;
+    }
+
+    table, th, td {
+      border: 1px solid #949494;
+      font-family: "sono", sans-serif;
+      padding: 10px;
+      font-size: 12px;
+    }
+
+    .title-col{
+      padding: 4vw !important;
+
+    }
+
+  }
+
+
+</style>
 {{ end }}

src/layouts/partials/package-bottle.html

@@ -0,0 +1,7 @@
+<section>
+  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
+  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
+  <div id="packageApp"></div>
+  {{ $packageApp := resources.Get "scripts/package-bottles.jsx" | babel -}}
+  <script src="{{ $packageApp.RelPermalink }}"></script>
+</section>