Skip to content

Commit 868b95a

Browse files
MananTankMananTank
committed
[TOOL-3683] Dashboard: show FTUX in team overview page when no projects are created
1 parent a1141f3 commit 868b95a

File tree

9 files changed

+556
-287
lines changed

9 files changed

+556
-287
lines changed

‎apps/dashboard/src/app/account/components/AccountHeader.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ export function AccountHeader(props: {
7777
isOpen: false,
7878
})
7979
}
80-
onCreateAndComplete={() => {
80+
onCreate={() => {
8181
// refresh projects
8282
router.refresh();
8383
}}

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@ import { subDays } from "date-fns";
66
import { redirect } from "next/navigation";
77
import { getAuthToken } from "../../../api/lib/getAuthToken";
88
import { loginRedirect } from "../../../login/loginRedirect";
9-
import {
10-
type ProjectWithAnalytics,
11-
TeamProjectsPage,
12-
} from "./~/projects/TeamProjectsPage";
9+
import { TeamProjectsPage } from "./~/projects/TeamProjectsPage";
10+
import type { ProjectWithAnalytics } from "./~/projects/TeamProjectsTable";
1311

1412
export default async function Page(props: {
1513
params: Promise<{ team_slug: string }>;

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/NoProjectsFTUX.stories.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type { Meta, StoryObj } from "@storybook/react";
2+
import { NoProjectsFTUX } from "./NoProjectsFTUX";
3+
4+
const meta = {
5+
title: "Team/No Projects FTUX",
6+
component: NoProjectsFTUX,
7+
parameters: {
8+
nextjs: {
9+
appDirectory: true,
10+
},
11+
},
12+
decorators: [
13+
(Story) => (
14+
<div className="container py-10">
15+
<Story />
16+
</div>
17+
),
18+
],
19+
} satisfies Meta<typeof NoProjectsFTUX>;
20+
21+
export default meta;
22+
type Story = StoryObj<typeof meta>;
23+
24+
export const Default: Story = {
25+
args: {
26+
openCreateProjectModal: () => {},
27+
},
28+
};

‎apps/dashboard/src/app/team/[team_slug]/(team)/~/projects/NoProjectsFTUX.tsx

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
"use client";
2+
import { Button } from "@/components/ui/button";
3+
import {
4+
BookTextIcon,
5+
BookUpIcon,
6+
DatabaseIcon,
7+
DollarSignIcon,
8+
FuelIcon,
9+
PlusIcon,
10+
SparklesIcon,
11+
SquareChevronRightIcon,
12+
WalletIcon,
13+
} from "lucide-react";
14+
import Link from "next/link";
15+
16+
export function NoProjectsFTUX(props: {
17+
openCreateProjectModal: () => void;
18+
}) {
19+
return (
20+
<div className="">
21+
<div className="flex flex-col justify-between gap-5 lg:flex-row lg:items-center">
22+
<div>
23+
<h2 className="mb-1 font-semibold text-2xl tracking-tight">
24+
Create a project
25+
</h2>
26+
<p className="text-muted-foreground">
27+
Creating a project gives you access to thirdweb's services for
28+
building powerful web3 applications
29+
</p>
30+
</div>
31+
32+
<Button onClick={props.openCreateProjectModal} className="gap-2">
33+
<PlusIcon className="size-4" />
34+
Create Project
35+
</Button>
36+
</div>
37+
<div className="h-6" />
38+
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
39+
{/* contract */}
40+
<FeatureCard
41+
icon={BookUpIcon}
42+
title="Deploy Contracts"
43+
description="Securely deploy, build, and manage contracts on any EVM chain."
44+
documentationUrl="https://portal.thirdweb.com/contracts"
45+
playgroundUrl={undefined}
46+
/>
47+
48+
{/* in-app wallet */}
49+
<FeatureCard
50+
icon={WalletIcon}
51+
title="Create In-App Wallets"
52+
description="Create social, passkey, and mobile login options for easy user onboarding."
53+
documentationUrl="https://portal.thirdweb.com/connect/wallet/sign-in-methods/configure"
54+
playgroundUrl="https://playground.thirdweb.com/connect/in-app-wallet"
55+
/>
56+
57+
{/* universal bridge */}
58+
<FeatureCard
59+
icon={DollarSignIcon}
60+
title="Fiat & cross-chain crypto payments "
61+
description="Bridge, swap, purchase cryptocurrencies and execute transactions with fiat or tokens via cross-chain routing"
62+
documentationUrl="https://portal.thirdweb.com/connect/pay/overview"
63+
playgroundUrl="https://playground.thirdweb.com/connect/pay"
64+
/>
65+
66+
{/* account abstraction */}
67+
<FeatureCard
68+
icon={FuelIcon}
69+
title="Sponsor Gas Funds"
70+
description="Sponsor gas and enable secure app scope for your users using ERC-4337 compliant smart accounts."
71+
documentationUrl="https://portal.thirdweb.com/connect/account-abstraction/overview"
72+
playgroundUrl="https://playground.thirdweb.com/connect/account-abstraction/connect"
73+
/>
74+
75+
{/* insight */}
76+
<FeatureCard
77+
icon={DatabaseIcon}
78+
title="Index Any EVM Chain"
79+
description="Index any EVM chain to aggregate and display onchain data in your application."
80+
documentationUrl="https://portal.thirdweb.com/insight"
81+
playgroundUrl="https://playground.thirdweb.com/insight"
82+
/>
83+
84+
{/* nebula */}
85+
<FeatureCard
86+
icon={SparklesIcon}
87+
title="Integrate AI"
88+
description="Build AI powered crypto applications with advanced capabilities."
89+
documentationUrl="https://portal.thirdweb.com/nebula"
90+
playgroundUrl="https://nebula.thirdweb.com"
91+
/>
92+
</div>
93+
</div>
94+
);
95+
}
96+
97+
function FeatureCard(props: {
98+
icon: React.FC<{ className?: string }>;
99+
title: string;
100+
description: string;
101+
documentationUrl: string;
102+
playgroundUrl: string | undefined;
103+
}) {
104+
return (
105+
<div className="rounded-lg border bg-card p-4">
106+
<div className="mb-4 inline-flex rounded-full border p-3">
107+
<props.icon className="size-5 text-muted-foreground" />
108+
</div>
109+
<h3 className="mb-1 font-semibold text-lg">{props.title}</h3>
110+
<p className="mb-6 text-muted-foreground text-sm">{props.description}</p>
111+
<div className="mt-auto flex gap-2.5">
112+
<Button variant="outline" size="sm" className="gap-2 text-xs" asChild>
113+
<Link href={props.documentationUrl} target="_blank">
114+
<BookTextIcon className="size-3 text-muted-foreground" />
115+
Documentation
116+
</Link>
117+
</Button>
118+
{props.playgroundUrl && (
119+
<Button variant="outline" size="sm" className="gap-2 text-xs" asChild>
120+
<Link href={props.playgroundUrl} target="_blank">
121+
<SquareChevronRightIcon className="size-3 text-muted-foreground" />
122+
Playground
123+
</Link>
124+
</Button>
125+
)}
126+
</div>
127+
</div>
128+
);
129+
}

0 commit comments

Comments
 (0)