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.

src/app/year/[year]/page.tsx

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

src/components/molecules/GiftCard/index.tsx

@@ -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>

src/components/molecules/PersonCard/index.tsx

@@ -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>
       </div>
-      {gifts?.map((gift) => (
+      {isOpen && gifts?.map((gift) => <GiftCard key={gift.id} {...gift} hideDetails editable personId={person.id} />)}
-        <GiftCard key={gift.id} {...gift} hideDetails editable personId={person.id} />
-      ))}
     </div>
   );
 };