@zohodesk/docs-builder
Version:
docs-builder is used to build your own docs
67 lines (65 loc) • 2.33 kB
JavaScript
import React, { useState, useEffect } from 'react';
import style from "./Dashboard.module.css";
import defaultImage from "../../assets/images/react.png";
import { useHistory } from 'react-router-dom';
export default function Dashboard(_ref) {
let {
docsConfig
} = _ref;
const {
packages = [],
header = '',
description = '',
cards = {}
} = docsConfig;
const [library, setLibrary] = useState(packages[packages.length - 1] || '');
const history = useHistory();
useEffect(() => {
if (packages.length > 0) {
let index = 0;
const intervalId = setInterval(() => {
setLibrary(packages[index]);
index = (index + 1) % packages.length;
}, 2000);
return () => clearInterval(intervalId);
}
}, [packages]);
const handleCardClick = componentName => {
if (componentName) {
history.push(`/all/${componentName}`);
}
};
return /*#__PURE__*/React.createElement("div", {
className: `${style.dashboardContainer} ${style.flexgrow} ${style.flexbasis}`
}, /*#__PURE__*/React.createElement("div", {
className: style.rhs
}, /*#__PURE__*/React.createElement("div", {
className: style.header
}, header && /*#__PURE__*/React.createElement("h1", {
className: style.heading1
}, header), library && /*#__PURE__*/React.createElement("div", {
className: style.package
}, /*#__PURE__*/React.createElement("code", null, library))), description && /*#__PURE__*/React.createElement("p", {
className: style.description
}, description)), Object.keys(cards).length > 0 && /*#__PURE__*/React.createElement("div", {
className: style.lhs
}, Object.entries(cards).map(_ref2 => {
let [key, value] = _ref2;
return /*#__PURE__*/React.createElement("div", {
key: key,
className: style.card,
onClick: () => handleCardClick(value.initialComponentName),
style: {
background: value.backgroundColor || '#ffffff'
}
}, /*#__PURE__*/React.createElement("div", {
className: style.cardContent
}, /*#__PURE__*/React.createElement("img", {
className: style.bgImage,
src: value.svgPath || defaultImage,
alt: key
})), /*#__PURE__*/React.createElement("div", {
className: style.cardfooter
}, /*#__PURE__*/React.createElement("p", null, key)));
})));
}