Skip to content

Commit c1cc61a

Browse files
bal7hazarbal7hazar
committed
✨ Add empty states
1 parent 44b5968 commit c1cc61a

File tree

11 files changed

+226
-51
lines changed

11 files changed

+226
-51
lines changed

‎client/public/banner.svg

+120
Loading

‎client/public/placeholder.svg

+11-9
Loading

‎client/src/components/achievements/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,7 @@ export function Achievements({ game }: { game?: GameModel }) {
151151
}
152152

153153
return (
154-
<LayoutContent className="gap-y-6 select-none h-full overflow-clip">
154+
<LayoutContent className="gap-y-6 select-none h-full overflow-clip p-0">
155155
{isSelf ? (
156156
<AchievementTabs
157157
value={tab}

‎client/src/components/activity/index.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { EmptyStateActivityIcon } from "@cartridge/ui-next";
2+
import banner from "/public/banner.svg";
3+
import { useEffect, useState } from "react";
4+
5+
export function Activity() {
6+
const [isLoaded, setIsLoaded] = useState(false);
7+
8+
useEffect(() => {
9+
const img = new Image();
10+
img.src = banner;
11+
img.onload = () => setIsLoaded(true);
12+
}, []);
13+
14+
return (
15+
<div className="select-none flex flex-col justify-center items-center gap-3 grow border border-spacer-100 rounded-lg overflow-hidden pt-[135px]">
16+
<EmptyStateActivityIcon className="h-1/2 w-1/5" />
17+
<p className="text-xl text-background-500">
18+
Activity feature is coming soon
19+
</p>
20+
<img
21+
draggable={false}
22+
className={`opacity-0 transition-opacity ${isLoaded ? "opacity-50" : ""}`}
23+
style={{ transitionDuration: "1000ms" }}
24+
src={banner}
25+
/>
26+
</div>
27+
);
28+
}

‎client/src/components/app.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import { useAchievements } from "@/hooks/achievements";
88
import { ArcadeTabs, TabsContent } from "@cartridge/ui-next";
99
import { useAccount } from "@starknet-react/core";
1010
import { DiscoverScene } from "./scenes/discover";
11+
import { GuildsScene } from "./scenes/guild";
12+
import { ActivityScene } from "./scenes/activity";
1113

1214
export function App() {
1315
const { isConnected } = useAccount();
@@ -58,10 +60,10 @@ export function App() {
5860
<AchievementScene />
5961
</TabsContent>
6062
<TabsContent className="p-0 mt-0 grow w-full" value="guilds">
61-
<InventoryScene />
63+
<GuildsScene />
6264
</TabsContent>
6365
<TabsContent className="p-0 mt-0 grow w-full" value="activity">
64-
<InventoryScene />
66+
<ActivityScene />
6567
</TabsContent>
6668
</div>
6769
</ArcadeTabs>

‎client/src/components/discover/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export function Discover({ game }: { game?: GameModel }) {
4343
if (isLoading) return <LayoutContentLoader />;
4444

4545
return (
46-
<LayoutContent className="gap-y-6 select-none h-full overflow-clip">
46+
<LayoutContent className="gap-y-6 select-none h-full overflow-clip p-0">
4747
<div
4848
className="p-0 mt-0 pb-6 overflow-y-scroll"
4949
style={{ scrollbarWidth: "none" }}

‎client/src/components/games/register.tsx

+21-35
Original file line numberDiff line numberDiff line change
@@ -50,41 +50,27 @@ const formSchema = z.object({
5050
.min(2, { message: "Name is required" })
5151
.max(31, { message: "Invalid Name" }),
5252
description: z.string().min(2, { message: "Description is required" }),
53-
image: z
54-
.string()
55-
.refine((val) => val.startsWith("http") || !val, {
56-
message: "Invalid Image URL",
57-
}),
58-
banner: z
59-
.string()
60-
.refine((val) => val.startsWith("http") || !val, {
61-
message: "Invalid Banner URL",
62-
}),
63-
discord: z
64-
.string()
65-
.refine((val) => val.startsWith("http") || !val, {
66-
message: "Invalid Discord URL",
67-
}),
68-
telegram: z
69-
.string()
70-
.refine((val) => val.startsWith("http") || !val, {
71-
message: "Invalid Telegram URL",
72-
}),
73-
twitter: z
74-
.string()
75-
.refine((val) => val.startsWith("http") || !val, {
76-
message: "Invalid Twitter URL",
77-
}),
78-
youtube: z
79-
.string()
80-
.refine((val) => val.startsWith("http") || !val, {
81-
message: "Invalid Youtube URL",
82-
}),
83-
website: z
84-
.string()
85-
.refine((val) => val.startsWith("http") || !val, {
86-
message: "Invalid Website URL",
87-
}),
53+
image: z.string().refine((val) => val.startsWith("http") || !val, {
54+
message: "Invalid Image URL",
55+
}),
56+
banner: z.string().refine((val) => val.startsWith("http") || !val, {
57+
message: "Invalid Banner URL",
58+
}),
59+
discord: z.string().refine((val) => val.startsWith("http") || !val, {
60+
message: "Invalid Discord URL",
61+
}),
62+
telegram: z.string().refine((val) => val.startsWith("http") || !val, {
63+
message: "Invalid Telegram URL",
64+
}),
65+
twitter: z.string().refine((val) => val.startsWith("http") || !val, {
66+
message: "Invalid Twitter URL",
67+
}),
68+
youtube: z.string().refine((val) => val.startsWith("http") || !val, {
69+
message: "Invalid Youtube URL",
70+
}),
71+
website: z.string().refine((val) => val.startsWith("http") || !val, {
72+
message: "Invalid Website URL",
73+
}),
8874
});
8975

9076
// starkli invoke \

‎client/src/components/guilds/index.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { EmptyStateGuildIcon } from "@cartridge/ui-next";
2+
import banner from "/public/banner.svg";
3+
import { useEffect, useState } from "react";
4+
5+
export function Guilds() {
6+
const [isLoaded, setIsLoaded] = useState(false);
7+
8+
useEffect(() => {
9+
const img = new Image();
10+
img.src = banner;
11+
img.onload = () => setIsLoaded(true);
12+
}, []);
13+
14+
return (
15+
<div className="select-none flex flex-col justify-center items-center gap-3 grow border border-spacer-100 rounded-lg overflow-hidden pt-[135px]">
16+
<EmptyStateGuildIcon className="h-1/2 w-1/5" />
17+
<p className="text-xl text-background-500">
18+
Guilds feature is coming soon
19+
</p>
20+
<img
21+
draggable={false}
22+
className={`opacity-0 transition-opacity ${isLoaded ? "opacity-50" : ""}`}
23+
style={{ transitionDuration: "1000ms" }}
24+
src={banner}
25+
/>
26+
</div>
27+
);
28+
}

‎client/src/components/scenes/activity.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Activity } from "@/components/activity";
2+
3+
export const ActivityScene = () => {
4+
return <Activity />;
5+
};

‎client/src/components/scenes/guild.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { Guilds } from "@/components/guilds";
2+
3+
export const GuildsScene = () => {
4+
return <Guilds />;
5+
};

‎client/src/components/scenes/layout.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { Header } from "@/components/header";
2-
const PLACEHOLDER =
3-
"https://static.cartridge.gg/presets/cartridge/cover-dark.png";
2+
import banner from "/public/banner.svg";
43

54
export const SceneLayout = ({ children }: { children: React.ReactNode }) => {
65
return (
76
<div
87
className="flex flex-col items-center gap-y-px select-none h-screen overflow-clip"
98
style={{ scrollbarWidth: "none" }}
109
>
11-
<Header cover={PLACEHOLDER} />
10+
<Header cover={banner} />
1211
{children}
1312
</div>
1413
);

0 commit comments

Comments
 (0)