src/modules/dashboard/DashboardLIT.tsx

@@ -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>

src/modules/dashboard/components/DashboardCard/DashboardCard.tsx

@@ -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="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`}
+              src={app.assetSrc}
               alt={app.name}
             />
 
             <div>
-                <h2 className="text-xl litbutton-card leading-8 font-bold">{app.name}</h2>
+              <h2 className="text-xl leading-8 font-bold">{app.name}</h2>
             </div>
           </div>
         </div>
+        <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>
-      </Link>
+      </div>
+
+      <Modal open={readMoreVisible} onClose={onReadMoreCloseClick} title={app.name}>
+        <ReactMarkdown className="prose">{content}</ReactMarkdown>
+      </Modal>
     </>
   );
 };

src/modules/dashboard/components/DashboardCard/DashboardCardLIT.tsx

@@ -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>
+    </>
+  );
+};