local-it/dashboard
Archived
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Feat/dashboard modals

Browse source
This commit is contained in:
Valentino 2021-11-02 15:22:53 +00:00 • committed by Tin Geber
parent 88a4367b64
commit c4a8f323e6
18 changed files with 896 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/modules/dashboard/Dashboard.tsx
View file

@ -1,11 +1,12 @@
import React from 'react';
import { Link, navigate, RouteComponentProps } from '@reach/router';
import { Link, RouteComponentProps } from '@reach/router';
import clsx from 'clsx';
import { DASHBOARD_APPS, DASHBOARD_QUICK_ACCESS } from './consts';
import { DashboardCard } from './components';
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">
<div className="max-w-7xl mx-auto py-4 px-3 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>
@ -17,42 +18,15 @@ export const Dashboard: React.FC<RouteComponentProps> = () => {
</li>
</ol>
</nav>
<div className="pb-5 sm:flex sm:items-center sm:justify-between">
<div className="pb-5 border-b border-gray-200 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 className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-3 my-10">
{DASHBOARD_APPS.map((app) => (
<DashboardCard app={app} key={app.name} />
))}
</div>
<div className="max-w-4xl mx-auto py-4 sm:px-6 lg:px-8 h-full flex-grow">

58
src/modules/dashboard/components/DashboardCard/DashboardCard.tsx Normal file
View file

@ -0,0 +1,58 @@
import React, { useState, useEffect } from 'react';
import { navigate } from '@reach/router';
import { Modal } from 'src/components';
import ReactMarkdown from 'react-markdown';
export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
const [readMoreVisible, setReadMoreVisible] = useState(false);
const [content, setContent] = useState('');
const onReadMoreClick = () => setReadMoreVisible(true);
const onReadMoreCloseClick = () => setReadMoreVisible(false);
useEffect(() => {
fetch(app.markdownSrc)
.then((res) => res.text())
.then((md) => {
return setContent(md);
})
.catch(() => {});
}, [app.markdownSrc]);
return (
<>
<div className="bg-white overflow-hidden shadow rounded-lg divide-y divide-gray-100 mb-4 md:mb-0" 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-2.5 py-2.5 sm:px-4 flex justify-end">
<button
type="button"
onClick={onReadMoreClick}
className="mr-3 inline-flex items-center px-2.5 py-1.5 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"
>
Read more
</button>
<button
onClick={() => navigate(`/apps/${app.id}`)}
type="button"
className="inline-flex items-center px-2.5 py-1.5 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>
<Modal open={readMoreVisible} onClose={onReadMoreCloseClick} title={app.name}>
<ReactMarkdown className="prose">{content}</ReactMarkdown>
</Modal>
</>
);
};

1
src/modules/dashboard/components/DashboardCard/index.ts Normal file
View file

@ -0,0 +1 @@
export { DashboardCard } from './DashboardCard';

1
src/modules/dashboard/components/index.ts Normal file
View file

@ -0,0 +1 @@
export { DashboardCard } from './DashboardCard';

4
src/modules/dashboard/consts.ts
View file

@ -14,21 +14,25 @@ export const DASHBOARD_APPS = [
id: 1,
name: 'Nextcloud',
assetSrc: '/assets/nextcloud.svg',
markdownSrc: '/markdown/nextcloud.md',
},
{
id: 2,
name: 'Wekan',
assetSrc: '/assets/wekan.svg',
markdownSrc: '/markdown/wekan.md',
},
{
id: 3,
name: 'Rocketchat',
assetSrc: '/assets/rocketchat.svg',
markdownSrc: '/markdown/rocket.md',
},
{
id: 4,
name: 'Wordpress',
assetSrc: '/assets/wordpress.svg',
markdownSrc: '/markdown/wordpress.md',
},
];