Add self-hosted playgrounds

Signed-off-by: Lee Calcote <lee.calcote@layer5.io>

Author: leecalcote

site/src/components/VendorSelection/index.js

@@ -6,36 +6,110 @@ import {
   AddYourOwnCard,
 } from "./vendorSelection.style";
 
+
+// Meshery Extension Point
+// This component serves as a point of extension for adding new playground providers.
+// Add your provider by including it in the vendors array below.
 const VendorSelection = () => {
   const vendors = [
+        {
+      name: "ID10",
+      description: "Meshery Playground hosted by ID10",
+      url: "https://id10.playground.meshery.io",
+      logo: null, // We can add logos later
+      available: false,
+      hosting: "hosted",
+    },
     {
       name: "Layer5",
-      description: "Meshery Playground provided by Layer5",
+      description: "Meshery Playground hosted by Layer5",
       url: "https://playground.meshery.io",
       logo: null, // We can add logos later
       available: true,
+      hosting: "hosted",
+    },
+    {
+      name: "AWS",
+      description: "Host your own Meshery Playground on AWS EKS",
+      url: "https://docs.meshery.io/installation/kubernetes/eks",
+      logo: null, // We can add logos later
+      available: true,
+      hosting: "self-hosted",
+    },
+    {
+      name: "GCP",
+      description: "Host your own Meshery Playground on Google Cloud Platform (GKE)",
+      url: "https://docs.meshery.io/installation/kubernetes/gke",
+      logo: null, // We can add logos later
+      available: false,
+      hosting: "self-hosted",
     },
   ];
 
   return (
     <VendorSelectionWrapper>
-      <h2>Choose Your Playground Provider</h2>
+    <div>
+      <h2 style={{ marginTop: "3rem" }}>Hosted Playgrounds</h2>
+        <div className="vendors-grid">
+        {vendors.map((vendor, index) => (
+          <div>
+          {vendor.hosting === "hosted" && (
+          <VendorCard key={vendor.name} available={vendor.available}>
+            <div className="vendor-info">
+              <p>{vendor.description}</p>
+            </div>
+            <div className="vendor-action">
+              {vendor.available ? (
+                <a href={vendor.url} target="_blank" rel="noopener noreferrer">
+                  <Button
+                    className={vendor.hosting === "hosted" ? "vendor-btn hosted" : "vendor-btn self-hosted"}
+                  >
+                    <ArrowIcon />
+                    {vendor.hosting === "hosted" ? "Launch Playground" : "Install Playground"}
+                  </Button>
+                </a>
+              ) : (
+                <Button className="vendor-btn disabled" disabled>
+                  Coming Soon
+                </Button>
+              )}
+            </div>
+          </VendorCard>       
+        )}
+        </div>
+          ))}
+          <AddYourOwnCard>
+          <div className="add-your-own-content">
+            {/* <h3>Other</h3> */}
+            <p><i>Have a provider to list?</i></p>
+            <a
+              href="https://docs.meshery.io/extensibility/providers"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button className="add-btn">+ Add your Playground here</Button>
+            </a>
+          </div>
+        </AddYourOwnCard>
+      </div>
+
+      <h2 style={{ marginTop: "3rem" }}>Self-Hosted Playgrounds</h2>
       <div className="vendors-grid">
         {vendors.map((vendor, index) => (
+          <div>
+          {vendor.hosting === "self-hosted" && (
           <VendorCard key={vendor.name} available={vendor.available}>
             <div className="vendor-info">
-              <h3>{vendor.name}</h3>
               <p>{vendor.description}</p>
             </div>
             <div className="vendor-action">
               {vendor.available ? (
                 <a href={vendor.url} target="_blank" rel="noopener noreferrer">
                   <Button
-                    className="vendor-btn"
-                    style={{ background: "rgb(235, 192, 23)" }}
+                    className={vendor.hosting === "hosted" ? "vendor-btn hosted" : "vendor-btn self-hosted"}
                   >
                     <ArrowIcon />
-                    Launch Playground
+                    {vendor.hosting === "hosted" ? "Launch Playground" : "Install Playground"}
                   </Button>
                 </a>
               ) : (
@@ -45,12 +119,13 @@ const VendorSelection = () => {
               )}
             </div>
           </VendorCard>
-        ))}
-
-        <AddYourOwnCard>
-          <div className="add-your-own-content">
-            <h3>Other</h3>
-            <p><i>Learn about Providers</i></p>
+        )}
+      </div>
+    ))}
+    <AddYourOwnCard>
+      <div className="add-your-own-content">
+        {/* <h3>Other</h3> */}
+            <p><i>Have a provider to list?</i></p>
             <a
               href="https://docs.meshery.io/extensibility/providers"
               target="_blank"
@@ -61,6 +136,7 @@ const VendorSelection = () => {
           </div>
         </AddYourOwnCard>
       </div>
+    </div>
     </VendorSelectionWrapper>
   );
 };

site/src/components/VendorSelection/vendorSelection.style.js

@@ -3,6 +3,7 @@ import styled from "styled-components";
 export const VendorSelectionWrapper = styled.div`
   padding: 1rem;
   text-align: center;
+  align-items: center;
 
   h2 {
     margin-bottom: 1rem;
@@ -18,8 +19,14 @@ export const VendorSelectionWrapper = styled.div`
   }
 
   .vendors-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    display: flex;
+    max-width: 800px;
+    margin: 0 auto;
+  
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    // grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
     gap: 1rem;
     margin-bottom: 1rem;
   }
@@ -47,6 +54,7 @@ export const VendorCard = styled.div`
   border-radius: 12px;
   padding: 0.5rem;
   display: flex;
+  width: 300px;
   flex-direction: column;
   transition: all 0.3s ease;
   opacity: ${(props) => (props.available ? 1 : 0.7)};
@@ -85,17 +93,28 @@ export const VendorCard = styled.div`
         color: rgba(128, 128, 128, 0.7) !important;
         cursor: not-allowed;
       }
-
-      &:not(.disabled):hover {
-        background: rgba(255, 208, 25, 0.9) !important;
-        transform: translateY(-1px);
+      &.hosted {
+        background: rgb(235, 192, 23);
+        &:not(.disabled):hover {
+          background: rgba(0, 179, 159 0.9) !important;
+          transform: translateY(-1px);
+        }
+      }
+      &.self-hosted {
+        background: rgb(0, 179, 159);
+        &:not(.disabled):hover {
+          background: rgba(255, 208, 25, 0.9) !important;
+          transform: translateY(-1px);
+        }
       }
     }
+    
 
     a {
       text-decoration: none;
       display: block;
     }
+
   }
 `;