UniqueSoft/openpanel
2
0
Fork 0
mirror of https://github.com/stefanpejcic/openpanel synced 2025-06-26 18:28:26 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Update index.tsx

Browse Source
This commit is contained in:
Stefan Pejcic 2024-03-04 12:18:16 +01:00 committed by GitHub
parent 1a78321ccc
commit d35c87fa35
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
documentation/src/pages/assets/index.tsx
View File

@ -5,31 +5,42 @@ import { CommonHeader } from "@site/src/refine-theme/common-header";
import { CommonLayout } from "@site/src/refine-theme/common-layout"; import { CommonLayout } from "@site/src/refine-theme/common-layout";
const Assets: React.FC = () => { const Assets: React.FC = () => {
const [color, setColor] = useState("#000000"); // Default color
const [assets, setAssets] = useState([ const [assets, setAssets] = useState([
{ name: "Logo Icon", svgUrl: "/img/svg/openpanel_logo.svg", svgContent: null }, { name: "Logo Icon", svgUrl: "/img/svg/openpanel_logo.svg", svgCode: '', color: '#000000' },
//{ name: "White Logo Icon", svgUrl: "/img/svg/openpanel_white_logo.svg", svgContent: null }, //{ name: "White Logo Icon", svgUrl: "/img/svg/openpanel_white_logo.svg", svgCode: '', color: '#FFFFFF' },
]); ]);
// Fetch SVG content for each asset // Function to fetch and set initial SVG code for each asset
useEffect(() => { useEffect(() => {
assets.forEach((asset, index) => { assets.forEach((asset, index) => {
fetch(asset.svgUrl) fetch(asset.svgUrl)
.then(response => response.text()) .then(response => response.text())
.then(svgContent => { .then(svgCode => {
const updatedAssets = [...assets]; const updatedAssets = [...assets];
updatedAssets[index] = { ...asset, svgContent: svgContent.replace(/fill="currentColor"/g, `fill="${color}"`) }; updatedAssets[index].svgCode = svgCode;
setAssets(updatedAssets); setAssets(updatedAssets);
}); });
}); });
}, [color]); // Re-fetch when color changes }, []); // Empty dependency array ensures this only runs once on mount
const handleCopySVGCode = async (svgContent: string) => { // Function to handle color change and debounce updates
const modifiedSVG = svgContent.replace(/fill="#[0-9A-Fa-f]{6}"/g, `fill="${color}"`); const handleColorChange = (color, index) => {
navigator.clipboard.writeText(modifiedSVG).then( const updatedAssets = [...assets];
() => console.log('SVG code copied to clipboard'), updatedAssets[index].color = color;
(err) => console.error('Error copying SVG code: ', err) setAssets(updatedAssets);
); };
// Function to download SVG with selected color
const downloadSVG = (svgCode, color, name) => {
const coloredSvgCode = svgCode.replace(/fill="currentColor"/g, `fill="${color}"`);
const blob = new Blob([coloredSvgCode], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `${name}.svg`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}; };
return ( return (
@ -46,16 +57,15 @@ const Assets: React.FC = () => {
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
{assets.map((asset, index) => ( {assets.map((asset, index) => (
<div key={index} className="flex items-center space-x-4"> <div key={index} className="flex items-center space-x-4">
<div className="bg-[#f8f9fa] p-4 rounded-lg" dangerouslySetInnerHTML={{ __html: asset.svgContent }} /> <div className="bg-[#f8f9fa] p-4 rounded-lg" dangerouslySetInnerHTML={{ __html: asset.svgCode.replace(/fill="currentColor"/g, `fill="${asset.color}"`) }} />
<div> <div>
<a href={asset.svgUrl} target="_blank" rel="noopener noreferrer" className="block bg-blue-500 text-white px-4 py-2 mb-2">Download</a> Icon color: <input
<input
type="color" type="color"
value={color} value={asset.color}
onChange={(e) => setColor(e.target.value)} onChange={(e) => handleColorChange(e.target.value, index)}
className="mb-2" className="mb-2"
/> />
<button onClick={() => handleCopySVGCode(asset.svgContent)} className="bg-gray-500 text-white px-4 py-2">Copy SVG</button> <button onClick={() => downloadSVG(asset.svgCode, asset.color, asset.name)} className="bg-gray-500 text-white px-4 py-2">Download</button>
</div> </div>
</div> </div>
))} ))}