git-sync/profilarr
1
0
Fork 0
mirror of https://github.com/Dictionarry-Hub/profilarr.git synced 2026-01-22 10:51:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add clone button with SVG icon to FormatCard component

Browse Source
This commit is contained in:
santiagosayshey
2024-08-16 15:23:18 +09:30
committed by Sam Chau
parent 9fbcaea709
commit 0c0a4cb5d1
3 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/public/clone.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 870 B

20
frontend/src/components/format/FormatCard.jsx
View File

@@ -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;
export default FormatCard;

8
frontend/src/components/format/FormatManager.jsx
View File

@@ -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;
export default FormatManager;