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

move LIT DashboardCard

pull/1/head
Philipp Rothmann 2022-10-26 12:38:43 +02:00
parent 8d1a09e1ca
commit ad3d6f7848
3 changed files with 77 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/dashboard/DashboardLIT.tsx
View File

@ -1,6 +1,6 @@
import React, { useEffect } from 'react';
import { useApps } from 'src/services/apps';
import { DashboardCard } from './components';
import { DashboardCardLIT } from './components/DashboardCard/DashboardCardLIT';
export const DashboardLIT: React.FC = () => {
const { apps, loadApps, appTableLoading } = useApps();
@ -21,7 +21,7 @@ export const DashboardLIT: React.FC = () => {
</div>
<div className="max-w-7xl mx-auto py-4 px-3 sm:px-6 lg:px-8 h-full flex-grow">
<div className="grid grid-cols-1 md:grid-cols-2 md:gap-4 lg:grid-cols-4 mb-10">
{!appTableLoading && apps.map((app) => <DashboardCard app={app} key={app.name} />)}
{!appTableLoading && apps.map((app) => <DashboardCardLIT app={app} key={app.name} />)}
</div>
</div>
</div>

63
src/modules/dashboard/components/DashboardCard/DashboardCard.tsx
View File

@ -1,34 +1,53 @@
import React from 'react';
import { Link } from 'react-router-dom';
import React, { useState, useEffect } from 'react';
import { Modal } from 'src/components';
import ReactMarkdown from 'react-markdown';
export const DashboardCard: React.FC<any> = ({ app }: { app: any }) => {
const url = `/${app.slug}`;
const [readMoreVisible, setReadMoreVisible] = useState(false);
const [content, setContent] = useState('');
const onReadMoreCloseClick = () => setReadMoreVisible(false);
useEffect(() => {
fetch(app.markdownSrc)
.then((res) => res.text())
.then((md) => {
return setContent(md);
})
.catch(() => {});
}, [app.markdownSrc]);
return (
<>
<Link
to={url}
// className="mx-1 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"
>
<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 flex-shrink-0"
src={`/assets/${app.slug}.svg`}
alt={app.name}
/>
<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 flex-shrink-0"
src={app.assetSrc}
alt={app.name}
/>
<div>
<h2 className="text-xl litbutton-card leading-8 font-bold">{app.name}</h2>
</div>
<div>
<h2 className="text-xl leading-8 font-bold">{app.name}</h2>
</div>
</div>
</div>
</Link>
<div className="px-2.5 py-2.5 sm:px-4 flex justify-end">
<a
href={app.url}
target="_blank"
rel="noreferrer"
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"
>
Launch App
</a>
</div>
</div>
<Modal open={readMoreVisible} onClose={onReadMoreCloseClick} title={app.name}>
<ReactMarkdown className="prose">{content}</ReactMarkdown>
</Modal>
</>
);
};

34
src/modules/dashboard/components/DashboardCard/DashboardCardLIT.tsx 100644
View File

@ -0,0 +1,34 @@
import React from 'react';
import { Link } from 'react-router-dom';
export const DashboardCardLIT: React.FC<any> = ({ app }: { app: any }) => {
const url = `/${app.slug}`;
return (
<>
<Link
to={url}
// className="mx-1 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"
>
<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 flex-shrink-0"
src={`/assets/${app.slug}.svg`}
alt={app.name}
/>
<div>
<h2 className="text-xl litbutton-card leading-8 font-bold">{app.name}</h2>
</div>
</div>
</div>
</div>
</Link>
</>
);
};