@datalayer/core
Version:
**Datalayer Core**
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;