Upload 7 files

src/app/App.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useNavigate } from 'react-router-dom';
+import AuscultateSvg from './auscultate.svg';
+import EcgSvg from './ecg.svg';
+import CxrSvg from './xray.svg';
+
+const links = [
+  {
+    icon: <img src={AuscultateSvg} />,
+    title: 'Auscultation',
+    description: 'Heart and breath sounds',
+    link: 'https://lysine-auscultate.hf.space/',
+  },
+  {
+    icon: <img src={EcgSvg} />,
+    title: 'ECG',
+    description: 'From the PTB-XL ECG Database',
+    link: 'https://lysine-ecg-db.hf.space/',
+  },
+  {
+    icon: <img src={CxrSvg} />,
+    title: 'Chest X-ray',
+    description: 'From the NIH Chest X-ray Database',
+    link: 'https://lysine-cxr-db.hf.space/',
+  },
+];
+
+export default function App() {
+  const navigate = useNavigate();
+  return (
+    <div className="flex flex-col gap-8 w-full items-center p-4 pt-16">
+      <Helmet>
+        <title>Clinical Database</title>
+      </Helmet>
+      <p className="text-3xl text-center">Clinical Database</p>
+      <p>A series of websites presenting med-related data for practice.</p>
+      <div className="flex flex-col gap-8 items-stretch">
+        {links.map(link => (
+          <div
+            key={link.title}
+            className="card sm:card-side bg-base-300 shadow-xl w-full sm:min-w-[500px]"
+          >
+            <figure className="bg-accent p-4">{link.icon}</figure>
+            <div className="card-body">
+              <h2 className="card-title">{link.title}</h2>
+              <p>{link.description}</p>
+              <div className="card-actions justify-end mt-4">
+                <button
+                  className="btn btn-primary"
+                  onClick={() =>
+                    link.link.startsWith('http')
+                      ? (window.location.href = link.link)
+                      : navigate(link.link)
+                  }
+                >
+                  Enter
+                </button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/app/globals.css

@@ -0,0 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/app/main.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import './globals.css';
+import App from './App';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+  },
+]);
+
+const container = document.querySelector('#root');
+const root = createRoot(container!);
+root.render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);