Create index.tsx

This commit is contained in:
Stefan Pejcic 2024-03-04 11:19:21 +01:00 committed by GitHub
parent 613207c9a9
commit ab12603f32
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -0,0 +1,53 @@
import React 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";
import clsx from "clsx";
const Assets: React.FC = () => {
const assets = [
{ name: "Logo Icon", svgUrl: "/icon/openpanel_logo.svg", downloadUrl: "/icon/openpanel_logo.svg" },
{ name: "White Logo Icon", svgUrl: "/icon/openpanel_white_logo.svg", downloadUrl: "/icon/openpanel_white_logo.svg" },
// Amore here..
];
const handleCopySVGCode = async (svgUrl: string) => {
const response = await fetch(svgUrl);
const svgCode = await response.text();
navigator.clipboard.writeText(svgCode).then(
() => console.log('SVG code copied to clipboard'),
(err) => console.error('Error copying SVG code: ', err)
);
};
return (
<CommonLayout>
<Head title="BRAND ASSETS | OpenPanel">
<html data-page="brand-assets" data-customized="true" />
</Head>
<div className="refine-prose">
<CommonHeader hasSticky={true} />
<div className="flex-1 flex flex-col pt-8 lg:pt-16 pb-32 max-w-[800px] w-full mx-auto px-2">
<h1>Brand Assets</h1>
<div className="grid grid-cols-2 gap-4">
{assets.map((asset, index) => (
<div key={index} className="flex items-center space-x-4">
<img src={asset.svgUrl} alt={asset.name} className="w-20 h-20" />
<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>
<button onClick={() => handleCopySVGCode(asset.svgUrl)} className="bg-gray-500 text-white px-4 py-2">Copy SVG</button>
</div>
</div>
))}
</div>
</div>
<BlogFooter />
</div>
</CommonLayout>
);
};
export default Assets;