Coming soon (#14)

* coming soon * more coming soon * tweak things around coming soon
thatguyinabeanie · Nov 11, 2024 · 4aef35c · 4aef35c · vercel · Nov 11, 2024
1 parent 9fd1f34
commit 4aef35c
Show file tree

Hide file tree

Showing 12 changed files with 105 additions and 46 deletions.
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
@@ -42,6 +42,7 @@
     "@tsparticles/slim": "^3.5.0",
     "@uploadthing/react": "^7.1.0",
     "@vercel/analytics": "^1.3.2",
+    "@vercel/flags": "^2.6.3",
     "@vercel/functions": "^1.5.0",
     "@vercel/kv": "^3.0.0",
     "@vercel/speed-insights": "^1.0.14",

diff --git a/apps/nextjs/src/app/analytics/page.tsx b/apps/nextjs/src/app/analytics/page.tsx
@@ -1,13 +1,17 @@
 import type { Metadata } from "next";
 
+import ComingSoon from "~/components/coming-soon";
+
 export const metadata: Metadata = {
   title: "Analytics",
 };
 
-export default function Analytics() {
+export default function PlayersPage() {
   return (
-    <div>
-      <h1>Analytics</h1>
-    </div>
+    <ComingSoon title={"Analytics"}>
+      <div className="flex flex-col items-center">
+        <h2>"Analytics is under construction</h2>
+      </div>
+    </ComingSoon>
   );
 }
diff --git a/apps/nextjs/src/app/dashboard/@pokemon/page.tsx b/apps/nextjs/src/app/dashboard/@pokemon/page.tsx
@@ -1,7 +1,11 @@
+import ComingSoon from "~/components/coming-soon";
+
 export default function DashboardPokemon() {
   return (
-    <div>
-      <h1>DASHBOARD POKEMON PAGE</h1>
-    </div>
+    <ComingSoon title="Pokemon">
+      <div className="flex flex-col items-center">
+        <h2>Pokemon Team Management is under construction</h2>
+      </div>
+    </ComingSoon>
   );
 }
diff --git a/apps/nextjs/src/app/dashboard/@settings/page.tsx b/apps/nextjs/src/app/dashboard/@settings/page.tsx
@@ -4,7 +4,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@battle-stadium/ui";
 
 export default function Settings() {
   return (
-    <div className="border-small w-full max-w-2xl flex-col rounded-3xl border-neutral-400 border-opacity-15 p-10 backdrop-blur">
+    <div className="border-small w-full max-w-2xl flex-col rounded-3xl border-neutral-400 border-opacity-15 backdrop-blur">
       <Tabs>
         <TabsList>
           <TabsTrigger value="account" title="Account">

diff --git a/apps/nextjs/src/app/dashboard/@tournament_history/page.tsx b/apps/nextjs/src/app/dashboard/@tournament_history/page.tsx
@@ -1,7 +1,11 @@
+import ComingSoon from "~/components/coming-soon";
+
 export default function TournamentHistory() {
   return (
-    <div>
-      <h1>Tournament History</h1>
-    </div>
+    <ComingSoon title="Tournament History">
+      <div className="flex flex-col items-center">
+        <h2>Tournament History is under construction</h2>
+      </div>
+    </ComingSoon>
   );
 }
diff --git a/apps/nextjs/src/app/dashboard/layout.tsx b/apps/nextjs/src/app/dashboard/layout.tsx
@@ -4,10 +4,10 @@ import type { DashboardLayoutProps } from "~/types";
 import { getAccountMe } from "~/app/server-actions/accounts/actions";
 
 const tabsList = [
+  { key: "dashboard", title: "Dashboard" },
   { key: "profiles", title: "Profiles" },
   { key: "pokemon", title: "Pokemon" },
   { key: "tournaments", title: "Tournaments" },
-  { key: "dashboard", title: "Dashboard" },
   { key: "settings", title: "Settings" },
 ];
 const adminTab = { key: "admin", title: "Admin" };
@@ -20,9 +20,9 @@ export default async function DashboardLayout(
   const tabsToRender = me?.admin ? [...tabsList, adminTab] : tabsList;
 
   return (
-    <div className="flex min-h-screen w-full flex-col items-center">
-      <Tabs defaultValue="account" className="w-[400px]">
-        <TabsList>
+    <div className="flex min-h-screen w-full flex-col items-center pt-2">
+      <Tabs defaultValue="dashboard" className="flex flex-col">
+        <TabsList className="flex w-fit flex-row">
           {tabsToRender.map(({ key, title }) => (
             <TabsTrigger key={key} value={key}>
               {title}
@@ -31,24 +31,23 @@ export default async function DashboardLayout(
         </TabsList>
         {tabsToRender.map(({ key }) => (
           <TabsContent key={key} value={key}>
-            {renderTabContent(key, props)}
+            <div className="flex flex-col items-center">
+              {renderTabContent(key, props)}
+            </div>
           </TabsContent>
         ))}
       </Tabs>
     </div>
   );
 }
 
-function renderTabContent(
-  activeTab: string,
-  props: Readonly<DashboardLayoutProps>,
-) {
-  switch (activeTab) {
+function renderTabContent(key: string, props: Readonly<DashboardLayoutProps>) {
+  switch (key) {
     case "profiles":
       return props.profiles;
     case "pokemon":
       return props.pokemon;
-    case "tournament_history":
+    case "tournaments":
       return props.tournament_history;
     case "dashboard":
       return props.children;

diff --git a/apps/nextjs/src/app/organizations/page.tsx b/apps/nextjs/src/app/organizations/page.tsx
@@ -16,7 +16,7 @@ export default async function OrganizationsPage() {
   const orgs = await getOrganizations();
   return (
     <>
-      <div className="mt-8 md:mt-20">
+      <div className="mt-4">
         <PartneredOrganizations />
       </div>
 

diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx
@@ -12,10 +12,10 @@ export default function Home() {
   return (
     <HydrateClient>
       <div className="min--h-screen flex flex-col items-center justify-between">
-        <div className="mt-8 md:mt-20">
+        <div className="mt-4">
           <PartneredOrganizations />
         </div>
-        <div className="flex w-full max-w-fit flex-col items-center justify-center bg-transparent pt-10 text-center">
+        <div className="flex w-full max-w-fit flex-col items-center justify-center bg-transparent text-center">
           <h1 className={title({ color: "violet", size: "xl" })}>
             battlestadium.gg
           </h1>

diff --git a/apps/nextjs/src/app/players/[username]/page.tsx b/apps/nextjs/src/app/players/[username]/page.tsx
@@ -1,4 +1,5 @@
 import { getProfile } from "~/app/server-actions/profiles/actions";
+import ComingSoon from "~/components/coming-soon";
 
 interface PlayerProfilePageProps {
   params: Promise<{
@@ -22,9 +23,8 @@ export default async function PlayerProfilePage(
   const player = await getProfile(params.username);
 
   return (
-    <div>
-      <h1>{player?.username}</h1>
-      <p> {player?.slug} </p>
-    </div>
+    <ComingSoon title={player?.username ?? "Player Profile"}>
+      <h2>The Player Profiles are under construction</h2>
+    </ComingSoon>
   );
 }
diff --git a/apps/nextjs/src/app/players/page.tsx b/apps/nextjs/src/app/players/page.tsx
@@ -1,19 +1,11 @@
-import PlayersTable from "~/app/players/players-table";
-import { getProfiles } from "~/app/server-actions/profiles/actions";
+import ComingSoon from "~/components/coming-soon";
 
-const columns = [
-  {
-    key: "username",
-    label: "Username",
-  },
-  {
-    key: "pronouns",
-    label: "Pronouns",
-  },
-];
-
-export default async function PlayersPage() {
-  const players = await getProfiles();
-
-  return <PlayersTable columns={columns} players={players} />;
+export default function PlayersPage() {
+  return (
+    <ComingSoon title={"Player Profiles"}>
+      <div className="flex flex-col items-center">
+        <h2>Player profiles are under construction</h2>
+      </div>
+    </ComingSoon>
+  );
 }
diff --git a/apps/nextjs/src/components/coming-soon.tsx b/apps/nextjs/src/components/coming-soon.tsx
@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+
+interface ComingSoonProps {
+  title: string;
+  children: ReactNode;
+}
+export default function ComingSoon({
+  title,
+  children,
+}: Readonly<ComingSoonProps>) {
+  return (
+    <div className="flex min-h-screen flex-col pt-4">
+      <div className="animate-fade-in space-y-6 rounded-xl bg-white/10 p-8 text-center shadow-xl backdrop-blur-lg">
+        <div className="space-y-2">
+          <h1 className="text-4xl font-bold">{title}</h1>
+          {children}
+        </div>
+        <p className="text-xl">Coming Soon</p>
+      </div>
+    </div>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml