tools/teletypegames
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sw status

Browse Source
This commit is contained in:
mr.zero
2026-03-15 00:13:41 +01:00
parent 1d3b7afcbe
commit 3f451759ec
2 changed files with 63 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/pages/catalog.astro
+62 -10
View File
@@ -16,16 +16,29 @@ const softwares = json.softwares;
</div>
</header>
<main class="main-container py-12 px-4 grid grid-cols-1 gap-8 mt-0">
{softwares.map(({ software, releases, latestRelease }) => (
<div class="software-card">
<div class="software-card-content">
<h2 class="software-title">{software.title}</h2>
<p class="software-desc">{software.desc}</p>
<div class="software-meta">
<div>Author: {software.author}</div>
<div>Platform: {software.platform}</div>
</div>
<main class="main-container py-12 px-4 mt-0">
<div class="flex flex-wrap gap-4 mb-8 justify-center filter-buttons pb-4">
<button class="filter-btn active" data-filter="all">All</button>
<button class="filter-btn" data-filter="released">Released</button>
<button class="filter-btn" data-filter="development">Development</button>
<button class="filter-btn" data-filter="archived">Archived</button>
</div>
<div class="grid grid-cols-1 gap-8 software-list">
{softwares.map(({ software, releases, latestRelease }) => (
<div class="software-card" data-status={software.status}>
<div class="software-card-content">
<div class="flex items-center gap-3 mb-2">
<h2 class="software-title mb-0">{software.title}</h2>
<span class={`status-badge status-${software.status}`}>
{software.status}
</span>
</div>
<p class="software-desc">{software.desc}</p>
<div class="software-meta">
<div>Author: {software.author}</div>
<div>Platform: {software.platform}</div>
</div>
{latestRelease && (
<div class="latest-release-actions">
@@ -141,10 +154,49 @@ const softwares = json.softwares;
</div>
</div>
))}
</div>
</main>
</Layout>
<script>
const filterButtons = document.querySelectorAll('.filter-btn');
const softwareCards = document.querySelectorAll('.software-card');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
// Update active button
filterButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
const filter = button.getAttribute('data-filter');
softwareCards.forEach(card => {
const status = (card as HTMLElement).getAttribute('data-status');
if (filter === 'all' || status === filter) {
(card as HTMLElement).style.display = 'block';
} else {
(card as HTMLElement).style.display = 'none';
}
});
});
});
</script>
<style>
.filter-btn {
@apply px-4 py-2 rounded-full border-2 border-purple-600 text-purple-600 font-bold transition-all hover:bg-purple-600 hover:text-white;
}
.filter-btn.active {
@apply bg-purple-600 text-white;
}
.status-badge {
@apply px-2 py-0.5 rounded text-xs font-bold uppercase;
}
.status-released { @apply bg-green-100 text-green-800 border border-green-200; }
.status-development { @apply bg-yellow-100 text-yellow-800 border border-yellow-200; }
.status-archived { @apply bg-gray-100 text-gray-800 border border-gray-200; }
.software-card {
@apply bg-white shadow-lg relative rounded-xl overflow-hidden hover:shadow-2xl transition-shadow duration-300;
}