From 0c0a4cb5d1cba9c0f49535644580964043cf2041 Mon Sep 17 00:00:00 2001
From: santiagosayshey <schau22@pm.me>
Date: Fri, 16 Aug 2024 15:23:18 +0930
Subject: [PATCH] feat: Add clone button with SVG icon to FormatCard component

---
 frontend/public/clone.svg                     |  1 +
 frontend/src/components/format/FormatCard.jsx | 20 ++++++++++++++++---
 .../src/components/format/FormatManager.jsx   |  8 +++++++-
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 frontend/public/clone.svg

diff --git a/frontend/public/clone.svg b/frontend/public/clone.svg
new file mode 100644
index 0000000..cfad09a
--- /dev/null
+++ b/frontend/public/clone.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M17.0998 2H12.8998C9.44976 2 8.04977 3.37 8.00977 6.75H11.0998C15.2998 6.75 17.2498 8.7 17.2498 12.9V15.99C20.6298 15.95 21.9998 14.55 21.9998 11.1V6.9C21.9998 3.4 20.5998 2 17.0998 2Z" fill="#ffffff"></path> <path d="M11.1 8H6.9C3.4 8 2 9.4 2 12.9V17.1C2 20.6 3.4 22 6.9 22H11.1C14.6 22 16 20.6 16 17.1V12.9C16 9.4 14.6 8 11.1 8ZM12.29 13.65L8.58 17.36C8.44 17.5 8.26 17.57 8.07 17.57C7.88 17.57 7.7 17.5 7.56 17.36L5.7 15.5C5.42 15.22 5.42 14.77 5.7 14.49C5.98 14.21 6.43 14.21 6.71 14.49L8.06 15.84L11.27 12.63C11.55 12.35 12 12.35 12.28 12.63C12.56 12.91 12.57 13.37 12.29 13.65Z" fill="#ffffff"></path> </g></svg>
\ No newline at end of file
diff --git a/frontend/src/components/format/FormatCard.jsx b/frontend/src/components/format/FormatCard.jsx
index f18856c..be04495 100644
--- a/frontend/src/components/format/FormatCard.jsx
+++ b/frontend/src/components/format/FormatCard.jsx
@@ -1,12 +1,25 @@
 import PropTypes from 'prop-types';
 
-function FormatCard({ format, onEdit, showDate, formatDate }) {
+function FormatCard({ format, onEdit, onClone, showDate, formatDate }) {
   return (
     <div
       className="bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl rounded-lg p-4 cursor-pointer border border-gray-200 dark:border-gray-700 transition-all duration-300 ease-in-out transform hover:-translate-y-1"
       onClick={() => onEdit(format)}
     >
-      <h3 className="font-bold text-lg mb-2 text-gray-800 dark:text-gray-200">{format.name}</h3>
+      <div className="flex justify-between items-center">
+        <h3 className="font-bold text-lg text-gray-800 dark:text-gray-200">
+          {format.name}
+        </h3>
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onClone(format);
+          }}
+          className="text-blue-500 hover:text-blue-700"
+        >
+          <img src="/clone.svg" alt="Clone" className="w-6 h-6" />
+        </button>
+      </div>
       <p className="text-gray-600 dark:text-gray-400 text-sm mb-2">{format.description}</p>
       {showDate && (
         <p className="text-gray-500 dark:text-gray-400 text-xs mb-2">
@@ -52,8 +65,9 @@ FormatCard.propTypes = {
     tags: PropTypes.arrayOf(PropTypes.string),
   }).isRequired,
   onEdit: PropTypes.func.isRequired,
+  onClone: PropTypes.func.isRequired, // New prop for cloning
   showDate: PropTypes.bool.isRequired,
   formatDate: PropTypes.func.isRequired,
 };
 
-export default FormatCard;
\ No newline at end of file
+export default FormatCard;
diff --git a/frontend/src/components/format/FormatManager.jsx b/frontend/src/components/format/FormatManager.jsx
index 7a87dc4..b58d5b5 100644
--- a/frontend/src/components/format/FormatManager.jsx
+++ b/frontend/src/components/format/FormatManager.jsx
@@ -45,6 +45,11 @@ function FormatManager() {
     handleCloseModal();
   };
 
+  const handleCloneFormat = (format) => {
+    const clonedFormat = { ...format, id: 0, name: `${format.name} [COPY]` };
+    handleOpenModal(clonedFormat);
+  };
+
   const formatDate = (dateString) => {
     return new Date(dateString).toLocaleString();
   };
@@ -87,6 +92,7 @@ function FormatManager() {
             key={format.id} 
             format={format} 
             onEdit={() => handleOpenModal(format)}
+            onClone={handleCloneFormat} // Pass the clone handler
             showDate={sortBy !== 'title'}
             formatDate={formatDate}
           />
@@ -104,4 +110,4 @@ function FormatManager() {
   );
 }
 
-export default FormatManager;
\ No newline at end of file
+export default FormatManager;