Skip to content

Commit 1f6b14a

Browse files
MananTankMananTank
committed
Move Dashboard landing page to App router
1 parent 4b31754 commit 1f6b14a

File tree

6 files changed

+182
-208
lines changed

6 files changed

+182
-208
lines changed

‎apps/dashboard/src/app/(dashboard)/dashboard/page.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { Changelog, type ChangelogItem } from "components/dashboard/Changelog";
2+
import { HomeProductCard } from "components/dashboard/HomeProductCard";
3+
import { OnboardingSteps } from "components/onboarding/Steps";
4+
import { PRODUCTS } from "components/product-pages/common/nav/data";
5+
6+
const TRACKING_CATEGORY = "dashboard";
7+
8+
export default async function Page() {
9+
const changelog = await getChangelog();
10+
11+
return (
12+
<div className="container flex flex-col justify-between gap-16 pt-8 pb-16 xl:flex-row">
13+
<div className="grow">
14+
<h1 className="mb-6 font-semibold text-2xl tracking-tight lg:mb-8 lg:text-3xl">
15+
Get started quickly
16+
</h1>
17+
<div className="flex w-full flex-col gap-10">
18+
<OnboardingSteps />
19+
<div className="flex w-full flex-col gap-12">
20+
{["connect", "contracts", "infrastructure"].map((section) => {
21+
const products = PRODUCTS.filter(
22+
(p) => p.section === section && !!p.dashboardLink,
23+
);
24+
25+
return (
26+
<div key={section}>
27+
<h3 className="mb-2.5 font-medium text-muted-foreground text-xl capitalize tracking-tight">
28+
{section === "infrastructure" ? "Engine" : section}
29+
</h3>
30+
<div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
31+
{products.map((product) => (
32+
<HomeProductCard
33+
key={product.name}
34+
product={product}
35+
TRACKING_CATEGORY={TRACKING_CATEGORY}
36+
/>
37+
))}
38+
</div>
39+
</div>
40+
);
41+
})}
42+
</div>
43+
</div>
44+
</div>
45+
<div className="shrink-0 lg:w-[320px]">
46+
<h2 className="mb-4 font-semibold text-lg tracking-tight">
47+
Latest changes
48+
</h2>
49+
<Changelog changelog={changelog} />
50+
</div>
51+
</div>
52+
);
53+
}
54+
55+
async function getChangelog() {
56+
const res = await fetch(
57+
"https://thirdweb.ghost.io/ghost/api/content/posts/?key=49c62b5137df1c17ab6b9e46e3&fields=title,url,published_at&filter=tag:changelog&visibility:public&limit=5",
58+
);
59+
const json = await res.json();
60+
return json.posts as ChangelogItem[];
61+
}
62+
63+
// revalidate every 5 minutes
64+
export const revalidate = 300;

‎apps/dashboard/src/components/dashboard/Changelog.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Skeleton } from "@/components/ui/skeleton";
22
import { formatDistance } from "date-fns/formatDistance";
33
import { ArrowRightIcon } from "lucide-react";
4-
import { Link } from "tw-components";
4+
import Link from "next/link";
55
import { ClientOnly } from "../ClientOnly/ClientOnly";
66

77
export interface ChangelogItem {
@@ -23,15 +23,15 @@ export const Changelog: React.FC<ChangelogProps> = ({ changelog }) => {
2323

2424
<div className="flex flex-col">
2525
<Link
26-
isExternal
26+
target="_blank"
2727
href={`${item.url}?utm_source=thirdweb&utm_campaign=changelog`}
2828
role="group"
2929
className="!text-muted-foreground hover:!text-foreground hover:!no-underline line-clamp-2 text-sm"
3030
>
3131
{item.title}
3232
</Link>
3333
<div className="mt-1 text-muted-foreground text-xs opacity-70">
34-
<ClientOnly ssr={<Skeleton className="h-2" />}>
34+
<ClientOnly ssr={<Skeleton className="h-2 w-28" />}>
3535
{formatDistance(new Date(item.published_at), Date.now(), {
3636
addSuffix: true,
3737
})}
@@ -42,7 +42,7 @@ export const Changelog: React.FC<ChangelogProps> = ({ changelog }) => {
4242
))}
4343
<Link
4444
href="https://blog.thirdweb.com/changelog?utm_source=thirdweb&utm_campaign=changelog"
45-
isExternal
45+
target="_blank"
4646
className="!text-foreground flex items-center gap-2 pl-7 text-sm"
4747
>
4848
View More <ArrowRightIcon className="size-4" />

‎apps/dashboard/src/components/dashboard/HomeProductCard.tsx‎

Lines changed: 33 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { Flex, LinkBox, LinkOverlay } from "@chakra-ui/react";
2-
import { ChakraNextImage } from "components/Image";
1+
"use client";
32
import type { SectionItemProps } from "components/product-pages/common/nav/types";
43
import { useTrack } from "hooks/analytics/useTrack";
5-
import { Card, Text } from "tw-components";
4+
import Image from "next/image";
5+
import Link from "next/link";
66

77
interface HomeProductCardProps {
88
product: SectionItemProps;
@@ -17,43 +17,35 @@ export const HomeProductCard: React.FC<HomeProductCardProps> = ({
1717
}) => {
1818
const trackEvent = useTrack();
1919
return (
20-
<LinkBox
21-
onClick={() => {
22-
trackEvent({
23-
category: TRACKING_CATEGORY,
24-
action: "click",
25-
label: "select-product",
26-
product: product.name,
27-
});
28-
}}
29-
>
30-
<Card
31-
p={4}
32-
overflow="hidden"
33-
className="bg-muted/50 hover:bg-muted"
34-
h="full"
35-
minHeight={{ base: "full", md: 28 }}
36-
>
37-
<Flex flexDir="column">
38-
<Flex gap={2} alignItems="center">
39-
{product.icon && (
40-
<ChakraNextImage alt="" boxSize={6} src={product.icon} />
41-
)}
42-
<LinkOverlay
43-
href={isFromLandingPage ? product.link : product.dashboardLink}
44-
>
45-
<Text size="label.md" m={0} color="bgBlack">
46-
{isFromLandingPage
47-
? product.name
48-
: product?.dashboardName || product.name}
49-
</Text>
50-
</LinkOverlay>
51-
</Flex>
52-
<Text mt={3} color="faded">
53-
{product.description}
54-
</Text>
55-
</Flex>
56-
</Card>
57-
</LinkBox>
20+
<div className="relative flex h-full items-center gap-3.5 overflow-hidden rounded-lg border border-border bg-muted/50 p-4 hover:bg-muted md:min-h-24">
21+
{product.icon && (
22+
<div className="shrink-0 rounded-full border border-border p-2">
23+
<Image alt="" className="size-5" src={product.icon} />
24+
</div>
25+
)}
26+
<div>
27+
<Link
28+
href={
29+
(isFromLandingPage ? product.link : product.dashboardLink) || ""
30+
}
31+
className="font-semibold tracking-tight before:absolute before:inset-0"
32+
onClick={() => {
33+
trackEvent({
34+
category: TRACKING_CATEGORY,
35+
action: "click",
36+
label: "select-product",
37+
product: product.name,
38+
});
39+
}}
40+
>
41+
{isFromLandingPage
42+
? product.name
43+
: product?.dashboardName || product.name}
44+
</Link>
45+
<p className="mt-0.5 text-muted-foreground text-sm">
46+
{product.description}
47+
</p>
48+
</div>
49+
</div>
5850
);
5951
};

0 commit comments

Comments
 (0)