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

Improve layout of hack page headers

Browse Source
This commit is contained in:
Jared Schoeny
2025-10-30 12:26:30 -10:00
parent 6d232e6c6e
commit 7b0ca603c4
2 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/hack/[slug]/edit/page.tsx
View File

@@ -73,13 +73,13 @@ export default async function EditHackPage({ params }: EditPageProps) {
return (
<div className="mx-auto max-w-screen-lg px-6 py-10">
<div className="flex items-center justify-between">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between">
<h1 className="flex items-center text-3xl tracking-tight">
Edit
<FaChevronRight size={22} className="inline-block mx-2 text-foreground/50 align-middle" />
<span className="gradient-text font-bold">{hack.title}</span>
</h1>
<div className="flex items-center gap-2">
<div className="flex items-center gap-2 self-end lg:self-auto mt-8 lg:mt-0">
<Link href={`/hack/${slug}`} className="inline-flex items-center justify-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-3 py-2 text-sm font-medium hover:bg-black/5 dark:hover:bg-white/10">
<FaChevronLeft size={16} className="inline-block mr-1" />
Back to hack
@@ -89,7 +89,7 @@ export default async function EditHackPage({ params }: EditPageProps) {
</Link>
</div>
</div>
<div className="mt-8">
<div className="mt-4 lg:mt-8">
<HackForm mode="edit" slug={slug} initial={initial} />
</div>
</div>

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

@@ -122,17 +122,19 @@ export default async function HackDetail({ params }: HackDetailProps) {
</div>
<p className="mt-1 text-[15px] text-foreground/70">By {author}</p>
<p className="mt-2 text-sm text-foreground/75">{hack.summary}</p>
<div className="mt-2 flex flex-wrap gap-2">
{tags.map((t) => (
<span key={t} className="rounded-full bg-[var(--surface-2)] px-2.5 py-1 text-xs ring-1 ring-[var(--border)]">
</div>
<div className="w-full mt-2 flex flex-col justify-between gap-6 md:flex-row md:items-end">
<div className="flex flex-wrap gap-2">
{tags.map((t, i) => (
<span key={i} style={{ paddingRight: (i % 10) + 10 }} className="rounded-full bg-[var(--surface-2)] px-2.5 py-1 text-xs ring-1 ring-[var(--border)]">
{t}
</span>
))}
</div>
</div>
<div className="flex items-center gap-2 self-end md:self-auto">
<DownloadsBadge slug={hack.slug} initialCount={hack.downloads} />
<HackOptionsMenu slug={hack.slug} canEdit={canEdit} />
<div className="flex items-center justify-end gap-2 self-end md:self-auto lg:min-w-[260px]">
<DownloadsBadge slug={hack.slug} initialCount={hack.downloads} />
<HackOptionsMenu slug={hack.slug} canEdit={canEdit} />
</div>
</div>
</div>
</div>