gitadmin/gift-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor YearPage layout to include a responsive grid for PersonCard components, enhance GiftCard component structure by repositioning description and links, and implement toggle functionality for displaying gifts in PersonCard.

Browse Source
This commit is contained in:
Norbert Maciaszek
2025-11-11 17:52:40 +01:00
parent d27313e866
commit 38f034b0e2
3 changed files with 40 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/year/[year]/page.tsx
View File

@@ -16,9 +16,11 @@ export default async function YearPage({ params }: { params: Promise<{ year: str
<YearOverview year={Number(year)} />
<YearList />
<YearControls year={data.id} />
<section className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
{persons.map((person) => (
<PersonCard key={person.name} {...person} />
))}
</section>
</GlobalStore>
);
}

45
src/components/molecules/GiftCard/index.tsx
View File

@@ -46,29 +46,6 @@ export const GiftCard: FC<Gift & Props> = ({ hideDetails = false, editable = fal
<div className='flex-1'>
<div className='flex items-center justify-between gap-3 mb-2'>
<h3 className='text-lg font-semibold text-gray-800'>{title}</h3>
</div>
{link && (
<div className='flex flex-wrap items-center gap-2 mb-2'>
{link.split('\n').map((line, index) => (
<Link href={line} target='_blank' key={index} onClick={(e) => e.stopPropagation()}>
<Badge>Link {index + 1}</Badge>
</Link>
))}
</div>
)}
{description && <p className='text-base text-gray-600 mb-3'>{description}</p>}
<div className='flex flex-wrap items-center gap-4 text-sm text-gray-500'>
<span>Data dodania: {new Date(created).toLocaleDateString()}</span>
<span>•</span>
<span>Koszt: {formatCurrency(cost)}</span>
{!hideDetails && (
<>
<span>•</span>
<span>Dla: {expand?.person.name}</span>
</>
)}
<span>•</span>
<span>Status: {formatStatus(status)}</span>
{editable && (
<div className='ml-auto'>
<Button
@@ -82,6 +59,28 @@ export const GiftCard: FC<Gift & Props> = ({ hideDetails = false, editable = fal
</div>
)}
</div>
{description && <p className='text-base text-gray-600 mb-3'>{description}</p>}
<div
className={`flex flex-wrap text-sm text-gray-500 ${editable ? 'flex-col gap-2' : 'items-center gap-4'}`}>
<span>Data dodania: {new Date(created).toLocaleDateString()}</span>
<span>Koszt: {formatCurrency(cost)}</span>
{!hideDetails && (
<>
<span>•</span>
<span>Dla: {expand?.person.name}</span>
</>
)}
<span>Status: {formatStatus(status)}</span>
</div>
{link && (
<div className='flex flex-wrap items-center gap-2 mt-6'>
{link.split('\n').map((line, index) => (
<Link href={line} target='_blank' key={index} onClick={(e) => e.stopPropagation()}>
<Badge>Link {index + 1}</Badge>
</Link>
))}
</div>
)}
</div>
</div>
</div>

20
src/components/molecules/PersonCard/index.tsx
View File

@@ -1,10 +1,13 @@
'use client';
import { Heading } from '@/components/atoms/Heading';
import { formatCurrency } from '@/helpers/formatCurrency';
import { FC } from 'react';
import { FC, useState } from 'react';
import { GiftCard } from '../GiftCard';
import { GiftCardAdd, PersonCardEdit } from './client';
import { Button } from '@/components/atoms/Button';
export const PersonCard: FC<Person> = (person) => {
const [isOpen, setIsOpen] = useState(false);
const { name, notes, expand } = person;
const { gifts } = expand;
@@ -22,15 +25,18 @@ export const PersonCard: FC<Person> = (person) => {
<span>•</span>
<span>Koszt: {formatCurrency(gifts?.reduce((acc, gift) => acc + gift.cost, 0) || 0)}</span>
</div>
<div className='mt-8 mb-4 flex items-center gap-4'>
<div className='mt-8 mb-4 flex items-start gap-4'>
<Heading size='medium' spacing='none'>
Prezenty
Prezenty <br />
</Heading>
<GiftCardAdd person={person} />
{isOpen && <GiftCardAdd person={person} />}
<div className='ml-auto'>
<Button variant='secondary' onClick={() => setIsOpen(!isOpen)}>
{isOpen ? 'Mniej' : 'Więcej'}
</Button>
</div>
{gifts?.map((gift) => (
<GiftCard key={gift.id} {...gift} hideDetails editable personId={person.id} />
))}
</div>
{isOpen && gifts?.map((gift) => <GiftCard key={gift.id} {...gift} hideDetails editable personId={person.id} />)}
</div>
);
};