Refactor Badge component to remove unused onClick prop, update Modal component to prevent close on inner click, and enhance GiftCard and GiftModal components to support multiple links with Badge display.

src/components/atoms/Badge/index.tsx

@@ -2,10 +2,9 @@ import { FC } from 'react';
 
 type Props = {
   children: React.ReactNode;
-  onClick: () => void;
   disabled?: boolean;
 };
 
-export const Badge: FC<Props> = ({ children, onClick, disabled }) => {
+export const Badge: FC<Props> = ({ children, disabled }) => {
   return <span className='px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 rounded-lg'>{children}</span>;
 };

src/components/atoms/Modal/index.tsx

@@ -24,7 +24,7 @@ export const Modal: FC<Props> = ({ isOpen, onClose, title, children, footer }) =
   if (!isOpen) return null;
 
   return (
-    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4' onClick={onClose}>
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4'>
       <div
         className='bg-white rounded-2xl shadow-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto'
         onClick={(e) => e.stopPropagation()}>

src/components/molecules/GiftCard/index.tsx

@@ -7,6 +7,8 @@ import { useGlobalStore } from '@/app/store/global';
 import { DB } from '@/lib/db';
 import { useRouter } from 'next/navigation';
 import { Button } from '@/components/atoms/Button';
+import { Badge } from '@/components/atoms/Badge';
+import Link from 'next/link';
 
 type Props = {
   hideDetails?: boolean;
@@ -19,7 +21,7 @@ export const GiftCard: FC<Gift & Props> = ({ hideDetails = false, editable = fal
   const year = useGlobalStore((s) => s.year);
   const router = useRouter();
 
-  const { title, description, cost, status, created, expand } = gift;
+  const { title, description, cost, status, created, expand, link } = gift;
 
   const bgByStatus = {
     planned: 'bg-gray-100',
@@ -42,9 +44,18 @@ export const GiftCard: FC<Gift & Props> = ({ hideDetails = false, editable = fal
         onClick={editable ? () => setIsOpen(true) : undefined}>
         <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4'>
           <div className='flex-1'>
-            <div className='flex items-center justify-between gap-3 mb-2 pb-2 border-b border-gray-200'>
+            <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>

src/components/molecules/GiftModal/index.tsx

@@ -156,12 +156,12 @@ export const GiftModal: FC<Props> = ({ isOpen, onClose, gift, yearId, personId,
           <label htmlFor='link' className='block text-sm font-medium text-gray-700 mb-2'>
             Link
           </label>
-          <input
-            id='link'
-            type='url'
+          <textarea
+            id='linki'
             value={link}
             onChange={(e) => setLink(e.target.value)}
-            className='w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all'
+            rows={3}
+            className='w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition-all resize-none'
             disabled={isLoading}
           />
         </div>