Skip to content

Commit 6621dd4

Browse files
nehagupnehagup
committed
feat: improve banner of version of keploy, ui changes like bg change and responsiveness issues
Signed-off-by: Neha Gupta <gneha21@yahoo.in>
1 parent 422ccfc commit 6621dd4

5 files changed

Lines changed: 363 additions & 440 deletions

File tree

‎src/components/DocHeaderChips.js‎

Lines changed: 83 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,124 +1,115 @@
11
import React from 'react';
2-
import { FaLock, FaUnlock, FaCloud, FaServer, FaFlask, FaStar } from 'react-icons/fa';
32

43
/**
5-
* DocHeaderChips - Display tier/offering badges at the top of doc pages
6-
* Replaces the old gray "Tier/Offering" box with a modern badge row
4+
* DocHeaderChips - Minimal metadata strip for doc pages
5+
* Shows tier/availability as subtle inline badges, not a competing card
76
*
87
* Usage in MDX:
98
* import DocHeaderChips from '@site/src/components/DocHeaderChips';
10-
* <DocHeaderChips chips={['enterprise', 'cloud']} />
9+
* <DocHeaderChips tier="oss" version="4.0.0" />
10+
* <DocHeaderChips tier="enterprise" />
1111
*
12-
* Available chip types: 'enterprise', 'oss', 'cloud', 'selfhosted', 'dedicated', 'beta', 'new'
12+
* Props:
13+
* - tier: 'oss' | 'enterprise' | 'cloud' (optional)
14+
* - version: string (optional, e.g., "4.0.0")
15+
* - availability: array of strings (optional, e.g., ['cli', 'cloud'])
1316
*/
1417

