From d27313e866390eabe930cfc480a883079e7228c7 Mon Sep 17 00:00:00 2001
From: Norbert Maciaszek <norbert@ambiscale.com>
Date: Tue, 11 Nov 2025 16:43:30 +0100
Subject: [PATCH] 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         |  3 +--
 src/components/atoms/Modal/index.tsx         |  2 +-
 src/components/molecules/GiftCard/index.tsx  | 15 +++++++++++++--
 src/components/molecules/GiftModal/index.tsx |  8 ++++----
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/atoms/Badge/index.tsx b/src/components/atoms/Badge/index.tsx
index 9665b00..6a80d32 100644
--- a/src/components/atoms/Badge/index.tsx
+++ b/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>;
 };
diff --git a/src/components/atoms/Modal/index.tsx b/src/components/atoms/Modal/index.tsx
index 5a58d08..63678df 100644
--- a/src/components/atoms/Modal/index.tsx
+++ b/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()}>
diff --git a/src/components/molecules/GiftCard/index.tsx b/src/components/molecules/GiftCard/index.tsx
index 6bf393d..46aa842 100644
--- a/src/components/molecules/GiftCard/index.tsx
+++ b/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>
diff --git a/src/components/molecules/GiftModal/index.tsx b/src/components/molecules/GiftModal/index.tsx
index 48c64fc..84184b7 100644
--- a/src/components/molecules/GiftModal/index.tsx
+++ b/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>