refactor: Improve responsiveness of Features component layout

This commit is contained in:
Pratyay360
2024-08-12 21:33:45 +05:30
parent b4034ac07a
commit ff19d50cda
10 changed files with 612 additions and 298 deletions

View File

@@ -1,39 +1,43 @@
'use client'
"use client";
import Footer from '@/components/footer';
import { Navigation } from '@/components/navigation';
import ReleaseNote from '@/components/release-note';
import { Button } from '@/components/ui/button';
import { releaseNotes } from '@/lib/release-notes';
import Link from 'next/link';
import { redirect, useParams } from 'next/navigation'
import Footer from "@/components/footer";
import { Navigation } from "@/components/navigation";
import ReleaseNote from "@/components/release-note";
import { Button } from "@/components/ui/button";
import { releaseNotes } from "@/lib/release-notes";
import Link from "next/link";
import { redirect, useParams } from "next/navigation";
export default function ReleaseNotePage() {
const params = useParams<{ version: string }>()
const params = useParams<{ version: string }>();
const { version } = params;
if (version === 'latest') {
if (version === "latest") {
return redirect(`/release-notes/${releaseNotes[0].version}`);
}
const releaseNote = releaseNotes.find((note) => note.version === version);
if (!releaseNote) {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div className="h-screen flex flex-col items-center justify-center">
<main className="flex min-h-screen flex-col items-center justify-center">
<div className="h-screen flex flex-wrap items-center justify-center">
<h1 className="text-4xl font-bold mt-12">Release note not found</h1>
<Link href="/release-notes"><Button className="mt-4">Back to release notes</Button></Link>
<Link href="/release-notes">
<Button className="mt-4 items-center justify-center">
Back to release notes
</Button>
</Link>
</div>
<Footer />
<Footer />
<Navigation /> {/* At the bottom of the page */}
</main>
);
}
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<main className="flex min-h-screen flex-col items-center justify-center">
<ReleaseNote data={releaseNote} />
<Footer />
<Footer />
<Navigation /> {/* At the bottom of the page */}
</main>
)
);
}

View File

@@ -7,7 +7,7 @@ export default function ReleaseNotes() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div className="min-h-screen py-42 flex justify-center flex-col">
<h1 className="text-4xl text-center font-bold mt-12">Release Notes</h1>
<h1 className="text-4xl text-center font-bold mt-24">Release Notes</h1>
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
{releaseNotes.map((releaseNote) => (
<Link href={`/release-notes/${releaseNote.version}`} className="bg-background relative max-w-64 overflow-hidden rounded-lg border p-5 hover:border-blue-500 transition-all duration-300 hover:-translate-y-1 hover:-translate-x-1" key={releaseNote.version}>