48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
|
|
import { clipboard } from '@/utils/clipboard';
|
|
import { Copy, RocketIcon } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
|
|
import type { IServiceClient } from '@openpanel/db';
|
|
|
|
import { Label } from '../ui/label';
|
|
|
|
type Props = IServiceClient;
|
|
|
|
export function CreateClientSuccess({ id, secret, cors }: Props) {
|
|
return (
|
|
<div className="grid gap-4">
|
|
<button className="text-left" onClick={() => clipboard(id)}>
|
|
<Label>Client ID</Label>
|
|
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
|
|
{id}
|
|
<Copy size={16} />
|
|
</div>
|
|
</button>
|
|
{secret ? (
|
|
<button className="text-left" onClick={() => clipboard(secret)}>
|
|
<Label>Secret</Label>
|
|
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
|
|
{secret}
|
|
<Copy size={16} />
|
|
</div>
|
|
</button>
|
|
) : (
|
|
<div className="text-left">
|
|
<Label>Cors settings</Label>
|
|
<div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
|
|
{cors}
|
|
</div>
|
|
</div>
|
|
)}
|
|
<Alert>
|
|
<RocketIcon className="h-4 w-4" />
|
|
<AlertTitle>Get started!</AlertTitle>
|
|
<AlertDescription>
|
|
Read our documentation to get started. Easy peasy!
|
|
</AlertDescription>
|
|
</Alert>
|
|
</div>
|
|
);
|
|
}
|