Skip to content

Commit 22cf185

Browse files
MananTankMananTank
committed
Dashboard: Team Overview page UI improvements
1 parent 6fd630a commit 22cf185

File tree

4 files changed

+214
-169
lines changed

4 files changed

+214
-169
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/Changelog.tsx‎

Lines changed: 65 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,92 @@
11
import { formatDistance } from "date-fns";
2-
import { ArrowRightIcon } from "lucide-react";
2+
import { ArrowRightIcon, FileTextIcon } from "lucide-react";
33
import { unstable_cache } from "next/cache";
44
import Link from "next/link";
5+
import { Img } from "@/components/blocks/Img";
6+
import { Button } from "@/components/ui/button";
57

68
type ChangelogItem = {
79
published_at: string;
810
title: string;
911
url: string;
12+
feature_image: string;
1013
};
1114

1215
export async function Changelog() {
1316
const changelog = await getChangelog();
1417

1518
return (
16-
<div className="relative flex flex-col gap-6 border-border border-l py-2">
17-
{changelog.map((item) => (
18-
<div className="flex flex-row gap-2" key={item.title}>
19-
<div className="-translate-x-1/2 size-2.5 shrink-0 translate-y-1/2 rounded-full bg-border" />
19+
<div className="relative flex grow flex-col">
20+
<div className="mb-4 flex items-center justify-between gap-4">
21+
<div>
22+
<h2 className="mb-1 font-semibold text-2xl tracking-tight">
23+
Changelog
24+
</h2>
25+
<p className="text-muted-foreground text-sm">
26+
View the latest updates to thirdweb products and services
27+
</p>
28+
</div>
29+
30+
<Button
31+
asChild
32+
className="gap-2 rounded-full bg-card"
33+
variant="outline"
34+
>
35+
<Link
36+
href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
37+
rel="noopener noreferrer"
38+
target="_blank"
39+
>
40+
View All <ArrowRightIcon className="size-4" />
41+
</Link>
42+
</Button>
43+
</div>
44+
45+
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
46+
{changelog.map((item) => (
47+
<div
48+
className="relative overflow-hidden rounded-xl border bg-card hover:border-active-border"
49+
key={item.title}
50+
>
51+
<Img
52+
alt={item.title}
53+
className="aspect-video w-full object-cover"
54+
fallback={
55+
<div className="flex items-center justify-center bg-gradient-to-b from-card to-accent">
56+
<div className="rounded-full border p-3">
57+
<FileTextIcon className="size-5 text-muted-foreground" />
58+
</div>
59+
</div>
60+
}
61+
src={item.feature_image}
62+
/>
2063

21-
<div className="flex flex-col">
22-
<Link
23-
className="line-clamp-2 text-foreground text-sm hover:underline"
24-
href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
25-
target="_blank"
26-
>
27-
{item.title}
28-
</Link>
29-
<div className="mt-1 text-muted-foreground text-xs">
30-
{formatDistance(new Date(item.published_at), Date.now(), {
31-
addSuffix: true,
32-
})}
64+
<div className="border-t px-3 py-4">
65+
<Link
66+
className="mb-2 line-clamp-2 font-medium text-base text-foreground before:absolute before:inset-0"
67+
href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
68+
target="_blank"
69+
>
70+
{item.title}
71+
</Link>
72+
73+
<div className="text-muted-foreground text-sm">
74+
{formatDistance(new Date(item.published_at), Date.now(), {
75+
addSuffix: true,
76+
})}
77+
</div>
3378
</div>
3479
</div>
35-
</div>
36-
))}
37-
<Link
38-
className="flex items-center gap-2 pl-5 text-foreground text-sm hover:underline"
39-
href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
40-
rel="noopener noreferrer"
41-
target="_blank"
42-
>
43-
View More <ArrowRightIcon className="size-4" />
44-
</Link>
80+
))}
81+
</div>
4582
</div>
4683
);
4784
}
4885

4986
const getChangelog = unstable_cache(
5087
async () => {
5188
const res = await fetch(
52-
"https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at&filter=tag:changelog&visibility:public&limit=10",
89+
"https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at,feature_image&filter=tag:changelog&visibility:public&limit=12",
5390
);
5491
if (!res.ok) {
5592
return [];

‎apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/invite-team-members-button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
66

77
export function InviteTeamMembersButton(props: { teamSlug: string }) {
88
return (
9-
<Button asChild className="gap-2" variant="outline">
9+
<Button asChild className="gap-2 rounded-full bg-card" variant="outline">
1010
<Link href={`/team/${props.teamSlug}/~/settings/members`}>
1111
<UserPlusIcon className="size-4" />
1212
<span>Invite Team Members</span>

‎apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx‎

Lines changed: 16 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export default async function Page(props: {
4343
return (
4444
<div className="flex grow flex-col">
4545
<div className="border-border border-b">
46-
<div className="container flex flex-col items-start gap-3 py-10 md:flex-row md:items-center">
46+
<div className="container flex max-w-6xl flex-col items-start gap-3 py-10 md:flex-row md:items-center">
4747
<div className="flex-1">
4848
<h1 className="font-semibold text-3xl tracking-tight">
4949
Team Overview
@@ -53,37 +53,24 @@ export default async function Page(props: {
5353
</div>
5454
</div>
5555

56-
<div className="container flex grow flex-col gap-4 lg:flex-row">
57-
{/* left */}
58-
<div className="flex grow flex-col gap-6 pt-8 lg:pb-20">
59-
{team.billingPlan === "free" ? (
60-
<FreePlanUpsellBannerUI
61-
highlightPlan="growth"
62-
teamSlug={team.slug}
63-
/>
64-
) : (
65-
<DismissibleAlert
66-
description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
67-
localStorageId={`${team.id}-engines-alert`}
68-
title="Looking for Engines?"
69-
/>
70-
)}
56+
<div className="container flex max-w-6xl flex-col gap-10 py-6 pb-20">
57+
<TeamProjectsPage
58+
client={client}
59+
projects={projectsWithTotalWallets}
60+
team={team}
61+
/>
7162

72-
<TeamProjectsPage
73-
client={client}
74-
projects={projectsWithTotalWallets}
75-
team={team}
63+
{team.billingPlan === "free" ? (
64+
<FreePlanUpsellBannerUI highlightPlan="growth" teamSlug={team.slug} />
65+
) : (
66+
<DismissibleAlert
67+
description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
68+
localStorageId={`${team.id}-engines-alert`}
69+
title="Looking for Engines?"
7670
/>
77-
</div>
78-
79-
{/* right */}
80-
<div className="w-full px-4 py-8 lg:w-[300px]">
81-
<h2 className="mb-3 font-semibold text-2xl tracking-tight">
82-
Changelog
83-
</h2>
71+
)}
8472

85-
<Changelog />
86-
</div>
73+
<Changelog />
8774
</div>
8875
</div>
8976
);

0 commit comments

Comments
 (0)