File size: 2,036 Bytes
ac0337f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
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>
);
}
|