knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ResourceInfo component][xs]: small improvements in the table to show more info.

Browse Source
This commit is contained in:
anuveyatsu
2021-08-14 20:56:55 +06:00
parent 5c0b053fe2
commit 2c42d3d83d
3 changed files with 33 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dist/index.cjs.js vendored
View File

@@ -312,7 +312,9 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
className: "text-1xl font-bold mb-2" className: "text-1xl font-bold mb-2"
}, "Size")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", { }, "Size")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl font-bold mb-2" className: "text-1xl font-bold mb-2"
}, "Last Changed")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", { }, "Created")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl font-bold mb-2"
}, "Updated")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl font-bold mb-2" className: "text-1xl font-bold mb-2"
}, "Download"))), resources.map(function (resource, index) { }, "Download"))), resources.map(function (resource, index) {
return /*#__PURE__*/React__default['default'].createElement("div", { return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -320,19 +322,21 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
className: "grid grid-cols-7 gap-4" className: "grid grid-cols-7 gap-4"
}, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", { }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.name)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", { }, resource.title || resource.name)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.description || "No description")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", { }, resource.description || "No description")), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.size && filesize__default['default'](resource.size, { }, resource.size ? filesize__default['default'](resource.size, {
bits: true bits: true
}))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", { }) : 0)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.updated)), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", { }, resource.created && timeago__namespace.format(resource.created))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl"
}, resource.updated && timeago__namespace.format(resource.updated))), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, /*#__PURE__*/React__default['default'].createElement("a", { }, /*#__PURE__*/React__default['default'].createElement("a", {
className: "text-yellow-600", className: "text-yellow-600",
href: "/dataset/".concat(resource.path) href: resource.path
}, resource.format)))); }, resource.format))));
}))); })));
}; };

16
dist/index.esm.js vendored
View File

@@ -278,7 +278,9 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
className: "text-1xl font-bold mb-2" className: "text-1xl font-bold mb-2"
}, "Size")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", { }, "Size")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl font-bold mb-2" className: "text-1xl font-bold mb-2"
}, "Last Changed")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", { }, "Created")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl font-bold mb-2"
}, "Updated")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl font-bold mb-2" className: "text-1xl font-bold mb-2"
}, "Download"))), resources.map(function (resource, index) { }, "Download"))), resources.map(function (resource, index) {
return /*#__PURE__*/React.createElement("div", { return /*#__PURE__*/React.createElement("div", {
@@ -286,19 +288,21 @@ var ResourcesInfo = function ResourcesInfo(_ref) {
className: "grid grid-cols-7 gap-4" className: "grid grid-cols-7 gap-4"
}, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", { }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", { }, resource.title || resource.name)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.description || "No description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", { }, resource.description || "No description")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.size && filesize(resource.size, { }, resource.size ? filesize(resource.size, {
bits: true bits: true
}))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", { }) : 0)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, resource.updated)), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", { }, resource.created && timeago.format(resource.created))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl"
}, resource.updated && timeago.format(resource.updated))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
className: "text-1xl" className: "text-1xl"
}, /*#__PURE__*/React.createElement("a", { }, /*#__PURE__*/React.createElement("a", {
className: "text-yellow-600", className: "text-yellow-600",
href: "/dataset/".concat(resource.path) href: resource.path
}, resource.format)))); }, resource.format))));
}))); })));
}; };

18
src/components/dataset/ResourceInfo.js
View File

@@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import filesize from 'filesize' import filesize from 'filesize'
import * as timeago from 'timeago.js';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
/** /**
@@ -22,7 +23,10 @@ const ResourcesInfo = ({ resources }) => {
<h3 className="text-1xl font-bold mb-2">Size</h3> <h3 className="text-1xl font-bold mb-2">Size</h3>
</div> </div>
<div> <div>
<h3 className="text-1xl font-bold mb-2">Last Changed</h3> <h3 className="text-1xl font-bold mb-2">Created</h3>
</div>
<div>
<h3 className="text-1xl font-bold mb-2">Updated</h3>
</div> </div>
<div> <div>
<h3 className="text-1xl font-bold mb-2">Download</h3> <h3 className="text-1xl font-bold mb-2">Download</h3>
@@ -33,20 +37,24 @@ const ResourcesInfo = ({ resources }) => {
return ( return (
<div key={`${index}_${resource.name}`} className="grid grid-cols-7 gap-4"> <div key={`${index}_${resource.name}`} className="grid grid-cols-7 gap-4">
<div> <div>
<h3 className="text-1xl">{resource.name}</h3> <h3 className="text-1xl">{resource.title || resource.name}</h3>
</div> </div>
<div> <div>
<h3 className="text-1xl">{resource.description || "No description"}</h3> <h3 className="text-1xl">{resource.description || "No description"}</h3>
</div> </div>
<div> <div>
<h3 className="text-1xl">{resource.size && filesize(resource.size, { bits: true })}</h3> <h3 className="text-1xl">{resource.size ? filesize(resource.size, { bits: true }) : 0}</h3>
</div> </div>
<div> <div>
<h3 className="text-1xl">{resource.updated}</h3> <h3 className="text-1xl">{resource.created && timeago.format(resource.created)}</h3>
</div>
<div>
<h3 className="text-1xl">{resource.updated && timeago.format(resource.updated)}</h3>
</div> </div>
<div> <div>
<h3 className="text-1xl"> <h3 className="text-1xl">
<a className="text-yellow-600" href={`/dataset/${resource.path}`}> {/* We assume that resource.path is a URL but not relative path. */}
<a className="text-yellow-600" href={resource.path}>
{resource.format} {resource.format}
</a> </a>
</h3> </h3>