Skip to content

Commit df650f4

Browse files
jonsch1jonsch1
committed
improved partners page
1 parent 8fb990b commit df650f4

File tree

3 files changed

+245
-50
lines changed

3 files changed

+245
-50
lines changed

‎src/components/ui/table.tsx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import * as React from "react"
2+
3+
import { cn } from "@/lib/utils"
4+
5+
function Table({ className, ...props }: React.ComponentProps<"table">) {
6+
return (
7+
<div
8+
data-slot="table-container"
9+
className="relative w-full overflow-x-auto"
10+
>
11+
<table
12+
data-slot="table"
13+
className={cn("w-full caption-bottom text-sm", className)}
14+
{...props}
15+
/>
16+
</div>
17+
)
18+
}
19+
20+
function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
21+
return (
22+
<thead
23+
data-slot="table-header"
24+
className={cn("[&_tr]:border-b", className)}
25+
{...props}
26+
/>
27+
)
28+
}
29+
30+
function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
31+
return (
32+
<tbody
33+
data-slot="table-body"
34+
className={cn("[&_tr:last-child]:border-0", className)}
35+
{...props}
36+
/>
37+
)
38+
}
39+
40+
function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
41+
return (
42+
<tfoot
43+
data-slot="table-footer"
44+
className={cn(
45+
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
46+
className
47+
)}
48+
{...props}
49+
/>
50+
)
51+
}
52+
53+
function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
54+
return (
55+
<tr
56+
data-slot="table-row"
57+
className={cn(
58+
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
59+
className
60+
)}
61+
{...props}
62+
/>
63+
)
64+
}
65+
66+
function TableHead({ className, ...props }: React.ComponentProps<"th">) {
67+
return (
68+
<th
69+
data-slot="table-head"
70+
className={cn(
71+
"text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
72+
className
73+
)}
74+
{...props}
75+
/>
76+
)
77+
}
78+
79+
function TableCell({ className, ...props }: React.ComponentProps<"td">) {
80+
return (
81+
<td
82+
data-slot="table-cell"
83+
className={cn(
84+
"p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
85+
className
86+
)}
87+
{...props}
88+
/>
89+
)
90+
}
91+
92+
function TableCaption({
93+
className,
94+
...props
95+
}: React.ComponentProps<"caption">) {
96+
return (
97+
<caption
98+
data-slot="table-caption"
99+
className={cn("text-muted-foreground mt-4 text-sm", className)}
100+
{...props}
101+
/>
102+
)
103+
}
104+
105+
export {
106+
Table,
107+
TableHeader,
108+
TableBody,
109+
TableFooter,
110+
TableHead,
111+
TableRow,
112+
TableCell,
113+
TableCaption,
114+
}

‎src/content/partners/partners.json‎