15-
const chipConfig = {
16-
enterprise: {
17-
label: 'Enterprise',
18-
icon: FaLock,
19-
bg: 'linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%)',
20-
color: '#fff',
21-
borderColor: 'transparent',
22-
},
18+
const tierStyles = {
2319
oss: {
2420
label: 'Open Source',
25-
icon: FaUnlock,
26-
bg: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
27-
color: '#fff',
28-
borderColor: 'transparent',
21+
color: '#059669',
22+
bg: 'rgba(16, 185, 129, 0.08)',
23+
dotColor: '#10b981',
24+
},
25+
enterprise: {
26+
label: 'Enterprise',
27+
color: '#7c3aed',
28+
bg: 'rgba(139, 92, 246, 0.08)',
29+
dotColor: '#8b5cf6',
2930
},
3031
cloud: {
3132
label: 'Cloud',
32-
icon: FaCloud,
33-
bg: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
34-
color: '#fff',
35-
borderColor: 'transparent',
36-
},
37-
selfhosted: {
38-
label: 'Self-hosted',
39-
icon: FaServer,
40-
bg: 'rgba(16, 185, 129, 0.1)',
41-
color: '#059669',
42-
borderColor: '#10b981',
43-
},
44-
dedicated: {
45-
label: 'Dedicated',
46-
icon: FaServer,
47-
bg: 'rgba(59, 130, 246, 0.1)',
4833
color: '#2563eb',
49-
borderColor: '#3b82f6',
50-
},
51-
beta: {
52-
label: 'Beta',
53-
icon: FaFlask,
54-
bg: 'rgba(245, 158, 11, 0.1)',
55-
color: '#d97706',
56-
borderColor: '#f59e0b',
57-
},
58-
new: {
59-
label: 'New',
60-
icon: FaStar,
61-
bg: 'rgba(236, 72, 153, 0.1)',
62-
color: '#db2777',
63-
borderColor: '#ec4899',
34+
bg: 'rgba(59, 130, 246, 0.08)',
35+
dotColor: '#3b82f6',
6436
},
6537
};
6638

67-
export default function DocHeaderChips({ chips = [] }) {
68-
if (!chips || chips.length === 0) return null;
39+
export default function DocHeaderChips({ tier, version, availability = [] }) {
40+
const hasTier = tier && tierStyles[tier.toLowerCase()];
41+
const hasVersion = version && version.trim();
42+
const hasAvailability = availability && availability.length > 0;
6943

70-
return (
71-
<div className="doc-chips-container">
72-
{chips.map((chip) => {
73-
const config = chipConfig[chip.toLowerCase()];
74-
if (!config) return null;
75-
const Icon = config.icon;
76-
const isPrimary = ['enterprise', 'oss', 'cloud'].includes(chip.toLowerCase());
44+
// Don't render if nothing to show
45+
if (!hasTier && !hasVersion && !hasAvailability) return null;
46+
47+
const tierConfig = hasTier ? tierStyles[tier.toLowerCase()] : null;
7748

78-
return (
79-
<span
80-
key={chip}
81-
className={`doc-chip ${isPrimary ? 'doc-chip--primary' : 'doc-chip--secondary'}`}
82-
style={{
83-
background: config.bg,
84-
color: config.color,
85-
border: isPrimary ? 'none' : `1px solid ${config.borderColor}`,
86-
}}
87-
>
88-
<Icon size={12} />
89-
{config.label}
90-
</span>
91-
);
92-
})}
49+
return (
50+
<div className="doc-meta">
51+
{tierConfig && (
52+
<span className="doc-meta__tier" style={{ color: tierConfig.color }}>
53+
<span className="doc-meta__dot" style={{ background: tierConfig.dotColor }} />
54+
{tierConfig.label}
55+
</span>
56+
)}
57+
{hasVersion && (
58+
<span className="doc-meta__version">
59+
v{version.replace(/^v/i, '')}
60+
</span>
61+
)}
62+
{hasAvailability && (
63+
<span className="doc-meta__availability">
64+
{availability.join(' · ')}
65+
</span>
66+
)}
9367
<style>{`
94-
.doc-chips-container {
95-
display: flex;
96-
flex-wrap: wrap;
97-
gap: 0.5rem;
98-
margin-bottom: 1.5rem;
99-
margin-top: -0.5rem;
68+
.doc-meta {
69+
display: inline-flex;
70+
align-items: center;
71+
gap: 0.75rem;
72+
font-size: 0.75rem;
73+
color: #6b7280;
74+
margin-bottom: 0.5rem;
10075
}
101-
.doc-chip {
76+
.doc-meta__tier {
10277
display: inline-flex;
10378
align-items: center;
10479
gap: 0.375rem;
105-
padding: 0.375rem 0.75rem;
106-
font-size: 0.75rem;
10780
font-weight: 600;
108-
text-transform: uppercase;
109-
letter-spacing: 0.04em;
110-
border-radius: 6px;
111-
white-space: nowrap;
81+
letter-spacing: 0.01em;
82+
}
83+
.doc-meta__dot {
84+
width: 6px;
85+
height: 6px;
86+
border-radius: 50%;
87+
flex-shrink: 0;
88+
}
89+
.doc-meta__version {
90+
font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
91+
font-size: 0.6875rem;
92+
font-weight: 500;
93+
color: #9ca3af;
94+
background: rgba(0, 0, 0, 0.04);
95+
padding: 0.125rem 0.375rem;
96+
border-radius: 4px;
11297
}
113-
.doc-chip--primary {
114-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
98+
.doc-meta__availability {
99+
color: #9ca3af;
100+
font-weight: 500;
101+
}
102+
103+
/* Dark mode */
104+
html[data-theme="dark"] .doc-meta {
105+
color: #9ca3af;
115106
}
116-
.doc-chip--secondary {
117-
background: transparent !important;
107+
html[data-theme="dark"] .doc-meta__version {
108+
color: #6b7280;
109+
background: rgba(255, 255, 255, 0.06);
118110
}
119-
html[data-theme="dark"] .doc-chip--secondary {
120-
border-color: currentColor !important;
121-
opacity: 0.9;
111+
html[data-theme="dark"] .doc-meta__availability {
112+
color: #6b7280;
122113
}
123114
`}</style>
124115
</div>

‎src/components/ProductTier.js‎

Lines changed: 77 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,83 @@
11
import React from "react";
22

3-
const ProductTier = ({tiers, offerings}) => {
3+
/**
4+
* ProductTier - Compact inline chips for doc metadata
5+
* Replaces the old large "Tier/Offering" card with small inline chips
6+
*
7+
* Usage:
8+
* <ProductTier tiers="Open Source" />
9+
* <ProductTier tiers="Open Source, Enterprise" offerings="Self-Hosted" />
10+
*/
11+
12+
const chipStyles = {
13+
// Tier chips
14+
'open source': { label: 'OSS', color: '#059669', bg: 'rgba(16, 185, 129, 0.1)' },
15+
'oss': { label: 'OSS', color: '#059669', bg: 'rgba(16, 185, 129, 0.1)' },
16+
'enterprise': { label: 'Enterprise', color: '#7c3aed', bg: 'rgba(139, 92, 246, 0.1)' },
17+
'cloud': { label: 'Cloud', color: '#2563eb', bg: 'rgba(59, 130, 246, 0.1)' },
18+
19+
// Offering chips - simplified labels
20+
'self-hosted': { label: 'Self-Hosted', color: '#6b7280', bg: 'rgba(107, 114, 128, 0.08)' },
21+
'dedicated': { label: 'Dedicated', color: '#6b7280', bg: 'rgba(107, 114, 128, 0.08)' },
22+
'local': { label: 'Local', color: '#6b7280', bg: 'rgba(107, 114, 128, 0.08)' },
23+
};
24+
25+
const ProductTier = ({ tiers, offerings }) => {
26+
// Parse tiers and offerings into arrays
27+
const tierList = tiers
28+
? (Array.isArray(tiers) ? tiers : tiers.split(',').map(t => t.trim()))
29+
: [];
30+
31+
// Skip offerings that are confusing for OSS (like "Self-Hosted, Dedicated")
32+
// Only show offerings if explicitly needed
33+
const offeringList = offerings && !tierList.some(t => t.toLowerCase().includes('open source'))
34+
? (Array.isArray(offerings) ? offerings : offerings.split(',').map(o => o.trim()))
35+
: [];
36+
37+
const allChips = [...tierList, ...offeringList];
38+
39+
if (allChips.length === 0) return null;
40+
441
return (
5-
<div className="my-4 rounded-lg border border-gray-300 bg-[#fff8f5] p-4 text-gray-900 shadow-sm dark:border-gray-700 dark:bg-[#23272f] dark:text-gray-100">
6-
<div className="flex flex-col gap-2">
7-
{tiers && (
8-
<div className="flex flex-wrap items-center gap-2">
9-
<span className="font-bold">Tier:</span>
10-
<span>{Array.isArray(tiers) ? tiers.join(", ") : tiers}</span>
11-
</div>
12-
)}
13-
{offerings && (
14-
<div className="flex flex-wrap items-center gap-2">
15-
<span className="font-bold">Offering:</span>
16-
<span>
17-
{Array.isArray(offerings) ? offerings.join(", ") : offerings}
18-
</span>
19-
</div>
20-
)}
21-
</div>
42+
<div className="product-tier-chips">
43+
{allChips.map((chip, index) => {
44+
const key = chip.toLowerCase().trim();
45+
const style = chipStyles[key] || {
46+
label: chip.trim(),
47+
color: '#6b7280',
48+
bg: 'rgba(107, 114, 128, 0.08)'
49+
};
50+
return (
51+
<span
52+
key={index}
53+
className="product-tier-chip"
54+
style={{ color: style.color, background: style.bg }}
55+
>
56+
{style.label}
57+
</span>
58+
);
59+
})}
60+
<style>{`
61+
.product-tier-chips {
62+
display: inline-flex;
63+
flex-wrap: wrap;
64+
gap: 0.375rem;
65+
margin-bottom: 0;
66+
}
67+
.product-tier-chip {
68+
display: inline-flex;
69+
align-items: center;
70+
padding: 0.1875rem 0.5rem;
71+
font-size: 0.6875rem;
72+
font-weight: 600;
73+
border-radius: 4px;
74+
white-space: nowrap;
75+
letter-spacing: 0.01em;
76+
}
77+
html[data-theme="dark"] .product-tier-chip {
78+
opacity: 0.9;
79+
}
80+
`}</style>
2281
</div>
2382
);
2483
};

0 commit comments

Comments
 (0)