86 lines
3.8 KiB
TypeScript
86 lines
3.8 KiB
TypeScript
import React from 'react';
|
|
import { Link, navigate, RouteComponentProps } from '@reach/router';
|
|
import clsx from 'clsx';
|
|
import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts';
|
|
|
|
export const Dashboard: React.FC<RouteComponentProps> = () => {
|
|
return (
|
|
<div className="max-w-7xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
|
|
<nav className="flex mb-8" aria-label="Breadcrumb">
|
|
<ol className="flex items-center space-x-4">
|
|
<li>
|
|
<div className="flex items-center">
|
|
<a href="#" className="text-sm font-medium text-gray-500 hover:text-gray-700">
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
<div className="pb-5 sm:flex sm:items-center sm:justify-between">
|
|
<h1 className="text-3xl leading-6 font-bold text-gray-900">Dashboard</h1>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-3 gap-4 my-10">
|
|
{DASHBOARD_APPS.map((app) => {
|
|
return (
|
|
<div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100" key={app.name}>
|
|
<div className="px-4 py-5 sm:p-6">
|
|
<div className="mr-4 flex items-center">
|
|
<img className="h-16 w-16 rounded-md overflow-hidden mr-4" src={app.assetSrc} alt="Nextcloud" />
|
|
|
|
<div>
|
|
<h2 className="text-2xl leading-8 font-bold">{app.name}</h2>
|
|
<div className="text-sm leading-5 font-medium text-gray-500">Installed on August 25, 2020</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="px-4 py-4 sm:px-6 flex justify-end">
|
|
<button
|
|
type="button"
|
|
className="mr-3 inline-flex items-center px-4 py-2 border border-gray-200 shadow-sm text-sm 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-primary-500 justify-center"
|
|
>
|
|
View Documentation
|
|
</button>
|
|
<button
|
|
onClick={() => navigate(`/apps/${app.id}`)}
|
|
type="button"
|
|
className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
|
|
>
|
|
Configure
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="max-w-4xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">
|
|
<div className="pb-4 border-b border-gray-200 sm:flex sm:items-center">
|
|
<h3 className="text-lg leading-6 font-medium text-gray-900">Quick access</h3>
|
|
</div>
|
|
|
|
<dl className="mt-5 grid grid-cols-1 gap-2 sm:grid-cols-2">
|
|
{DASHBOARD_QUICK_ACCESS.map((item) => (
|
|
<Link
|
|
to={item.to}
|
|
key={item.name}
|
|
className={clsx('bg-white rounded-lg overflow-hidden sm:p-2 flex items-center group', {
|
|
'opacity-40 cursor-default': !item.active,
|
|
})}
|
|
>
|
|
<div className="w-16 h-16 flex items-center justify-center bg-primary-100 group-hover:bg-primary-200 transition-colors rounded-lg mr-4">
|
|
<item.icon className="h-6 w-6 text-primary-900" aria-hidden="true" />
|
|
</div>
|
|
<div>
|
|
<dt className="truncate text-sm leading-5 font-medium">{item.name}</dt>
|
|
<dd className="mt-1 text-gray-500 text-sm leading-5 font-normal">{item.description}</dd>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|