Openstatus
www.openstatus.dev
chore: improve style of external cards (#753)
authored by
Maximilian Kaske
and committed by
GitHub
8a41736e
d919be99
+36
-48
+17
-23
apps/web/src/app/oss-friends/page.tsx
+17
-23
apps/web/src/app/oss-friends/page.tsx
···
1
1
import Link from "next/link";
2
+
import { ArrowUpRight } from "lucide-react";
2
3
import { z } from "zod";
3
4
4
5
import {
···
29
30
</h1>
30
31
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
31
32
{openSourceFriends.map((friend) => (
32
-
<Card key={friend.name} className="group flex flex-col">
33
-
<CardHeader className="flex-1">
34
-
<div className="flex items-center gap-2">
35
-
<CardTitle>
36
-
<Link
37
-
href={friend.href}
38
-
target="_blank"
39
-
className="group-hover:underline"
40
-
>
41
-
{friend.name}
42
-
</Link>
43
-
</CardTitle>
44
-
</div>
45
-
<CardDescription>{friend.description}</CardDescription>
46
-
</CardHeader>
47
-
<CardFooter>
48
-
<div className="flex items-center gap-2.5">
49
-
<Link href={friend.href} target="_blank">
50
-
<Icons.globe className="text-muted-foreground hover:text-foreground h-5 w-5" />
51
-
</Link>
52
-
</div>
53
-
</CardFooter>
54
-
</Card>
33
+
<Link
34
+
key={friend.name}
35
+
href={friend.href}
36
+
target="_blank"
37
+
className="group flex w-full flex-1"
38
+
>
39
+
<Card className="flex w-full flex-col">
40
+
<CardHeader className="flex-1">
41
+
<CardTitle>{friend.name}</CardTitle>
42
+
<div className="flex flex-1 justify-between gap-3">
43
+
<CardDescription>{friend.description}</CardDescription>
44
+
<ArrowUpRight className="text-muted-foreground group-hover:text-foreground h-5 w-5 shrink-0 self-end" />
45
+
</div>
46
+
</CardHeader>
47
+
</Card>
48
+
</Link>
55
49
))}
56
50
</div>
57
51
</MarketingLayout>
+19
-25
apps/web/src/app/status/page.tsx
+19
-25
apps/web/src/app/status/page.tsx
···
1
1
import type { Metadata } from "next";
2
2
import Link from "next/link";
3
+
import { ArrowUpRight } from "lucide-react";
3
4
4
5
import {
5
6
Card,
···
49
50
</div>
50
51
<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
51
52
{externalStatus.map((status) => (
52
-
<Card key={status.name} className="group flex flex-col">
53
-
<CardHeader className="flex-1">
54
-
<div className="flex items-center gap-2">
55
-
<CardTitle>
56
-
<Link
57
-
href={status.url}
58
-
target="_blank"
59
-
className="group-hover:underline"
60
-
>
61
-
{status.name}
62
-
</Link>
63
-
</CardTitle>
64
-
</div>
65
-
<CardDescription className={getClassname(status)}>
66
-
{status.status_description}
67
-
</CardDescription>
68
-
</CardHeader>
69
-
<CardFooter>
70
-
<div className="flex items-center gap-2.5">
71
-
<Link href={status.url} target="_blank">
72
-
<Icons.globe className="text-muted-foreground hover:text-foreground h-5 w-5" />
73
-
</Link>
74
-
</div>
75
-
</CardFooter>
76
-
</Card>
53
+
<Link
54
+
key={status.name}
55
+
href={status.url}
56
+
target="_blank"
57
+
className="group flex w-full flex-1"
58
+
>
59
+
<Card className="flex w-full flex-col">
60
+
<CardHeader className="flex-1">
61
+
<CardTitle>{status.name}</CardTitle>
62
+
<div className="flex flex-1 justify-between gap-3">
63
+
<CardDescription className={getClassname(status)}>
64
+
{status.status_description}
65
+
</CardDescription>
66
+
<ArrowUpRight className="text-muted-foreground group-hover:text-foreground h-5 w-5 shrink-0 self-end" />
67
+
</div>
68
+
</CardHeader>
69
+
</Card>
70
+
</Link>
77
71
))}
78
72
</div>
79
73
</MarketingLayout>