import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Card, Layout, Space, Tabs, Typography, Table, Col, Row } from 'antd';
import { CodeSnippet } from '../../atoms';
import { Content, Header } from '../components/Ui';
import { CopiableInput } from '../../components/CopiableInput';
const { Paragraph, Link, Title } = Typography;
export function FrontendIntegrationsPage() {
    const token = 'token';
    const apiUrl = 'http://localhost:4000/cubejs-api';
    const restUrl = `${apiUrl}/v1/load`;
    const wsUrl = "ws://localhost:4000/";
    const graphqlUrl = `${apiUrl}/graphql`;
    const dataSource = [
        {
            key: '1',
            name: 'REST API Endpoint',
            url: restUrl,
            docsUrl: 'https://cube.dev/reference/core-data-apis/rest-api',
        },
        {
            key: '2',
            name: 'Websockets Endpoint',
            url: wsUrl,
            docsUrl: 'https://cube.dev/recipes/core-data-api/real-time-data-fetch',
        },
        {
            key: '2',
            name: 'GraphQL Endpoint',
            url: graphqlUrl,
            docsUrl: 'https://cube.dev/reference/core-data-apis/graphql-api',
        },
    ];
    const columns = [
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'URL',
            dataIndex: 'url',
            key: 'url',
            render: (text) => _jsx(CopiableInput, { wrapperStyle: { margin: 0 }, value: text })
        },
        {
            title: 'Docs',
            dataIndex: 'docsUrl',
            key: 'docsUrl',
            render: (text) => _jsx("a", { href: text, target: "_blank", children: "Docs" })
        }
    ];
    return (_jsxs(Layout, { children: [_jsx(Header, { children: _jsx(Title, { children: "Frontend Integrations" }) }), _jsx(Content, { children: _jsxs(Row, { gutter: 48, children: [_jsxs(Col, { span: 12, children: [_jsxs(Paragraph, { children: ["You can refer to Cube docs to learn more about", ' ', _jsx(Link, { href: "https://cube.dev/reference/core-data-apis/rest-api", target: "_blank", children: "REST" }), ",", ' ', _jsx(Link, { href: "https://cube.dev/reference/core-data-apis/graphql-api", target: "_blank", children: "GraphQL" }), ' ', "APIs and", ' ', _jsx(Link, { href: "https://cube.dev/reference/javascript-sdk", target: "_blank", children: "integration with frontend frameworks" }), "."] }), _jsx(Paragraph, { children: _jsx(Table, { dataSource: dataSource, columns: columns, pagination: false, showHeader: false }) })] }), _jsx(Col, { span: 12, children: _jsxs(Tabs, { defaultActiveKey: "1", size: "small", children: [_jsx(Tabs.TabPane, { tab: "Terminal", children: _jsxs(Space, { direction: "vertical", size: "large", children: [_jsxs(Card, { children: [_jsx(Paragraph, { children: "REST API" }), _jsx(CodeSnippet, { theme: "light", code: `curl \\ 
  -H "Authorization: ${token}" \\ 
  -G \\ 
  --data-urlencode 'query={"measures":["LineItems.count"]}' \\ 
  ${apiUrl}/v1/load

` })] }), _jsxs(Card, { children: [_jsx(Paragraph, { children: "GraphQL API" }), _jsx(CodeSnippet, { theme: "light", code: `curl \\ 
  -H "Authorization: ${token}" \\ 
  -G \\ 
  --data-urlencode 'query={"measures":["LineItems.count"]}' \\ 
  ${apiUrl}/v1/graphql

` })] })] }) }, "terminal"), _jsx(Tabs.TabPane, { tab: "Vanilla JS", children: _jsxs(Space, { direction: "vertical", size: "large", children: [_jsxs("div", { children: [_jsx(Paragraph, { children: "Init Cube API" }), _jsx(CodeSnippet, { theme: "light", code: `import cube from '@cubejs-client/core';
const cubeApi = cube(
  '${token}',
  { apiUrl: '${apiUrl}/v1' }
);` })] }), _jsxs("div", { children: [_jsx(Paragraph, { children: "Get the result set" }), _jsx(CodeSnippet, { theme: "light", code: `const resultSet = await cubejsApi.load({
  "measures":["LineItems.count"]
});` })] })] }) }, "vanilla-js"), _jsx(Tabs.TabPane, { tab: "React", children: _jsxs(Space, { direction: "vertical", size: "large", children: [_jsxs("div", { children: [_jsx(Paragraph, { children: "Init Cube API" }), _jsx(CodeSnippet, { theme: "light", code: `import cube from '@cubejs-client/core';
const cubeApi = cube(
  '${token}',
  { apiUrl: '${apiUrl}/v1' }
);` })] }), _jsxs("div", { children: [_jsx(Paragraph, { children: "Declare CubeProvider" }), _jsx(CodeSnippet, { theme: "light", code: `import { CubeProvider } from '@cubejs-client/react';
// ...
<CubeProvider cubejsApi={cubejsApi}>...` })] }), _jsxs("div", { children: [_jsx(Paragraph, { children: "Get the result set" }), _jsx(CodeSnippet, { theme: "light", code: `import { useCubeQuery } from '@cubejs-client/react'; 
// ... 
const { resultSet, isLoading, error, progress } = useCubeQuery({ 
  "measures":["LineItems.count"] 
});` })] })] }) }, "react"), _jsx(Tabs.TabPane, { tab: "Angular", children: _jsxs(Space, { direction: "vertical", size: "large", children: [_jsxs("div", { children: [_jsx(Paragraph, { children: "Set Cube options" }), _jsx(CodeSnippet, { theme: "light", code: `const cubejsOptions = { 
  token: '${token}', 
  options: { apiUrl: '${apiUrl}/v1' } 
}; ` })] }), _jsxs(Paragraph, { children: ["You can find full Angular tutorial and examples in", ' ', _jsx(Link, { href: "https://cube.dev/reference/javascript-sdk/angular", target: "_blank", children: "this documentation guide" }), "."] })] }) }, "angular"), _jsx(Tabs.TabPane, { tab: "Vue", children: _jsxs(Space, { direction: "vertical", size: "large", children: [_jsxs("div", { children: [_jsx(Paragraph, { children: "Init Cube API" }), _jsx(CodeSnippet, { theme: "light", code: `import cube from '@cubejs-client/core';
const cubeApi = cube(
  '${token}',
  { apiUrl: '${apiUrl}/v1' }
);` })] }), _jsxs(Paragraph, { children: ["You can find full Angular tutorial and examples in", ' ', _jsx(Link, { href: "https://cube.dev/reference/javascript-sdk/angular", target: "_blank", children: "this documentation guide" }), "."] })] }) }, "vue")] }) })] }) })] }));
}
//# sourceMappingURL=FrontendIntegrationsPage.js.map