Skip to content

Commit f538f33

Browse files
leecalcoteleecalcote
committed
fix: improve layout and styling in VendorSelection component
Signed-off-by: Lee Calcote <lee.calcote@layer5.io>
1 parent 8055c8b commit f538f33

File tree

3 files changed

+106
-90
lines changed

3 files changed

+106
-90
lines changed

‎site/.prettierrc‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"tabWidth": 2,
3+
"useTabs": false
4+
}

‎site/src/components/VendorSelection/index.js‎

Lines changed: 100 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@ import {
66
AddYourOwnCard,
77
} from "./vendorSelection.style";
88

9-
109
// Meshery Extension Point
1110
// This component serves as a point of extension for adding new playground providers.
1211
// Add your provider by including it in the vendors array below.
1312
const VendorSelection = () => {
1413
const vendors = [
15-
{
14+
{
1615
name: "ID10",
1716
description: "Meshery Playground hosted by ID10",
1817
url: "https://id10.playground.meshery.io",
@@ -38,7 +37,8 @@ const VendorSelection = () => {
3837
},
3938
{
4039
name: "GCP",
41-
description: "Host your own Meshery Playground on Google Cloud Platform (GKE)",
40+
description:
41+
"Host your own Meshery Playground on Google Cloud Platform (GKE)",
4242
url: "https://docs.meshery.io/installation/kubernetes/gke",
4343
logo: null, // We can add logos later
4444
available: false,
@@ -48,95 +48,108 @@ const VendorSelection = () => {
4848

4949
return (
5050
<VendorSelectionWrapper>
51-
<div>
52-
<h2 style={{ marginTop: "3rem" }}>Hosted Playgrounds</h2>
51+
<div>
52+
<h2 style={{ marginTop: "3rem" }}>Hosted Playgrounds</h2>
5353
<div className="vendors-grid">
54-
{vendors.map((vendor, index) => (
55-
<div>
56-
{vendor.hosting === "hosted" && (
57-
<VendorCard key={vendor.name} available={vendor.available}>
58-
<div className="vendor-info">
59-
<p>{vendor.description}</p>
60-
</div>
61-
<div className="vendor-action">
62-
{vendor.available ? (
63-
<a href={vendor.url} target="_blank" rel="noopener noreferrer">
64-
<Button
65-
className={vendor.hosting === "hosted" ? "vendor-btn hosted" : "vendor-btn self-hosted"}
66-
>
67-
<ArrowIcon />
68-
{vendor.hosting === "hosted" ? "Launch Playground" : "Install Playground"}
69-
</Button>
70-
</a>
71-
) : (
72-
<Button className="vendor-btn disabled" disabled>
73-
Coming Soon
74-
</Button>
75-
)}
76-
</div>
77-
</VendorCard>
78-
)}
79-
</div>
54+
{vendors.map((vendor, index) => (
55+
56+
vendor.hosting === "hosted" && (
57+
<div>
58+
<VendorCard key={vendor.name} available={vendor.available}>
59+
<div className="vendor-info">
60+
<p>{vendor.description}</p>
61+
</div>
62+
<div className="vendor-action">
63+
{vendor.available ? (
64+
<a
65+
href={vendor.url}
66+
target="_blank"
67+
rel="noopener noreferrer"
68+
>
69+
<Button
70+
className={
71+
vendor.hosting === "hosted"
72+
? "vendor-btn hosted"
73+
: "vendor-btn self-hosted"
74+
}
75+
>
76+
<ArrowIcon />
77+
{vendor.hosting === "hosted"
78+
? "Launch Playground"
79+
: "Install Playground"}
80+
</Button>
81+
</a>
82+
) : (
83+
<Button className="vendor-btn disabled" disabled>
84+
Coming Soon
85+
</Button>
86+
)}
87+
</div>
88+
</VendorCard>
89+
</div>
90+
)
91+
8092
))}
81-
<AddYourOwnCard>
82-
<div className="add-your-own-content">
83-
{/* <h3>Other</h3> */}
84-
<p><i>Have a provider to list?</i></p>
85-
<a
86-
href="https://docs.meshery.io/extensibility/providers"
87-
target="_blank"
88-
rel="noopener noreferrer"
89-
>
90-
<Button className="add-btn">+ Add your Playground here</Button>
91-
</a>
92-
</div>
93-
</AddYourOwnCard>
94-
</div>
93+
</div>
9594

96-
<h2 style={{ marginTop: "3rem" }}>Self-Hosted Playgrounds</h2>
97-
<div className="vendors-grid">
98-
{vendors.map((vendor, index) => (
99-
<div>
100-
{vendor.hosting === "self-hosted" && (
101-
<VendorCard key={vendor.name} available={vendor.available}>
102-
<div className="vendor-info">
103-
<p>{vendor.description}</p>
104-
</div>
105-
<div className="vendor-action">
106-
{vendor.available ? (
107-
<a href={vendor.url} target="_blank" rel="noopener noreferrer">
108-
<Button
109-
className={vendor.hosting === "hosted" ? "vendor-btn hosted" : "vendor-btn self-hosted"}
110-
>
111-
<ArrowIcon />
112-
{vendor.hosting === "hosted" ? "Launch Playground" : "Install Playground"}
113-
</Button>
114-
</a>
115-
) : (
116-
<Button className="vendor-btn disabled" disabled>
117-
Coming Soon
118-
</Button>
119-
)}
95+
<h2 style={{ marginTop: "3rem" }}>Self-Hosted Playgrounds</h2>
96+
<div className="vendors-grid">
97+
{vendors.map((vendor, index) => (
98+
99+
vendor.hosting === "self-hosted" && (
100+
<div>
101+
<VendorCard key={vendor.name} available={vendor.available}>
102+
<div className="vendor-info">
103+
<p>{vendor.description}</p>
104+
</div>
105+
<div className="vendor-action">
106+
{vendor.available ? (
107+
<a
108+
href={vendor.url}
109+
target="_blank"
110+
rel="noopener noreferrer"
111+
>
112+
<Button
113+
className={
114+
vendor.hosting === "hosted"
115+
? "vendor-btn hosted"
116+
: "vendor-btn self-hosted"
117+
}
118+
>
119+
<ArrowIcon />
120+
{vendor.hosting === "hosted"
121+
? "Launch Playground"
122+
: "Install Playground"}
123+
</Button>
124+
</a>
125+
) : (
126+
<Button className="vendor-btn disabled" disabled>
127+
Coming Soon
128+
</Button>
129+
)}
130+
</div>
131+
</VendorCard>
132+
</div>
133+
)
134+
135+
))}
136+
<AddYourOwnCard style={{marginTop: "3rem"}}>
137+
<div className="add-your-own-content">
138+
{/* <h3>Other</h3> */}
139+
<p>
140+
<i>Have a provider to list?</i>
141+
</p>
142+
<a
143+
href="https://docs.meshery.io/extensibility/providers"
144+
target="_blank"
145+
rel="noopener noreferrer"
146+
>
147+
<Button className="add-btn">+ Add your Playground here</Button>
148+
</a>
120149
</div>
121-
</VendorCard>
122-
)}
123-
</div>
124-
))}
125-
<AddYourOwnCard>
126-
<div className="add-your-own-content">
127-
{/* <h3>Other</h3> */}
128-
<p><i>Have a provider to list?</i></p>
129-
<a
130-
href="https://docs.meshery.io/extensibility/providers"
131-
target="_blank"
132-
rel="noopener noreferrer"
133-
>
134-
<Button className="add-btn">+ Add your Playground here</Button>
135-
</a>
136-
</div>
137-
</AddYourOwnCard>
150+
</AddYourOwnCard>
151+
</div>
138152
</div>
139-
</div>
140153
</VendorSelectionWrapper>
141154
);
142155
};

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,9 @@ export const VendorSelectionWrapper = styled.div`
2525
2626
flex-direction: row;
2727
flex-wrap: wrap;
28-
justify-content: space-between;
29-
// grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
28+
justify-content: center;
29+
align-items: center;
3030
gap: 1rem;
31-
margin-bottom: 1rem;
3231
}
3332
3433
.disclaimer {

0 commit comments

Comments
 (0)