LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

main page

This commit is contained in:
Karol Wypchlo 2021-02-12 00:31:52 +01:00
parent 5dfbf94b02
commit fb42ac7ce9
8 changed files with 132 additions and 296 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/dashboard/src/components/Table.js
View File

@ -8,7 +8,7 @@ function Button({ children, disabled, className, ...props }) {
className={classnames(
"inline-flex items-center px-3 py-2 border border-gray-300 shadow-sm text-sm leading-4 font-medium rounded-md text-gray-700 bg-white",
{
"hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500": !disabled,
"hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500": !disabled,
"cursor-auto opacity-50": disabled,
},
className
@ -24,7 +24,7 @@ function Button({ children, disabled, className, ...props }) {
export default function Table({ items, count, headers, actions, offset, setOffset, pageSize = 10 }) {
useEffect(() => {
if (offset < 0) setOffset(0);
else if (offset >= count) setOffset(count - (count % pageSize));
else if (offset >= count) setOffset(Math.floor(count / pageSize - 1) * pageSize);
else if (offset % pageSize) setOffset(offset - (offset % pageSize));
}, [offset, pageSize, setOffset]);
@ -66,7 +66,7 @@ export default function Table({ items, count, headers, actions, offset, setOffse
))}
{actions.map(({ key, name, action }) => (
<td key={key} className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" className="text-indigo-600 hover:text-indigo-900" onClick={action}>
<a href="#" className="text-green-600 hover:text-green-900" onClick={action}>
{name}
</a>
</td>
@ -82,7 +82,7 @@ export default function Table({ items, count, headers, actions, offset, setOffse
>
<div className="hidden sm:block">
<p className="text-sm text-gray-700">
Showing <span className="font-medium">{offset ? offset + 1 : 0}</span> to{" "}
Showing <span className="font-medium">{count ? offset + 1 : 0}</span> to{" "}
<span className="font-medium">{offset + pageSize > count ? count : offset + pageSize}</span> of{" "}
<span className="font-medium">{count}</span> results
</p>
@ -93,7 +93,7 @@ export default function Table({ items, count, headers, actions, offset, setOffse
</Button>
<Button
className="ml-3"
disabled={offset + pageSize > count}
disabled={offset + pageSize >= count}
onClick={() => setOffset(offset + pageSize)}
>
Next

2
packages/dashboard/src/config.js
View File

@ -36,4 +36,6 @@ export default {
certificatePath: process.env.TLS_CERT_PATH || "",
keyPath: process.env.TLS_KEY_PATH || "",
},
tiers: {},
};

8
packages/dashboard/src/pages/api/stubs/user/downloads.js
View File

@ -1,4 +1,8 @@
import items from "./downloads.json";
export default (req, res) => {
res.statusCode = 200;
res.json(require("./downloads.json"));
const offset = parseInt(req.query?.offset ?? 0, 10);
const pageSize = parseInt(req.query?.pageSize ?? 10, 10);
res.json({ items: items.slice(offset, offset + pageSize), count: items.length, pageSize, offset });
};

87
packages/dashboard/src/pages/api/stubs/user/downloads.json
View File

@ -1,43 +1,44 @@
{
"items": [
{
"skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
"name": "ugabuga.pdf",
"size": 123123,
"uploadedOn": "2020-04-02T08:02:17-05:00"
},
{
"skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
"name": "ugabuga.pdf",
"size": 8912739812,
"uploadedOn": "2020-04-02T08:02:17-05:00"
},
{
"skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
"name": "ugabuga.pdf",
"size": 123123,
"uploadedOn": "2020-04-02T08:02:17-05:00"
},
{
"skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
"name": "ugabuga.pdf",
"size": 83943,
"uploadedOn": "2020-04-02T08:02:17-05:00"
},
{
"skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
"name": "ugabuga.pdf",
"size": 3290489120,
"uploadedOn": "2020-04-02T08:02:17-05:00"
},
{
"skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
"name": "ugabuga.pdf",
"size": 1290389,
"uploadedOn": "2020-04-02T08:02:17-05:00"
}
],
"offset": 0,
"pageSize": 10,
"count": 6
}
[
{
"id": 1111,
"skylink": "PAL0w4SdA5rFCDGEutgpeQ50Om-YkBabtXVOJAkmedslKw",
"name": "ugabuga.pdf",
"size": 123123,
"downloadedOn": "2020-04-02T08:02:17-05:00"
},
{
"id": 2222,
"skylink": "XABvi7JtJbQSMAcDwnUnmp2FKDPjg8_tTTFP4BwMSxVdEg",
"name": "ugabuga.pdf",
"size": 8912739812,
"downloadedOn": "2020-04-02T08:02:17-05:00"
},
{
"id": 3333,
"skylink": "IADUs8d9CQjUO34LmdaaNPK_STuZo24rpKVfYW3wPPM2uQ",
"name": "ugabuga.pdf",
"size": 123123,
"downloadedOn": "2020-04-02T08:02:17-05:00"
},
{
"id": 4444,
"skylink": "_A2zt5SKoqwnnZU4cBF8uBycSKULXMyeg1c5ZISBr2Q3dA",
"name": "ugabuga.pdf",
"size": 83943,
"downloadedOn": "2020-04-02T08:02:17-05:00"
},
{
"id": 5555,
"skylink": "AAC0uO43g64ULpyrW0zO3bjEknSFbAhm8c-RFP21EQlmSQ",
"name": "ugabuga.pdf",
"size": 3290489120,
"downloadedOn": "2020-04-02T08:02:17-05:00"
},
{
"id": 6666,
"skylink": "CACqf4NlIMlA0CCCieYGjpViPGyfyJ4v1x3bmuCKZX8FKA",
"name": "ugabuga.pdf",
"size": 1290389,
"downloadedOn": "2020-04-02T08:02:17-05:00"
}
]

8
packages/dashboard/src/pages/api/stubs/user/uploads.js
View File

@ -1,4 +1,8 @@
import items from "./uploads.json";
export default (req, res) => {
res.statusCode = 200;
res.json(require("./uploads.json"));
const offset = parseInt(req.query?.offset ?? 0, 10);
const pageSize = parseInt(req.query?.pageSize ?? 10, 10);
res.json({ items: items.slice(offset, offset + pageSize), count: items.length, pageSize, offset });
};

307
packages/dashboard/src/pages/index.js
View File

@ -1,12 +1,21 @@
import dayjs from "dayjs";
import relativeTime from "dayjs/plugin/relativeTime";
import prettyBytes from "pretty-bytes";
import Link from "next/link";
import useSWR from "swr";
import Layout from "../components/Layout";
dayjs.extend(relativeTime);
const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "";
const fetcher = (url) => fetch(url).then((r) => r.json());
const currentPeriodDownload = Math.floor(Math.random() * 1000000000000) + 1;
const currentPeriodUpload = Math.floor(Math.random() * 1000000000000) + 1;
export default function Home() {
// const { data: user, error } = useSWR("/user", fetcher);
const { data: user } = useSWR("/user", fetcher);
const { data: downloads } = useSWR(`${apiPrefix}/user/downloads?pageSize=3&offset=0`, fetcher);
const { data: uploads } = useSWR(`${apiPrefix}/user/uploads?pageSize=3&offset=0`, fetcher);
return (
<Layout title="Dashboard">
@ -15,7 +24,7 @@ export default function Home() {
<div className="flex flex-col bg-white overflow-hidden shadow rounded-lg">
<div className="flex-grow px-4 py-5 sm:p-6">
<div className="flex items-center">
<div className="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<div className="flex-shrink-0 bg-green-500 rounded-md p-3">
{/* Heroicon name: outline/users */}
<svg
className="h-6 w-6 text-white"
@ -29,7 +38,7 @@ export default function Home() {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"
/>
</svg>
</div>
@ -44,7 +53,7 @@ export default function Home() {
<div className="bg-gray-50 px-4 py-4 sm:px-6">
<div className="text-sm">
<Link href="/payments">
<a className="font-medium text-indigo-600 hover:text-indigo-500">
<a className="font-medium text-green-600 hover:text-green-500">
View current payments<span className="sr-only">Total Subscribers stats</span>
</a>
</Link>
@ -68,31 +77,31 @@ export default function Home() {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
/>
</svg>
</div>
<div className="ml-5 w-0 flex-1">
<dt className="text-sm font-medium text-gray-500 truncate">Current period download</dt>
<dt className="text-sm font-medium text-gray-500 truncate">Storage used</dt>
<dd className="flex items-baseline">
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(189237982173)}</div>
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.storageUsed ?? 0)}</div>
</dd>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-4 sm:px-6">
<div className="text-sm">
{/* <div className="text-sm">
<Link href="/downloads">
<a className="font-medium text-indigo-600 hover:text-indigo-500">View all downloads</a>
<a className="font-medium text-green-600 hover:text-green-500">View all downloads</a>
</Link>
</div>
</div> */}
</div>
</div>
<div className="flex flex-col bg-white overflow-hidden shadow rounded-lg">
<div className="flex-grow px-4 py-5 sm:p-6">
<div className="flex items-center">
<div className="flex-shrink-0 bg-red-500 rounded-md p-3">
<div className="flex-shrink-0 bg-green-500 rounded-md p-3">
{/* Heroicon name: outline/cursor-click */}
<svg
className="h-6 w-6 text-white"
@ -105,24 +114,26 @@ export default function Home() {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
/>
</svg>
</div>
<div className="ml-5 w-0 flex-1">
<dt className="text-sm font-medium text-gray-500 truncate">Current period upload</dt>
<dt className="text-sm font-medium text-gray-500 truncate">Current period usage</dt>
<dd className="flex items-baseline">
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(9237982173)}</div>
<div className="text-2xl font-semibold text-red-600">{prettyBytes(currentPeriodDownload)}</div>
<div className="text-2xl font-semibold text-gray-900 px-1">/</div>
<div className="text-2xl font-semibold text-blue-600">{prettyBytes(currentPeriodUpload)}</div>
</dd>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-4 sm:px-6">
<div className="text-sm">
{/* <div className="text-sm">
<Link href="/uploads">
<a className="font-medium text-indigo-600 hover:text-indigo-500">View all uploads</a>
<a className="font-medium text-green-600 hover:text-green-500">View all uploads</a>
</Link>
</div>
</div> */}
</div>
</div>
</dl>
@ -138,11 +149,12 @@ export default function Home() {
{/* This example requires Tailwind CSS v2.0+ */}
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<ul className="divide-y divide-gray-200">
<li>
<a href="#" className="block hover:bg-gray-50">
{(downloads?.items ?? []).slice(0, 3).map((item) => (
<li key={item.id}>
{/* <a href="#" className="block hover:bg-gray-50"> */}
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
<p className="text-sm font-medium text-green-600 truncate">{item.name || item.skylink}</p>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
@ -159,129 +171,35 @@ export default function Home() {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
/>
</svg>
{prettyBytes(12389128893)}
{prettyBytes(item.size)}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
{/* Heroicon name: solid/calendar */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
className="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<time dateTime="2020-01-07">January 7, 2020</time>
<time dateTime={item.downloadedOn}>{dayjs(item.downloadedOn).fromNow()}</time>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" className="block hover:bg-gray-50">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
{/* Heroicon name: solid/users */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
/>
</svg>
{prettyBytes(1112)}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
{/* Heroicon name: solid/calendar */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
/>
</svg>
<time dateTime="2020-01-07">January 7, 2020</time>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" className="block hover:bg-gray-50">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
{/* Heroicon name: solid/users */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
/>
</svg>
{prettyBytes(4124)}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
{/* Heroicon name: solid/calendar */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
/>
</svg>
<time dateTime="2020-01-07">January 7, 2020</time>
</div>
</div>
</div>
</a>
</li>
{/* </a> */}
</li>
))}
</ul>
</div>
</div>
@ -293,11 +211,12 @@ export default function Home() {
{/* This example requires Tailwind CSS v2.0+ */}
<div className="bg-white shadow overflow-hidden sm:rounded-md">
<ul className="divide-y divide-gray-200">
<li>
<a href="#" className="block hover:bg-gray-50">
{(uploads?.items ?? []).slice(0, 3).map((item) => (
<li key={item.id}>
{/* <a href="#" className="block hover:bg-gray-50"> */}
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
<p className="text-sm font-medium text-green-600 truncate">{item.name || item.skylink}</p>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
@ -314,129 +233,35 @@ export default function Home() {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"
/>
</svg>
{prettyBytes(234674)}
{prettyBytes(item.size)}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
{/* Heroicon name: solid/calendar */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
className="flex-shrink-0 mr-1.5 h-4 w-4 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<time dateTime="2020-01-07">January 7, 2020</time>
<time dateTime={item.uploadedOn}>{dayjs(item.uploadedOn).fromNow()}</time>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" className="block hover:bg-gray-50">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
{/* Heroicon name: solid/users */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
/>
</svg>
{prettyBytes(43215)}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
{/* Heroicon name: solid/calendar */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
/>
</svg>
<time dateTime="2020-01-07">January 7, 2020</time>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" className="block hover:bg-gray-50">
<div className="px-4 py-4 sm:px-6">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">Bitcoin.pdf</p>
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
{/* Heroicon name: solid/users */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
/>
</svg>
{prettyBytes(123)}
</p>
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
{/* Heroicon name: solid/calendar */}
<svg
className="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
aria-hidden="true"
>
<path
fillRule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clipRule="evenodd"
/>
</svg>
<time dateTime="2020-01-07">January 7, 2020</time>
</div>
</div>
</div>
</a>
</li>
{/* </a> */}
</li>
))}
</ul>
</div>
</div>

2
packages/dashboard/src/pages/payments.js
View File

@ -170,7 +170,7 @@ export default function Payments() {
</div>
<div className="ml-4 mt-2 flex-shrink-0">
<Link href="/plans">
<a className="font-medium text-indigo-600 hover:text-indigo-500">help me choose a plan</a>
<a className="font-medium text-green-600 hover:text-green-500">help me choose a plan</a>
</Link>
</div>
</div>

4
packages/dashboard/src/pages/plans.js
View File

@ -13,13 +13,13 @@ export default function Payments() {
<div className="relative self-center mt-6 bg-gray-100 rounded-lg p-0.5 flex sm:mt-8">
<button
type="button"
className="relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"
className="relative w-1/2 bg-white border-gray-200 rounded-md shadow-sm py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-green-500 focus:z-10 sm:w-auto sm:px-8"
>
Monthly billing
</button>
<button
type="button"
className="ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8"
className="ml-0.5 relative w-1/2 border border-transparent rounded-md py-2 text-sm font-medium text-gray-700 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-green-500 focus:z-10 sm:w-auto sm:px-8"
>
Yearly billing
</button>