import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
 * Copyright (c) 2023-2025 Datalayer, Inc.
 * Distributed under the terms of the Modified BSD License.
 */
import { Box, Link, Text, LabelGroup, Label, ActionMenu, ActionList, } from '@primer/react';
import { ArrowRightIcon, CloudIcon, StarIcon, DotFillIcon, RepoForkedIcon, LinkIcon, } from '@primer/octicons-react';
import { ReactJsIcon } from '@datalayer/icons-react';
import { lazyWithPreload, WithSuspense } from '../../utils/index.js';
import { ECHART_MOCK_1, ECHART_MOCK_2, ECHART_MOCK_3, FlashMock, } from '../../mocks/index.js';
const ReactECharts = WithSuspense(lazyWithPreload(() => import('echarts-for-react')), true);
export const DashboardMock = () => {
    return (_jsxs(_Fragment, { children: [_jsx(Box, { mb: 3, children: _jsx(FlashMock, {}) }), _jsxs(Box, { sx: {
                    display: 'grid',
                    gridTemplateColumns: '1fr 1fr 1fr',
                    gap: 4,
                }, children: [_jsxs(Box, { sx: {
                            gridColumn: '1 / 3',
                            minHeight: '200px',
                        }, children: [_jsxs(Box, { sx: {
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    paddingRight: 4,
                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "My latest work" }), _jsxs(Link, { children: ["View all work", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
                                    display: 'grid',
                                    gridTemplateColumns: '1fr 1fr',
                                    gap: 4,
                                }, children: [_jsxs(Box, { sx: {
                                            borderColor: 'border.default',
                                            borderStyle: 'solid',
                                            borderWidth: '1',
                                            borderRadius: '2',
                                            padding: 4,
                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["clouder ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", sx: { color: 'fg.subtle', fontWeight: 'semibold' }, children: [_jsx(CloudIcon
                                                    //                  sx={{ margin: "0 4px" }}
                                                    , {}), "Create, manage and share Kubernetes clusters."] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "Kubernetes" }), _jsx(Label, { variant: "accent", children: "cloud" }), _jsx(Label, { variant: "accent", children: "kubernets-cluster" }), _jsx(Label, { variant: "accent", children: "datalayer" })] }), _jsxs(Text, { as: "p", sx: {
                                                    color: 'fg.subtle',
                                                    '> *': { paddingLeft: 1, paddingRight: 1 },
                                                }, children: [_jsxs(Text, { children: [_jsx(DotFillIcon
                                                            //                    sx={{
                                                            //                      fill: "#4f729d",
                                                            //                      marginRight: 1,
                                                            //                      marginBottom: "3px",
                                                            //                    }}
                                                            , {}), "Python"] }), _jsxs(Text, { children: [_jsx(RepoForkedIcon
                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                            , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                            , {}), "11"] })] })] }), _jsxs(Box, { sx: {
                                            borderColor: 'border.default',
                                            borderStyle: 'solid',
                                            borderWidth: '1',
                                            borderRadius: '2',
                                            padding: 4,
                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["jupyter-ui ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", children: [_jsx(ReactJsIcon, { style: { margin: '0 4px' } }), "React.js components 100% compatible with Jupyter.", ' ', _jsx(Link, { href: "https://jupyter-ui-storybook.datalayer.tech", children: "https://jupyter-ui-storybook.datalayer.tech" })] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "data-science" }), _jsx(Label, { variant: "accent", children: "data" }), _jsx(Label, { variant: "accent", children: "ui" }), _jsx(Label, { variant: "accent", children: "jupyter" }), _jsx(Label, { children: "+4" })] }), _jsxs(Text, { as: "p", sx: {
                                                    color: 'fg.subtle',
                                                    '> *': { paddingLeft: 1, paddingRight: 1 },
                                                }, children: [_jsxs(Text, { children: [_jsx(DotFillIcon
                                                            /*
                                                              sx={{
                                                                fill: "#4f729d",
                                                                marginRight: 1,
                                                                marginBottom: "3px",
                                                              }}
                                                              */
                                                            , {}), "Typescript"] }), _jsxs(Text, { children: [_jsx(RepoForkedIcon
                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                            , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
                                                            //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                            , {}), "11"] })] })] })] })] }), _jsxs(Box, { sx: {
                            gridColumn: '3 / 4',
                            gridRow: '1 / 3',
                            minHeight: '200px',
                        }, children: [_jsxs(Box, { sx: {
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    paddingRight: 4,
                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Usage" }), _jsxs(Link, { children: ["More Usage", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
                                    borderColor: 'border.default',
                                    borderStyle: 'solid',
                                    borderWidth: '1',
                                    borderRadius: '2',
                                    padding: 4,
                                }, children: [_jsxs(Box, { sx: {
                                            display: 'inline-flex',
                                            flexDirection: 'row',
                                            alignItems: 'center',
                                        }, children: [_jsx(Text, { as: "h3", sx: { marginRight: '20px' }, children: "Kernels Activity" }), _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { children: [_jsx(Box, { sx: { color: 'fg.muted', display: 'inline-block' }, children: "View:" }), ' ', 'All kernels'] }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { selectionVariant: "single", children: _jsx(ActionList.Item, { selected: true, children: "All kernels" }) }) })] })] }), _jsx(Text, { as: "h3", children: "Credits usage" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Amount today" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Balance yesterday" }), _jsx(Text, { as: "h3", children: "Last invoice" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: '3', fontWeight: 'bold' }, children: "$216" })] })] }), _jsxs(Box, { sx: {
                            gridColumn: '1 / 3',
                            minHeight: '200px',
                        }, children: [_jsxs(Box, { sx: {
                                    display: 'flex',
                                    alignItems: 'center',
                                    justifyContent: 'space-between',
                                    paddingRight: 4,
                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Trending Notebooks" }), _jsxs(Link, { children: ["All Notebooks", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
                                    borderColor: 'border.default',
                                    borderStyle: 'solid',
                                    borderWidth: '1',
                                    borderRadius: '2',
                                    display: 'grid',
                                    gridTemplateColumns: '1fr 1fr',
                                    '> :not(:last-child)': {
                                        borderRightColor: 'border.default',
                                        borderRightStyle: 'solid',
                                        borderRightWidth: '1',
                                    },
                                }, children: [_jsxs(Box, { sx: {
                                            padding: 4,
                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_1 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
                                            padding: 4,
                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_3 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
                                            padding: 4,
                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_2 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] })] })] })] })] }));
};
export default DashboardMock;
