- 
+
- {app.pro && Pro}
- {app.complexity[0]}
+ {/* Removed badges since they're not in the new data structure */}
-
{app.title}
+{app.name}
+
+ {app.services.slice(0, 10).map((serviceCode) => (
+
+ ![{services[serviceCode]]({`/images/aws/${serviceCode}.svg`})
+
+ ))}
+ {app.services.length > 10 && (
+
+ +{app.services.length - 10}
+ )}
+ {app.description}
- = ({
applications,
services,
- platforms,
- deployments,
- complexities,
+ integrations,
}) => {
const [filters, setFilters] = useState({
services: [],
- platforms: [],
- deployments: [],
- complexities: [],
- showProOnly: false,
+ useCases: [],
+ integrations: [],
});
const [searchTerm, setSearchTerm] = useState('');
- const [sortBy, setSortBy] = useState<'title' | 'complexity'>('title');
+ const [sortBy, setSortBy] = useState<'name'>('name');
// Get unique values for filters
const uniqueServices = useMemo(() => {
@@ -103,20 +89,15 @@ export const ApplicationsShowcase: React.FC = ({
return Array.from(allServices).sort((a, b) => (services[a] || a).localeCompare(services[b] || b));
}, [applications, services]);
- const uniquePlatforms = useMemo(() => {
- const allPlatforms = new Set(applications.flatMap(app => app.platform));
- return Array.from(allPlatforms).sort((a, b) => (platforms[a] || a).localeCompare(platforms[b] || b));
- }, [applications, platforms]);
-
- const uniqueDeployments = useMemo(() => {
- const allDeployments = new Set(applications.flatMap(app => app.deployment));
- return Array.from(allDeployments).sort((a, b) => (deployments[a] || a).localeCompare(deployments[b] || b));
- }, [applications, deployments]);
+ const uniqueUseCases = useMemo(() => {
+ const allUseCases = new Set(applications.flatMap(app => app.useCases));
+ return Array.from(allUseCases).sort();
+ }, [applications]);
- const uniqueComplexities = useMemo(() => {
- const allComplexities = new Set(applications.flatMap(app => app.complexity));
- return complexities.order.filter(complexity => allComplexities.has(complexity));
- }, [applications, complexities.order]);
+ const uniqueIntegrations = useMemo(() => {
+ const allIntegrations = new Set(applications.flatMap(app => app.integrations));
+ return Array.from(allIntegrations).sort((a, b) => (integrations[a] || a).localeCompare(integrations[b] || b));
+ }, [applications, integrations]);
// Filter and sort applications
const filteredApplications = useMemo(() => {
@@ -125,40 +106,35 @@ export const ApplicationsShowcase: React.FC = ({
if (searchTerm) {
const searchLower = searchTerm.toLowerCase();
const matchesSearch =
- app.title.toLowerCase().includes(searchLower) ||
+ app.name.toLowerCase().includes(searchLower) ||
app.description.toLowerCase().includes(searchLower) ||
- app.tags.some(tag => tag.toLowerCase().includes(searchLower)) ||
+ app.useCases.some(useCase => useCase.toLowerCase().includes(searchLower)) ||
app.services.some(service => (services[service] || service).toLowerCase().includes(searchLower)) ||
- app.platform.some(platform => (platforms[platform] || platform).toLowerCase().includes(searchLower));
+ app.integrations.some(integration => (integrations[integration] || integration).toLowerCase().includes(searchLower));
if (!matchesSearch) return false;
}
// Other filters
if (filters.services.length > 0 && !filters.services.some(service => app.services.includes(service))) return false;
- if (filters.platforms.length > 0 && !filters.platforms.some(platform => app.platform.includes(platform))) return false;
- if (filters.deployments.length > 0 && !filters.deployments.some(deployment => app.deployment.includes(deployment))) return false;
- if (filters.complexities.length > 0 && !filters.complexities.some(complexity => app.complexity.includes(complexity))) return false;
- if (filters.showProOnly && !app.pro) return false;
+ if (filters.useCases.length > 0 && !filters.useCases.some(useCase => app.useCases.includes(useCase))) return false;
+ if (filters.integrations.length > 0 && !filters.integrations.some(integration => app.integrations.includes(integration))) return false;
return true;
});
// Sort applications
return filtered.sort((a, b) => {
- if (sortBy === 'title') {
- return a.title.localeCompare(b.title);
- } else {
- const complexityOrder = { basic: 0, intermediate: 1, advanced: 2 };
- const aComplexity = complexityOrder[a.complexity[0] as keyof typeof complexityOrder] ?? 1;
- const bComplexity = complexityOrder[b.complexity[0] as keyof typeof complexityOrder] ?? 1;
- return aComplexity - bComplexity;
- }
+ return a.name.localeCompare(b.name);
});
- }, [applications, filters, searchTerm, sortBy, services, platforms]);
+ }, [applications, filters, searchTerm, sortBy, services, integrations]);
+
+ const isSingleResult = filteredApplications.length === 1;
+ const gridStyle = useMemo(() => ({
+ justifyContent: isSingleResult ? 'start' : 'stretch',
+ gridTemplateColumns: isSingleResult ? 'repeat(1, minmax(360px, 520px))' : undefined,
+ }), [isSingleResult]);
const toggleFilter = (filterType: keyof FilterState, item: string) => {
- if (filterType === 'showProOnly') return;
-
setFilters(prev => ({
...prev,
[filterType]: prev[filterType].includes(item)
@@ -170,19 +146,15 @@ export const ApplicationsShowcase: React.FC = ({
const clearAllFilters = () => {
setFilters({
services: [],
- platforms: [],
- deployments: [],
- complexities: [],
- showProOnly: false,
+ useCases: [],
+ integrations: [],
});
setSearchTerm('');
};
const hasActiveFilters = filters.services.length > 0 ||
- filters.platforms.length > 0 ||
- filters.deployments.length > 0 ||
- filters.complexities.length > 0 ||
- filters.showProOnly ||
+ filters.useCases.length > 0 ||
+ filters.integrations.length > 0 ||
searchTerm.length > 0;
return (
@@ -192,24 +164,25 @@ export const ApplicationsShowcase: React.FC = ({
.applications-showcase {
max-width: 1200px;
margin: 0 auto;
- padding: 0 1rem;
+ padding: 0 1.25rem;
}
/* Top Bar */
.top-bar {
- margin-bottom: 1.5rem;
- padding: 1rem;
- background: var(--sl-color-bg-sidebar);
- border: 1px solid var(--sl-color-gray-6);
+ margin: 0 0 0.75rem 0;
+ padding: 0 0 0.25rem 0;
+ background: transparent;
+ border: 0;
border-radius: 0.5rem;
}
.top-bar-row {
- display: flex;
- gap: 1rem;
- align-items: flex-start;
- flex-wrap: wrap;
- margin-bottom: 1rem;
+ display: grid;
+ grid-template-columns: repeat(3, minmax(180px, 260px)) auto;
+ gap: 0.75rem 0.75rem;
+ align-items: stretch; /* ensure all cells share identical row height */
+ grid-auto-rows: 40px; /* compact controls */
+ margin: 0;
}
.top-bar-row:last-child {
@@ -218,21 +191,30 @@ export const ApplicationsShowcase: React.FC = ({
.search-container {
position: relative;
- flex: 1;
- min-width: 300px;
+ min-width: 0;
+ width: 100%;
+ max-width: 300px; /* reduce visual length */
+ display: flex;
+ align-items: center;
+ height: 100%;
+ grid-column: 1 / -1; /* span full width on next row */
+ justify-self: start;
}
.search-input {
width: 100%;
- padding: 0.75rem;
- border: 1px solid var(--sl-color-gray-5);
- border-radius: 0.375rem;
+ padding: 0.625rem 2.25rem 0.625rem 0.875rem;
+ border: 1px solid #999CAD;
+ border-radius: 0.5rem;
background: var(--sl-color-bg);
color: var(--sl-color-white);
- font-size: 0.875rem;
- margin-top: 0;
+ font-size: 0.9rem;
+ height: 100%;
+ line-height: 1.2;
}
+
+
.search-input:focus {
outline: none;
border-color: var(--sl-color-accent);
@@ -260,14 +242,15 @@ export const ApplicationsShowcase: React.FC = ({
}
.filter-select {
- padding: 0.75rem;
- border: 1px solid var(--sl-color-gray-5);
- border-radius: 0.375rem;
+ padding: 0.625rem 0.875rem;
+ border: 1px solid #999CAD;
+ border-radius: 0.5rem;
background: var(--sl-color-bg);
color: var(--sl-color-white);
- font-size: 0.875rem;
- min-width: 140px;
- margin-top: 0;
+ font-size: 0.95rem;
+ min-width: 0;
+ width: 100%;
+ height: 100%;
}
.filter-select:focus {
@@ -288,7 +271,7 @@ export const ApplicationsShowcase: React.FC = ({
.sort-select {
padding: 0.75rem;
- border: 1px solid var(--sl-color-gray-5);
+ border: 1px solid #999CAD;
border-radius: 0.375rem;
background: var(--sl-color-bg);
color: var(--sl-color-white);
@@ -297,12 +280,13 @@ export const ApplicationsShowcase: React.FC = ({
}
.clear-filters {
- background: var(--sl-color-accent);
- color: white;
+ background: transparent;
+ color: var(--sl-color-accent);
border: none;
- padding: 0.75rem 1rem;
- border-radius: 0.375rem;
- font-size: 0.875rem;
+ padding: 0 0.25rem;
+ border-radius: 0.5rem;
+ font-size: 0.85rem;
+ height: 100%;
cursor: pointer;
white-space: nowrap;
}
@@ -311,23 +295,20 @@ export const ApplicationsShowcase: React.FC = ({
background: var(--sl-color-accent-high);
}
- .results-info {
- margin-bottom: 1rem;
- color: var(--sl-color-gray-2);
- font-size: 0.875rem;
- }
+ .results-info { display: none; }
/* Applications Grid */
.applications-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
- gap: 1.5rem;
+ gap: 1.25rem;
+ margin-top: 1.5rem; /* extra breathing room below filters */
}
/* Application Cards */
.app-card {
background: var(--sl-color-bg-sidebar);
- border: 1px solid var(--sl-color-gray-6);
+ border: 1px solid #999CAD;
border-radius: 0.75rem;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
@@ -342,20 +323,31 @@ export const ApplicationsShowcase: React.FC = ({
.app-card:hover {
transform: translateY(-2px);
+ border-color: var(--sl-color-accent);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.card-image {
position: relative;
width: 100%;
- height: 180px;
+ min-height: 160px;
+ max-height: 220px;
overflow: hidden;
+ background: #FFFFFF;
+ border-radius: 0.5rem 0.5rem 0 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.card-image img {
- width: 100%;
- height: 100%;
- object-fit: cover;
+ max-width: 100%;
+ max-height: 200px;
+ width: auto;
+ height: auto;
+ object-fit: contain;
+ image-rendering: high-quality;
+ image-rendering: -webkit-optimize-contrast;
}
.card-badges {
@@ -411,10 +403,11 @@ export const ApplicationsShowcase: React.FC = ({
.card-footer {
display: flex;
- justify-content: space-between;
+ justify-content: flex-start;
align-items: center;
gap: 1rem;
margin-top: auto;
+ width: 100%;
}
.service-icons {
@@ -423,6 +416,7 @@ export const ApplicationsShowcase: React.FC = ({
align-items: center;
flex-wrap: wrap;
flex: 1;
+ margin: 0 0 0.75rem 0;
}
.service-icon {
@@ -462,10 +456,11 @@ export const ApplicationsShowcase: React.FC = ({
color: var(--sl-color-white);
font-weight: 500;
font-size: 0.875rem;
- padding: 0.5rem 0.75rem;
+ padding: 0.5rem 0.75rem 0.5rem 0;
border-radius: 0.375rem;
transition: all 0.2s ease;
white-space: nowrap;
+ margin-left: 0;
}
.app-card:hover .card-link {
@@ -503,24 +498,29 @@ export const ApplicationsShowcase: React.FC = ({
}
/* Responsive */
+ @media (max-width: 1024px) {
+ .top-bar-row {
+ grid-template-columns: 1fr 1fr auto;
+ }
+ }
+
@media (max-width: 768px) {
.applications-showcase {
padding: 0 0.75rem;
}
.top-bar-row {
- flex-direction: column;
- align-items: stretch;
+ grid-template-columns: 1fr;
}
.search-container {
min-width: auto;
- flex: none;
}
.filter-select,
.sort-select {
min-width: auto;
+ width: 100%;
}
.applications-grid {
@@ -541,7 +541,7 @@ export const ApplicationsShowcase: React.FC = ({
- {app.services.slice(0, 10).map((serviceCode) => (
-
View Project →
@@ -82,20 +72,16 @@ const ApplicationCard: React.FC<{
export const ApplicationsShowcase: React.FC
-
-
- ))}
- {app.services.length > 10 && (
-
- +{app.services.length - 10}
- )}
-
-
+
-
= ({
-
-
-
-
{hasActiveFilters && (
-
-
-
-
+ {/* Removed sorting options since we only sort by name now */}
- {filteredApplications.length} application{filteredApplications.length !== 1 ? 's' : ''}
-
+ {/* results count removed per request */}
-
+
{filteredApplications.map((app, index) => (