Skip to content

Commit 50bae32

Browse files
vpnuvpnu
authored
Merge pull request #10 from Health-Informatics-UoN/update_components
Update all components to use shadcn
2 parents 43229bf + 9744eaf commit 50bae32

5 files changed

Lines changed: 300 additions & 67 deletions

File tree

‎app/page.tsx‎

Lines changed: 50 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,14 @@ import { useEffect, useState } from "react";
44
import ConceptList from "@/components/ConceptList";
55
import NotesList from "@/components/NotesList";
66
import { Note, Concept } from "@/types/OmopTables";
7+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
8+
import {
9+
Select,
10+
SelectContent,
11+
SelectItem,
12+
SelectTrigger,
13+
SelectValue,
14+
} from "@/components/ui/select";
715

816
export default function Home() {
917
const [concepts, setConcepts] = useState<Concept[]>([]);
@@ -41,29 +49,50 @@ export default function Home() {
4149
};
4250

4351
return (
44-
<div className="min-h-screen bg-gray-100 p-6">
45-
<h1 className="text-3xl font-bold mb-6">Open Case Reports</h1>
46-
47-
<div className="bg-white p-4 rounded-xl shadow mb-6 flex gap-4">
48-
<label className="font-semibold">Domain:</label>
49-
<select
50-
className="border rounded-lg px-3 py-2"
51-
value={domain}
52-
onChange={(e) => setDomain(e.target.value)}
53-
>
54-
<option>All</option>
55-
<option>Condition</option>
56-
<option>Drug</option>
57-
</select>
52+
<div className="min-h-screen bg-muted/40 p-6">
53+
<div className="mb-6">
54+
<h1 className="text-3xl font-bold tracking-tight">Open Case Reports</h1>
55+
<p className="text-muted-foreground">
56+
Browse common terms and find associated Case Reports
57+
</p>
5858
</div>
5959

60-
<div className="grid grid-cols-3 gap-6">
61-
<ConceptList concepts={concepts} onSelect={loadNotes} />
62-
<NotesList
63-
notes={notes}
64-
conceptId={selectedConcept}
65-
conceptName={conceptName}
66-
/>
60+
<Card className="mb-6">
61+
<CardHeader className="pb-3">
62+
<CardTitle className="text-2xl">Filters</CardTitle>
63+
</CardHeader>
64+
65+
<CardContent>
66+
<div className="flex items-center gap-4">
67+
<span className="text-lg font-medium">Domain</span>
68+
69+
<Select value={domain} onValueChange={setDomain}>
70+
<SelectTrigger className="w-[200px]">
71+
<SelectValue placeholder="Select domain" />
72+
</SelectTrigger>
73+
74+
<SelectContent>
75+
<SelectItem value="All">All</SelectItem>
76+
<SelectItem value="Condition">Condition</SelectItem>
77+
<SelectItem value="Drug">Drug</SelectItem>
78+
</SelectContent>
79+
</Select>
80+
</div>
81+
</CardContent>
82+
</Card>
83+
84+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
85+
<Card className="p-0 md:col-span-1">
86+
<ConceptList concepts={concepts} onSelect={loadNotes} />
87+
</Card>
88+
89+
<Card className="p-0 md:col-span-2">
90+
<NotesList
91+
notes={notes}
92+
conceptId={selectedConcept}
93+
conceptName={conceptName}
94+
/>
95+
</Card>
6796
</div>
6897
</div>
6998
);

‎components/ConceptList.tsx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { Concept } from '@/types/OmopTables';
2+
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
3+
import { Button } from "@/components/ui/button";
24

35
export default function ConceptList({
46
concepts,
@@ -8,24 +10,25 @@ export default function ConceptList({
810
onSelect: (id: string) => void;
911
}) {
1012
return (
11-
<div className="bg-white rounded-xl shadow p-4">
12-
<h2 className="text-xl font-semibold mb-4"> Common Search Terms</h2>
13+
<Card className="w-full">
14+
<CardHeader>
15+
<CardTitle className='text-2xl'>Common Search Terms</CardTitle>
16+
</CardHeader>
1317

14-
<ul className="space-y-2">
15-
{concepts.map((c) => (
16-
<li key={c.concept_id}>
17-
<button
18+
<CardContent>
19+
<div className="space-y-2">
20+
{concepts.map((c) => (
21+
<Button
22+
key={c.concept_id}
23+
variant="ghost"
24+
className="w-full justify-between h-auto py-3 px-4"
1825
onClick={() => onSelect(c.concept_id)}
19-
className="w-full text-left px-3 py-2 rounded-md hover:bg-blue-100 focus:bg-slate-100 transition"
2026
>
21-
<div className="flex justify-between">
22-
<span>{c.name}</span>
23-
24-
</div>
25-
</button>
26-
</li>
27-
))}
28-
</ul>
29-
</div>
27+
<span className="text-lg">{c.name}</span>
28+
</Button>
29+
))}
30+
</div>
31+
</CardContent>
32+
</Card>
3033
);
3134
}

‎components/NoteCard.tsx‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,28 +37,27 @@ export default function NoteCard({ note }: { note: Note }) {
3737

3838
<p>
3939
{pmcid && (
40-
<Button variant="outline" size="sm" onClick={loadArticle}>
40+
<Button variant="outline" onClick={loadArticle}>
4141
Go to Article
4242
<ArrowRightIcon />
4343
</Button>
4444
)}
4545
</p>
4646
</CardContent>
4747

48-
<CardFooter>
48+
<CardFooter className="bg-white border-t-gray-200">
4949
<div className="flex flex-wrap gap-2">
5050
{uniqueConcepts.map((c: any) => (
51-
<span
51+
<Badge
52+
variant={"secondary"}
5253
key={c.concept_id}
53-
className={`px-2 py-1 text-xs rounded-md
54+
className={`flex flex-wrap gap-2 text-sm px-4 py-0
5455
${c.domain === "Condition" ? "bg-sky-100" : ""}
5556
${c.domain === "Drug" ? "bg-emerald-100" : ""}
5657
`}
5758
>
58-
<Badge variant="ghost">
59-
{c.concept_name}
60-
</Badge>
61-
</span>
59+
{c.concept_name}
60+
</Badge>
6261
))}
6362
</div>
6463
</CardFooter>

‎components/NotesList.tsx‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
import NoteCard from './NoteCard';
22
import { Note } from '@/types/OmopTables';
3+
import {
4+
Card,
5+
CardContent,
6+
CardHeader,
7+
CardTitle
8+
} from "@/components/ui/card";
39

410
export default function NotesList({
511
notes,
@@ -11,28 +17,32 @@ export default function NotesList({
1117
conceptName: string | null;
1218
}) {
1319
return (
14-
<div className="col-span-2 bg-white rounded-xl shadow p-4">
15-
<h2 className="text-xl font-semibold mb-4">
16-
{conceptId && conceptName
17-
? `Notes for ${conceptName}`
18-
: 'No term selected'}
19-
</h2>
20+
<Card className="col-span-2">
21+
<CardHeader>
22+
<CardTitle className="text-2xl">
23+
{conceptId && conceptName
24+
? `Notes for ${conceptName}`
25+
: 'No term selected'}
26+
</CardTitle>
27+
</CardHeader>
2028

21-
{!conceptId ? (
22-
<div className="text-gray-500 text-center mt-10">
23-
Select a concept from the sidebar to view the associated Case Reports.
24-
</div>
25-
) : notes.length === 0 ? (
26-
<div className="text-gray-500 text-center mt-10">
27-
No notes found for {conceptName}
28-
</div>
29-
) : (
30-
<div className="grid grid-cols-1 gap-4">
31-
{notes.map((note) => (
32-
<NoteCard key={note.note_id} note={note} />
33-
))}
34-
</div>
35-
)}
36-
</div>
29+
<CardContent>
30+
{!conceptId ? (
31+
<div className="text-muted-foreground text-center py-10">
32+
Select a concept from the sidebar to view the associated Case Reports.
33+
</div>
34+
) : notes.length === 0 ? (
35+
<div className="text-muted-foreground text-center py-10">
36+
No notes found for {conceptName}
37+
</div>
38+
) : (
39+
<div className="grid grid-cols-1 gap-4">
40+
{notes.map((note) => (
41+
<NoteCard key={note.note_id} note={note} />
42+
))}
43+
</div>
44+
)}
45+
</CardContent>
46+
</Card>
3747
);
3848
}

0 commit comments

Comments
 (0)