@datalayer/core
Version:
[](https://datalayer.io)
119 lines (118 loc) • 12.2 kB
JavaScript
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';
import { ECHART_MOCK_1, ECHART_MOCK_2, ECHART_MOCK_3, FlashMock, } from '../../mocks';
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;