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:05:46 +01:00 committed by GitHub
parent 75c8fda051
commit 75b450927e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,21 @@
import React from "react"; import React, { useState } from "react";
import Head from "@docusaurus/Head"; import Head from "@docusaurus/Head";
import { BlogFooter } from "@site/src/refine-theme/blog-footer"; import { BlogFooter } from "@site/src/refine-theme/blog-footer";
import { CommonHeader } from "@site/src/refine-theme/common-header"; 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";
import clsx from "clsx";
const Assets: React.FC = () => { const Assets: React.FC = () => {
const [color, setColor] = useState("#000000"); // Default color set to black
const assets = [ const assets = [
{ name: "Logo Icon", svgUrl: "/img/svg/openpanel_logo.svg", downloadUrl: "/img/svg/openpanel_logo.svg" }, { 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" }, //{ name: "White Logo Icon", svgUrl: "/img/svg/openpanel_white_logo.svg", downloadUrl: "/img/svg/openpanel_white_logo.svg" },
// more here.. // more here..
]; ];
const handleCopySVGCode = async (svgUrl: string, color: string) => {
const handleCopySVGCode = async (svgUrl: string) => {
const response = await fetch(svgUrl); const response = await fetch(svgUrl);
const svgCode = await response.text(); let svgCode = await response.text();
svgCode = svgCode.replace(/fill="currentColor"/g, `fill="${color}"`); // Replace fill color
navigator.clipboard.writeText(svgCode).then( navigator.clipboard.writeText(svgCode).then(
() => console.log('SVG code copied to clipboard'), () => console.log('SVG code copied to clipboard'),
(err) => console.error('Error copying SVG code: ', err) (err) => console.error('Error copying SVG code: ', err)
@ -41,7 +41,13 @@ const Assets: React.FC = () => {
</div> </div>
<div> <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.downloadUrl} target="_blank" rel="noopener noreferrer" className="block bg-blue-500 text-white px-4 py-2 mb-2">Download</a>
<button onClick={() => handleCopySVGCode(asset.svgUrl)} className="bg-gray-500 text-white px-4 py-2">Copy SVG</button> <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>
</div> </div>
</div> </div>
))} ))}