beenull/OpenPanel
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Update index.tsx

Browse source
This commit is contained in:
Stefan Pejcic 2024-03-04 12:10:42 +01:00 committed by GitHub
parent 75b450927e
commit 1a78321ccc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
documentation/src/pages/assets/index.tsx
View file

@ -1,22 +1,32 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import Head from "@docusaurus/Head";
import { BlogFooter } from "@site/src/refine-theme/blog-footer";
import { CommonHeader } from "@site/src/refine-theme/common-header";
import { CommonLayout } from "@site/src/refine-theme/common-layout";
const Assets: React.FC = () => {
const [color, setColor] = useState("#000000"); // Default color set to black
const assets = [
{ name: "Logo Icon", svgUrl: "/img/svg/openpanel_logo.svg", downloadUrl: "/img/svg/openpanel_logo.svg" },
//{ name: "White Logo Icon", svgUrl: "/img/svg/openpanel_white_logo.svg", downloadUrl: "/img/svg/openpanel_white_logo.svg" },
// more here..
];
const [color, setColor] = useState("#000000"); // Default color
const [assets, setAssets] = useState([
{ name: "Logo Icon", svgUrl: "/img/svg/openpanel_logo.svg", svgContent: null },
//{ name: "White Logo Icon", svgUrl: "/img/svg/openpanel_white_logo.svg", svgContent: null },
]);
const handleCopySVGCode = async (svgUrl: string, color: string) => {
const response = await fetch(svgUrl);
let svgCode = await response.text();
svgCode = svgCode.replace(/fill="currentColor"/g, `fill="${color}"`); // Replace fill color
navigator.clipboard.writeText(svgCode).then(
// Fetch SVG content for each asset
useEffect(() => {
assets.forEach((asset, index) => {
fetch(asset.svgUrl)
.then(response => response.text())
.then(svgContent => {
const updatedAssets = [...assets];
updatedAssets[index] = { ...asset, svgContent: svgContent.replace(/fill="currentColor"/g, `fill="${color}"`) };
setAssets(updatedAssets);
});
});
}, [color]); // Re-fetch when color changes
const handleCopySVGCode = async (svgContent: string) => {
const modifiedSVG = svgContent.replace(/fill="#[0-9A-Fa-f]{6}"/g, `fill="${color}"`);
navigator.clipboard.writeText(modifiedSVG).then(
() => console.log('SVG code copied to clipboard'),
(err) => console.error('Error copying SVG code: ', err)
);
@ -36,18 +46,16 @@ const Assets: React.FC = () => {
<div className="grid grid-cols-2 gap-4">
{assets.map((asset, index) => (
<div key={index} className="flex items-center space-x-4">
<div className="bg-[#f8f9fa] p-4 rounded-lg">
<img src={asset.svgUrl} alt={asset.name} className="w-20 h-20" />
</div>
<div className="bg-[#f8f9fa] p-4 rounded-lg" dangerouslySetInnerHTML={{ __html: asset.svgContent }} />
<div>
<a href={asset.downloadUrl} target="_blank" rel="noopener noreferrer" className="block bg-blue-500 text-white px-4 py-2 mb-2">Download</a>
<a href={asset.svgUrl} target="_blank" rel="noopener noreferrer" className="block bg-blue-500 text-white px-4 py-2 mb-2">Download</a>
<input
type="color"
value={color}
onChange={(e) => setColor(e.target.value)}
className="mb-2"
/>
<button onClick={() => handleCopySVGCode(asset.svgUrl, color)} className="bg-gray-500 text-white px-4 py-2">Copy SVG</button>
<button onClick={() => handleCopySVGCode(asset.svgContent)} className="bg-gray-500 text-white px-4 py-2">Copy SVG</button>
</div>
</div>
))}