Skip to content

Commit 802bb7b

Browse files
MananTankMananTank
committed
Dashboard: Team Overview page UI improvements
1 parent 9fec4cc commit 802bb7b

File tree

4 files changed

+194
-151
lines changed

4 files changed

+194
-151
lines changed

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

Lines changed: 66 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,93 @@
1+
import { Img } from "@/components/blocks/Img";
2+
import { Button } from "@/components/ui/button";
13
import { formatDistance } from "date-fns";
2-
import { ArrowRightIcon } from "lucide-react";
4+
import { ArrowRightIcon, FileTextIcon } from "lucide-react";
35
import { unstable_cache } from "next/cache";
46
import Link from "next/link";
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+
variant="outline"
33+
className="gap-2 rounded-full bg-card"
34+
>
35+
<Link
36+
href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
37+
target="_blank"
38+
rel="noopener noreferrer"
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+
src={item.feature_image}
53+
fallback={
54+
<div className="flex items-center justify-center bg-gradient-to-b from-card to-accent">
55+
<div className="rounded-full border p-3">
56+
<FileTextIcon className="size-5 text-muted-foreground" />
57+
</div>
58+
</div>
59+
}
60+
className="aspect-video w-full object-cover"
61+
alt={item.title}
62+
/>
2063

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

5087
const getChangelog = unstable_cache(
5188
async () => {
5289
const res = await fetch(
53-
"https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at&filter=tag:changelog&visibility:public&limit=10",
90+
"https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at,feature_image&filter=tag:changelog&visibility:public&limit=12",
5491
);
5592
if (!res.ok) {
5693
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 Link from "next/link";
66

77
export function InviteTeamMembersButton(props: { teamSlug: string }) {
88
return (
9-
<Button asChild variant="outline" className="gap-2">
9+
<Button asChild variant="outline" className="gap-2 rounded-full bg-card">
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-
teamSlug={team.slug}
62-
highlightPlan="growth"
63-
/>
64-
) : (
65-
<DismissibleAlert
66-
title="Looking for Engines?"
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-
/>
70-
)}
56+
<div className="container flex max-w-6xl flex-col gap-10 py-6 pb-20">
57+
<TeamProjectsPage
58+
projects={projectsWithTotalWallets}
59+
team={team}
60+
client={client}
61+
/>
7162

72-
<TeamProjectsPage
73-
projects={projectsWithTotalWallets}
74-
team={team}
75-
client={client}
63+
{team.billingPlan === "free" ? (
64+
<FreePlanUpsellBannerUI teamSlug={team.slug} highlightPlan="growth" />
65+
) : (
66+
<DismissibleAlert
67+
title="Looking for Engines?"
68+
description="Engines, contracts, project settings, and more are now managed within projects. Open or create a project to access them."
69+
localStorageId={`${team.id}-engines-alert`}
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)