Lines changed: 88 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,93 @@
11
{
22
"collaborators": [
3-
"Ruedi Aebersold, ETH Zurich",
4-
"Leonidas G. Alexopoulos, National Technical University of Athens",
5-
"Eduardo Villablanca, Karolinska Institute",
6-
"Bernd Bodenmiller, University of Zurich",
7-
"Julio Banga, (Bio)Process Engineering Group, CSIC",
8-
"Pedro Beltrao, EMBL-EBI",
9-
"CoLoMoTo Consortium, in particular Claudine Chaouiya, Denis Thieffry, Tomas Helikar, and Laurence Calzone",
10-
"Thorsten Cramer, RWTH Aachen",
11-
"Christian Frezza, MRC – Cambridge",
12-
"DREAM Challenges, in particular Gustavo Stolovitzky",
13-
"Mathew Garnett and Ultan McDermott, Sanger Institute",
14-
"Steffen Klamt, Max Planck Institute",
15-
"Tamás Korcsmáros, Earlham Institute and Institute of Food Research",
16-
"Rafael Kramann, RWTH Aachen",
17-
"Douglas Lauffenburger, Massachusetts Institute of Technology",
18-
"Christoph Merten, EMBL / EPFL",
19-
"Alexander Mitsos, RTWH Aachen, Germany",
20-
"Rainer Pepperkok, EMBL",
21-
"Miguel Rocha, University of Minho",
22-
"Anne Siegel, INRIA/IRISA",
23-
"Peter K. Sorger, Harvard Medical School",
24-
"Oliver Stegle, EMBL / DKFZ"
3+
{
4+
"name": "Ruedi Aebersold",
5+
"institution": "ETH Zurich"
6+
},
7+
{
8+
"name": "Leonidas G. Alexopoulos",
9+
"institution": "National Technical University of Athens"
10+
},
11+
{
12+
"name": "Eduardo Villablanca",
13+
"institution": "Karolinska Institute"
14+
},
15+
{
16+
"name": "Bernd Bodenmiller",
17+
"institution": "University of Zurich"
18+
},
19+
{
20+
"name": "Julio Banga",
21+
"institution": "(Bio)Process Engineering Group, CSIC"
22+
},
23+
{
24+
"name": "Pedro Beltrao",
25+
"institution": "EMBL-EBI"
26+
},
27+
{
28+
"name": "CoLoMoTo Consortium",
29+
"institution": "in particular Claudine Chaouiya, Denis Thieffry, Tomas Helikar, and Laurence Calzone"
30+
},
31+
{
32+
"name": "Thorsten Cramer",
33+
"institution": "RWTH Aachen"
34+
},
35+
{
36+
"name": "Christian Frezza",
37+
"institution": "MRC – Cambridge"
38+
},
39+
{
40+
"name": "DREAM Challenges",
41+
"institution": "in particular Gustavo Stolovitzky"
42+
},
43+
{
44+
"name": "Mathew Garnett and Ultan McDermott",
45+
"institution": "Sanger Institute"
46+
},
47+
{
48+
"name": "Steffen Klamt",
49+
"institution": "Max Planck Institute"
50+
},
51+
{
52+
"name": "Tamás Korcsmáros",
53+
"institution": "Earlham Institute and Institute of Food Research"
54+
},
55+
{
56+
"name": "Rafael Kramann",
57+
"institution": "RWTH Aachen"
58+
},
59+
{
60+
"name": "Douglas Lauffenburger",
61+
"institution": "Massachusetts Institute of Technology"
62+
},
63+
{
64+
"name": "Christoph Merten",
65+
"institution": "EMBL / EPFL"
66+
},
67+
{
68+
"name": "Alexander Mitsos",
69+
"institution": "RTWH Aachen, Germany"
70+
},
71+
{
72+
"name": "Rainer Pepperkok",
73+
"institution": "EMBL"
74+
},
75+
{
76+
"name": "Miguel Rocha",
77+
"institution": "University of Minho"
78+
},
79+
{
80+
"name": "Anne Siegel",
81+
"institution": "INRIA/IRISA"
82+
},
83+
{
84+
"name": "Peter K. Sorger",
85+
"institution": "Harvard Medical School"
86+
},
87+
{
88+
"name": "Oliver Stegle",
89+
"institution": "EMBL / DKFZ"
90+
}
2591
],
2692
"funding": [
2793
{

‎src/pages/partners.astro‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,69 @@
11
---
22
import Layout from '../layouts/Layout.astro';
33
import partnersData from '../content/partners/partners.json';
4+
import { Separator } from '../components/ui/separator';
5+
import {
6+
Table,
7+
TableBody,
8+
TableCaption,
9+
TableCell,
10+
TableHead,
11+
TableHeader,
12+
TableRow,
13+
} from '../components/ui/table';
414
---
515

616
<Layout title="Partners">
717
<div class="container py-6 md:py-12">
818
<div class="mx-auto max-w-[980px]">
9-
<h1 class="mb-4 text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
19+
<h1 class="mb-2 text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
1020
Partners
1121
</h1>
12-
<p class="max-w-[750px] text-lg text-muted-foreground sm:text-xl">
22+
<p class="text-muted-foreground">
1323
Our collaborators and funding partners
1424
</p>
1525
</div>
1626

17-
<div class="mx-auto max-w-[980px] py-6 md:py-12">
18-
<h2 class="mb-8 text-2xl font-bold">Collaborators</h2>
19-
<p class="mb-4 text-muted-foreground">
20-
We are thankful to our present and past collaborators, including (in alphabetic order):
27+
<Separator className="my-6" />
28+
29+
<div class="mx-auto max-w-[980px]">
30+
<h2 class="mb-4 text-2xl font-bold">Collaborators</h2>
31+
<p class="mb-4 text-sm text-muted-foreground">
32+
We are thankful to our present and past collaborators, including:
2133
</p>
22-
<div class="grid gap-4">
34+
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
2335
{partnersData.collaborators.map((collaborator) => (
24-
<div class="rounded-lg border p-4">
25-
<p class="text-muted-foreground">{collaborator}</p>
36+
<div class="rounded-lg border bg-card p-4 shadow-sm transition-colors hover:bg-muted/50">
37+
<p class="font-medium">{collaborator.name}</p>
38+
<p class="text-sm text-muted-foreground">{collaborator.institution}</p>
2639
</div>
2740
))}
2841
</div>
2942
</div>
3043

31-
<div class="mx-auto max-w-[980px] py-6 md:py-12">
32-
<h2 class="mb-8 text-2xl font-bold">Funding</h2>
33-
<div class="overflow-x-auto">
34-
<table class="w-full">
35-
<thead>
36-
<tr class="border-b">
37-
<th class="px-4 py-2 text-left">Duration</th>
38-
<th class="px-4 py-2 text-left">Name</th>
39-
<th class="px-4 py-2 text-left">Agency</th>
40-
</tr>
41-
</thead>
42-
<tbody>
44+
<Separator className="my-6" />
45+
46+
<div class="mx-auto max-w-[980px]">
47+
<h2 class="mb-4 text-2xl font-bold">Funding</h2>
48+
<div class="rounded-md border">
49+
<Table>
50+
<TableHeader>
51+
<TableRow>
52+
<TableHead>Agency</TableHead>
53+
<TableHead>Duration</TableHead>
54+
<TableHead>Name</TableHead>
55+
</TableRow>
56+
</TableHeader>
57+
<TableBody>
4358
{partnersData.funding.map((grant) => (
44-
<tr class="border-b">
45-
<td class="px-4 py-2">{grant.duration}</td>
46-
<td class="px-4 py-2">{grant.name}</td>
47-
<td class="px-4 py-2">{grant.agency}</td>
48-
</tr>
59+
<TableRow>
60+
<TableCell>{grant.agency}</TableCell>
61+
<TableCell>{grant.duration}</TableCell>
62+
<TableCell>{grant.name}</TableCell>
63+
</TableRow>
4964
))}
50-
</tbody>
51-
</table>
65+
</TableBody>
66+
</Table>
5267
</div>
5368
</div>
5469
</div>

0 commit comments

Comments
 (0)