Leahnaya/hackdex-website
1
0
Fork 0
mirror of https://github.com/Hackdex-App/hackdex-website.git synced 2026-08-24 01:24:48 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add "Version Status Guide" info card to versions page

Browse Source
This commit is contained in:
Jared Schoeny
2025-12-21 01:26:34 -10:00
parent 2c8ff8f419
commit 001fffc88b
2 changed files with 84 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/app/hack/[slug]/versions/page.tsx
View File

@@ -2,8 +2,9 @@ import { notFound } from "next/navigation";
import { createClient } from "@/utils/supabase/server";
import { canEditAsCreator } from "@/utils/hack";
import VersionList from "@/components/Hack/VersionList";
import CollapsibleCard from "@/components/Primitives/CollapsibleCard";
import Link from "next/link";
import { FaChevronLeft, FaPlus } from "react-icons/fa6";
import { FaChevronLeft, FaPlus, FaStar } from "react-icons/fa6";
interface VersionsPageProps {
params: Promise<{ slug: string }>;
@@ -87,6 +88,41 @@ export default async function VersionsPage({ params }: VersionsPageProps) {
</div>
</div>
<CollapsibleCard title="Version Status Guide">
<div className="space-y-5 sm:space-y-2.5 text-sm text-foreground/80">
<div className="flex flex-col sm:grid sm:grid-cols-[100px_1fr] gap-2 sm:gap-1 items-start">
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/20 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400 shrink-0 w-fit">
<FaStar size={10} />
Current
</span>
<p className="text-foreground/70">
{canEdit ?
"The version that is currently active and visible to all users. This is the version users will download when pressing \"Patch Now\" on the hack page." :
"This is the version you will download when pressing \"Patch Now\" on the hack page."
}
</p>
</div>
{canEdit && <>
<div className="flex flex-col sm:grid sm:grid-cols-[100px_1fr] gap-2 sm:gap-1 items-start">
<span className="inline-flex items-center rounded-full bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400 shrink-0 w-fit">
Unpublished
</span>
<p className="text-foreground/70">
Versions that are only visible to you, and will not appear in the public version list or changelog.
</p>
</div>
<div className="flex flex-col sm:grid sm:grid-cols-[100px_1fr] gap-2 sm:gap-1 items-start">
<span className="inline-flex items-center rounded-full bg-gray-500/20 px-2 py-0.5 text-xs font-medium text-gray-600 dark:text-gray-400 shrink-0 w-fit">
Archived
</span>
<p className="text-foreground/70">
Same as unpublished, but archived versions are hidden from normal view on this page. Check "Show archived versions" to view and restore them.
</p>
</div>
</>}
</div>
</CollapsibleCard>
<VersionList
patches={allPatches}
currentPatchId={hack.current_patch}

47
src/components/Primitives/CollapsibleCard.tsx Normal file
View File

@@ -0,0 +1,47 @@
"use client";
import { useState, ReactNode } from "react";
import { FaChevronDown } from "react-icons/fa6";
interface CollapsibleCardProps {
title: string;
children: ReactNode;
defaultExpanded?: boolean;
}
export default function CollapsibleCard({ title, children, defaultExpanded = false }: CollapsibleCardProps) {
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
return (
<div className="p-4 sm:p-5 mb-6 bg-[var(--surface-1)] border border-[var(--border)]/50 rounded-lg">
<button
onClick={() => setIsExpanded(!isExpanded)}
className="w-full flex items-center justify-between gap-2 text-left hover:opacity-80 transition-opacity"
aria-expanded={isExpanded}
>
<h2 className="text-sm font-semibold text-foreground/90">{title}</h2>
<span
className={`text-foreground/60 shrink-0 transition-transform duration-300 ease-in-out ${
isExpanded ? "rotate-180" : ""
}`}
>
<FaChevronDown size={14} />
</span>
</button>
<div
className={`grid transition-all duration-300 ease-in-out ${
isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
}`}
>
<div className="overflow-hidden">
<div className={`mt-3 transition-opacity duration-300 ${
isExpanded ? "opacity-100" : "opacity-0"
}`}>
{children}
</div>
</div>
</div>
</div>
);
}