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

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

16
dist/index.cjs.js vendored
View File

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

View File

@ -1,5 +1,6 @@
import React from 'react';
import filesize from 'filesize'
import * as timeago from 'timeago.js';
import PropTypes from 'prop-types';
/**
@ -22,7 +23,10 @@ const ResourcesInfo = ({ resources }) => {
<h3 className="text-1xl font-bold mb-2">Size</h3>
</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>
<h3 className="text-1xl font-bold mb-2">Download</h3>
@ -33,20 +37,24 @@ const ResourcesInfo = ({ resources }) => {
return (
<div key={`${index}_${resource.name}`} className="grid grid-cols-7 gap-4">
<div>
<h3 className="text-1xl">{resource.name}</h3>
<h3 className="text-1xl">{resource.title || resource.name}</h3>
</div>
<div>
<h3 className="text-1xl">{resource.description || "No description"}</h3>
</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>
<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>
<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}
</a>
</h3>