86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useCallback } from 'react';
|
|
import { useUser } from '../layout/user.context';
|
|
import { Button } from '@gitroom/react/form/button';
|
|
import copy from 'copy-to-clipboard';
|
|
import { useToaster } from '@gitroom/react/toaster/toaster';
|
|
import { useVariables } from '@gitroom/react/helpers/variable.context';
|
|
|
|
export const PublicComponent = () => {
|
|
const user = useUser();
|
|
const {frontEndUrl} = useVariables();
|
|
const toaster = useToaster();
|
|
const [reveal, setReveal] = useState(false);
|
|
const [reveal2, setReveal2] = useState(false);
|
|
|
|
const copyToClipboard = useCallback(() => {
|
|
toaster.show('API Key copied to clipboard', 'success');
|
|
copy(user?.publicApi!);
|
|
}, [user]);
|
|
|
|
if (!user || !user.publicApi) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col">
|
|
<h3 className="text-[20px]">Public API</h3>
|
|
<div className="text-customColor18 mt-[4px]">
|
|
Use Postiz API to integrate with your tools.
|
|
<br />
|
|
<a
|
|
className="underline hover:text-white"
|
|
href="https://docs.postiz.com/public-api"
|
|
target="_blank"
|
|
>
|
|
Read how to use it over the documentation.
|
|
</a>
|
|
</div>
|
|
<div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
|
|
<div className="flex items-center">
|
|
{reveal ? (
|
|
user.publicApi
|
|
) : (
|
|
<>
|
|
<div className="blur-sm">{user.publicApi.slice(0, -5)}</div>
|
|
<div>{user.publicApi.slice(-5)}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div>
|
|
{!reveal ? (
|
|
<Button onClick={() => setReveal(true)}>Reveal</Button>
|
|
) : (
|
|
<Button onClick={copyToClipboard}>Copy Key</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-[20px]">MCP</h3>
|
|
<div className="text-customColor18 mt-[4px]">
|
|
Connect your MCP client to Postiz to schedule your posts faster!
|
|
</div>
|
|
<div className="my-[16px] mt-[16px] bg-sixth border-fifth items-center border rounded-[4px] p-[24px] flex gap-[24px]">
|
|
<div className="flex items-center">
|
|
{reveal2 ? (
|
|
`${frontEndUrl}/mcp/` + user.publicApi + '/sse'
|
|
) : (
|
|
<>
|
|
<div className="blur-sm">{(`${frontEndUrl}/mcp/` + user.publicApi + '/sse').slice(0, -5)}</div>
|
|
<div>{(`${frontEndUrl}/mcp/` + user.publicApi + '/sse').slice(-5)}</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div>
|
|
{!reveal2 ? (
|
|
<Button onClick={() => setReveal2(true)}>Reveal</Button>
|
|
) : (
|
|
<Button onClick={copyToClipboard}>Copy Key</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|