Skip to content

feat: implement redesigned Gym Support Content and update PageHeader … #172

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DankaMarci wants to merge 1 commit into
base: main
Choose a base branch
from
+79 −105
Open

feat: implement redesigned Gym Support Content and update PageHeader … #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 63 additions & 95 deletions src/app/(app)/[lang]/sport/sportpalya-tamogatas/components/GymSupportContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {ReactNode} from 'react';
import { ReactNode } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { parseFormattedText } from '@/utils/parseFormattedText';
import { parseFormattedText } from '@/utils/parseFormattedText';

interface SportpalyaTamogatasContentData {
title: string;
Expand Down Expand Up @@ -34,109 +34,77 @@ interface SportpalyaTamogatasContentData {

export default function SportpalyaTamogatasContent({ content }: { content: SportpalyaTamogatasContentData }) {
return (
<div className="flex flex-col gap-4 md:gap-6 lg:px-4 px-2 py-8">
{/* Introduction */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<Paragraph>
{parseFormattedText(content.description)}
</Paragraph>
</div>
</CardContent>
</Card>
<div className="flex flex-col gap-4 rounded-b-2xl border-x border-b border-[#e9e2d6] bg-[#fffefc] p-4 md:p-8">
<SectionCard title={content.application.title}>
<Paragraph>{parseFormattedText(content.application.description)}</Paragraph>
</SectionCard>

{/* Application */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.application.title}
</h3>
<Paragraph>{parseFormattedText(content.application.description)}</Paragraph>
</div>
</CardContent>
</Card>
<SectionCard title={content.period.title}>
<TextList items={content.period.items} />
</SectionCard>

{/* Support Period and Location */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.period.title}
</h3>
<div className="space-y-2 text-gray-700">
<ul className="list-disc pl-5 space-y-2">
{content.period.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ul>
</div>
</div>
</CardContent>
</Card>
<SectionCard title={content.condition.title}>
<Paragraph>{parseFormattedText(content.condition.intro)}</Paragraph>
<TextList items={content.condition.items} ordered />
<NoticeBox>{parseFormattedText(content.condition.outro)}</NoticeBox>
</SectionCard>

{/* Conditions */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.condition.title}
</h3>
<p>{parseFormattedText(content.condition.intro)}</p>
<ol className="list-decimal pl-5 space-y-1">
{content.condition.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ol>
<div className="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-100 text-sm font-semibold">
{parseFormattedText(content.condition.outro)}
</div>
</div>
</CardContent>
</Card>
<SectionCard title={content.selection.title}>
<Paragraph>{parseFormattedText(content.selection.description)}</Paragraph>
<TextList items={content.selection.items} />
</SectionCard>

{/* Selection */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.selection.title}
</h3>
<Paragraph>{parseFormattedText(content.selection.description)}</Paragraph>
<ul className="list-disc pl-5 space-y-1">
{content.selection.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ul>
</div>
</CardContent>
</Card>
<SectionCard title={content.result.title}>
<TextList items={content.result.items} />
</SectionCard>

{/* Result */}
<Card className="group hover:shadow-md transition-all duration-300">
<CardContent className="p-3 md:p-6">
<div className="flex flex-col gap-2 md:gap-3">
<h3 className="font-bold text-xl leading-tight text-gray-900 group-hover:text-[#862633] transition-colors">
{content.result.title}
</h3>
<ul className="list-disc pl-5 space-y-1">
{content.result.items.map((item, i) => (
<li key={i}>{parseFormattedText(item)}</li>
))}
</ul>
</div>
</CardContent>
</Card>
<p className="text-center text-sm text-gray-400 italic mt-4">{parseFormattedText(content.footer)}</p>
<p className="px-2 text-center font-open-sans text-sm italic leading-[1.6] text-[#6e6660]">
{parseFormattedText(content.footer)}
</p>
</div>
);
};

function SectionCard({ title, children }: { title: string; children: ReactNode }) {
return (
<Card className="rounded-2xl border-[#e9e2d6] bg-transparent py-0 shadow-none">
<CardContent className="flex flex-col gap-4 p-4">
<h2 className="font-playfair text-base font-semibold leading-[1.4] text-black">
{title}
</h2>
<div className="h-px w-full bg-[#e9e2d6]" />
<div className="flex flex-col gap-4 font-open-sans text-sm leading-[1.6] text-black">
{children}
</div>
</CardContent>
</Card>
);
}

function Paragraph({ children }: { children: ReactNode }) {
return (
<div className="prose max-w-none text-gray-700 richtext">
<p>{children}</p>
<p className="richtext max-w-none">{children}</p>
);
}

function TextList({ items, ordered = false }: { items: string[]; ordered?: boolean }) {
const ListTag = ordered ? 'ol' : 'ul';

return (
<ListTag className={`${ordered ? 'list-decimal' : 'list-disc'} space-y-2 pl-5 marker:text-[#862633]`}>
{items.map((item, index) => (
<li key={`${item}-${index}`} className="pl-1">
{parseFormattedText(item)}
</li>
))}
</ListTag>
);
}

function NoticeBox({ children }: { children: ReactNode }) {
return (
<div className="richtext rounded-2xl border border-[#e9e2d6] bg-[#f9f4f0] px-4 py-2 font-open-sans text-sm leading-[1.6] text-[#6b0f1a]">
{children}
</div>
);
}
}
22 changes: 14 additions & 8 deletions src/app/(app)/[lang]/sport/sportpalya-tamogatas/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,28 @@ import { getDictionary } from '@/get-dictionary';
import type { Locale } from '@/i18n-config';
import GymSupportContent from './components/GymSupportContent';
import { PageHeader } from '@/components/common/PageHeader';
import { parseFormattedText } from '@/utils/parseFormattedText';

type SportpalyaTamogatasPageProps = {
params: Promise<{ lang: Locale }>;
};

export default async function SportpalyaTamogatasPage({
params,
}: SportpalyaTamogatasPageProps) {
const { lang } = await params;
const dictionary = await getDictionary(lang, 'sport');
const dictionary = await getDictionary(lang, 'sport');
const content = dictionary.sport.sportpalyaTamogatas;

return (
<div className="min-h-screen bg-gray-50">
<div className="container mx-auto px-2 md:px-4 py-8">
<PageHeader title={dictionary.sport.sportpalyaTamogatas.title} />
<GymSupportContent
content={dictionary.sport.sportpalyaTamogatas}
/>
<div className="min-h-screen bg-[#f9f4f0]">
<div className="container mx-auto max-w-5xl px-3 py-6 md:px-8 md:py-8">
<PageHeader
title={content.title}
subtitle={parseFormattedText(content.description)}
/>
<GymSupportContent content={content} />
</div>
</div>
);
}
}
4 changes: 2 additions & 2 deletions src/components/common/PageHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import { ArrowLeft } from "lucide-react";

export interface PageHeaderProps {
title: string;
subtitle?: string;
description?: string; // fallback for subtitle (backward compatibility)
subtitle?: React.ReactNode;
description?: React.ReactNode; // fallback for subtitle (backward compatibility)
tags?: string[];
onBack?: () => void;
backHref?: string;
Expand Down