Skip to content

Commit 642b793

Browse files
gregfromstlgregfromstl
committed
feat: overview page empty state
1 parent 5c2fe80 commit 642b793

File tree

10 files changed

+287
-5
lines changed

10 files changed

+287
-5
lines changed

‎apps/dashboard/public/assets/tw-icons/account-abstraction.svg‎

Lines changed: 26 additions & 0 deletions
Loading

‎apps/dashboard/public/assets/tw-icons/auth.svg‎

Lines changed: 27 additions & 0 deletions
Loading

‎apps/dashboard/public/assets/tw-icons/pay.svg‎

Lines changed: 31 additions & 0 deletions
Loading

‎apps/dashboard/public/assets/tw-icons/social-auth.svg‎

Lines changed: 30 additions & 0 deletions
Loading

‎apps/dashboard/public/assets/tw-icons/wallets.svg‎

Lines changed: 28 additions & 0 deletions
Loading

‎apps/dashboard/src/@/styles/globals.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
:root,
77
[data-theme="light"] {
88
/* bg - neutral */
9-
--background: 0 0% 100%;
9+
--background: 0 0% 98%;
1010
--popover: 0 0% 100%;
1111
--card: 0 0% 100%;
1212
--secondary: 0 0% 92%;

‎apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/EmptyState.tsx‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import { Button } from "@/components/ui/button";
2+
import { DotNetIcon } from "components/icons/brand-icons/DotNetIcon";
3+
import { ReactIcon } from "components/icons/brand-icons/ReactIcon";
4+
import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
5+
import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
6+
import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
7+
import { DocLink } from "components/shared/DocLink";
8+
import { ArrowRightIcon } from "lucide-react";
9+
import authIcon from "../../../../../../public/assets/tw-icons/auth.svg";
10+
import accountAbstractionIcon from "../../../../../../public/assets/tw-icons/account-abstraction.svg";
11+
import payIcon from "../../../../../../public/assets/tw-icons/pay.svg";
12+
import walletsIcon from "../../../../../../public/assets/tw-icons/wallets.svg";
13+
import socialAuthIcon from "../../../../../../public/assets/tw-icons/social-auth.svg";
14+
import Image, { StaticImageData } from "next/image";
15+
import { cn } from "@/lib/utils";
16+
17+
export function EmptyState() {
18+
return (
19+
<div className="md:h-[770px] py-24 p-6 container flex items-center justify-center">
20+
<div className="flex-col gap-8 flex items-center group justify-center">
21+
<div className="flex flex-col gap-6 max-w-[500px] justify-center items-center">
22+
<AnimatedIcons />
23+
<div className="text-center flex flex-col gap-0.5">
24+
<h3 className="text-2xl font-semibold text-foreground">
25+
Get started with the Connect SDK
26+
</h3>
27+
<p className="text-muted-foreground text-base">
28+
Add the Connect SDK to your app to start collecting analytics.
29+
</p>
30+
</div>
31+
<div className="flex flex-wrap gap-2 justify-center items-center">
32+
<SDKBadge
33+
icon={TypeScriptIcon}
34+
label="TypeScript"
35+
href="https://portal.thirdweb.com/typescript/v5/inAppWallet"
36+
/>
37+
<SDKBadge
38+
icon={ReactIcon}
39+
label="React"
40+
href="https://portal.thirdweb.com/react/v5/in-app-wallet/get-started"
41+
/>
42+
<SDKBadge
43+
icon={ReactIcon}
44+
label="React Native"
45+
href="https://portal.thirdweb.com/react/v5/in-app-wallet/get-started"
46+
/>
47+
<SDKBadge
48+
icon={UnityIcon}
49+
label="Unity"
50+
href="https://portal.thirdweb.com/unity/v5/wallets/in-app-wallet"
51+
/>
52+
<SDKBadge
53+
icon={UnrealIcon}
54+
label="Unreal"
55+
href="https://portal.thirdweb.com/unreal-engine/getting-started"
56+
/>
57+
<SDKBadge
58+
icon={DotNetIcon}
59+
label=".NET"
60+
href="https://portal.thirdweb.com/flutter/v5/in-app-wallet/get-started"
61+
/>
62+
</div>
63+
</div>
64+
<div className="flex gap-2">
65+
<Button variant="outline">View Docs</Button>
66+
<Button variant="primary">
67+
Get Started
68+
<ArrowRightIcon className="size-4 ml-2" />
69+
</Button>
70+
</div>
71+
</div>
72+
</div>
73+
);
74+
}
75+
76+
function AnimatedIcons() {
77+
return (
78+
<div className="flex -space-x-2">
79+
<Icon
80+
icon={walletsIcon}
81+
className="z-[0] -rotate-[16deg] group-hover:-rotate-[32deg] scale-1 group-hover:scale-[1.2] translate-x-[0px] group-hover:-translate-x-[44px] translate-y-[0px] group-hover:-translate-y-[12px]"
82+
/>
83+
<Icon
84+
icon={payIcon}
85+
className="z-[1] -rotate-[12deg] group-hover:-rotate-[24deg] scale-1 group-hover:scale-[1.2] translate-x-[0px] group-hover:-translate-x-[28px] -translate-y-[12px] group-hover:-translate-y-[40px]"
86+
/>
87+
<Icon
88+
icon={authIcon}
89+
className="z-[2] scale-1 group-hover:scale-[1.2] -translate-y-[16px] group-hover:-translate-y-[52px]"
90+
/>
91+
<Icon
92+
icon={accountAbstractionIcon}
93+
className="z-[1] rotate-[12deg] group-hover:rotate-[24deg] scale-1 group-hover:scale-[1.2] translate-x-[0px] group-hover:translate-x-[28px] -translate-y-[12px] group-hover:-translate-y-[40px]"
94+
/>
95+
<Icon
96+
icon={socialAuthIcon}
97+
className="z-[0] rotate-[16deg] group-hover:rotate-[32deg] scale-1 group-hover:scale-[1.2] translate-x-[0px] group-hover:translate-x-[44px] translate-y-[0px] group-hover:-translate-y-[12px]"
98+
/>
99+
</div>
100+
);
101+
}
102+
103+
function Icon({
104+
icon,
105+
className,
106+
}: {
107+
icon: StaticImageData;
108+
className?: string;
109+
}) {
110+
return (
111+
<div
112+
className={cn(
113+
"border rounded-xl size-10 flex items-center justify-center bg-background transition-all duration-200 ease-in-out",
114+
className,
115+
)}
116+
>
117+
<Image
118+
src={icon}
119+
alt=""
120+
width={24}
121+
height={24}
122+
className="rounded-full"
123+
/>
124+
</div>
125+
);
126+
}
127+
128+
function SDKBadge({
129+
icon,
130+
label,
131+
href,
132+
}: { icon: React.FC<{ className?: string }>; label: string; href: string }) {
133+
return (
134+
<div className="py-1 px-2.5 rounded-full bg-neutral-200 dark:bg-neutral-800">
135+
<DocLink link={href} label={label} icon={icon} />
136+
</div>
137+
);
138+
}

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { getProjects } from "@/api/projects";
22
import { notFound } from "next/navigation";
33
import { ProjectOverviewHeader } from "./components/ProjectOverviewHeader";
4+
import { EmptyState } from "./components/EmptyState";
45

56
export default async function ProjectOverviewPage(props: {
67
params: { team_slug: string; project_slug: string };
@@ -15,12 +16,13 @@ export default async function ProjectOverviewPage(props: {
1516
}
1617

1718
return (
18-
<div>
19-
<div className="w-full border-border-800 border-b bg-muted/50 px-6">
19+
<div className="">
20+
<div className="dark:bg-muted/50 w-full border-border-800 border-b px-6">
2021
<div className="container">
2122
<ProjectOverviewHeader project={project} />
2223
</div>
2324
</div>
25+
<EmptyState />
2426
</div>
2527
);
2628
}

‎apps/dashboard/src/app/team/[team_slug]/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function RootTeamLayout(props: {
77
params: { team_slug: string };
88
}) {
99
return (
10-
<div className="flex min-h-screen flex-col">
10+
<div className="flex min-h-screen flex-col bg-background">
1111
<div className="flex grow flex-col">{props.children}</div>
1212
<TWAutoConnect />
1313
<AppFooter />

‎apps/dashboard/src/components/analytics/range-selector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function RangeSelector({
4242
});
4343

4444
return (
45-
<div className="flex justify-end gap-3">
45+
<div className="sm:flex-row flex-col flex justify-end gap-3">
4646
<DateRangeSelector
4747
range={computedRange || getLastNDaysRange("last-120")}
4848
setRange={(newRange) => {

0 commit comments

Comments
 (0)