feat: added disabled tools

src/app/layout.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Theme } from '@radix-ui/themes';
+import { Flex, Theme } from '@radix-ui/themes';
 import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
@@ -41,14 +41,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         >
           {!isEmbed && <Navbar />}
 
-          <div
-            style={{
-              flex: 1,
-              width: '100%',
-            }}
-          >
-            {children}
-          </div>
+          <Flex direction="column">{children}</Flex>
         </Theme>
       </body>
     </html>

src/app/page.css.ts

@@ -1,25 +1,15 @@
-import { style } from '@vanilla-extract/css';
+import { styleVariants } from '@vanilla-extract/css';
 import { theme } from '../stitches.config';
 
-export const tool = style({
-  height: 128,
-  minWidth: 256,
-  flex: 1,
-  borderRadius: 8,
-  textDecoration: 'none',
-  backgroundSize: 'cover',
-  backgroundPosition: 'center',
-  overflow: 'hidden',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'flex-start',
-  justifyContent: 'flex-end',
-  padding: 16,
-  gap: 4,
-  boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
-  transition: `box-shadow ${theme.durations.regular}`,
+export const tool = styleVariants({
+  enabled: {
+    boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
 
-  ':hover': {
-    boxShadow: `inset 0 -128px 128px -128px ${theme.colors.appBackground1}`,
+    ':hover': {
+      boxShadow: `inset 0 -160px 128px -128px ${theme.colors.appBackground1}`,
+    },
+  },
+  disabled: {
+    boxShadow: `inset 0 -192px 128px -128px ${theme.colors.appBackground1}`,
   },
 });

src/app/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { CaretRightIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
-import { TextField } from '@radix-ui/themes';
+import { Flex, TextField } from '@radix-ui/themes';
 import Link from 'next/link';
 import { useRef } from 'react';
 import { Search, SearchItem } from 'react-fuzzysort';
@@ -22,13 +22,7 @@ export default function Page() {
         <TextField.Input ref={input} placeholder="Search tools..." />
       </TextField.Root>
 
-      <div
-        style={{
-          display: 'flex',
-          gap: 16,
-          flexWrap: 'wrap',
-        }}
-      >
+      <Flex gap="3" wrap="wrap" align="center" justify="center">
         <Search
           input={input}
           list={TOOLS.map(
@@ -37,9 +31,31 @@ export default function Page() {
                 node: (
                   <Link
                     href={`/tools/${tool.id}`}
-                    className={styles.tool}
+                    className={
+                      tool.disabled ? styles.tool.disabled : styles.tool.enabled
+                    }
                     style={{
                       backgroundImage: `url(/assets/banners/${tool.id}.png)`,
+                      cursor: tool.disabled ? 'default' : 'pointer',
+                      opacity: tool.disabled ? 0.25 : 1,
+                      height: 128,
+                      minWidth: 256,
+                      flex: 1,
+                      borderRadius: 8,
+                      textDecoration: 'none',
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                      overflow: 'hidden',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'flex-start',
+                      justifyContent: 'flex-end',
+                      padding: 16,
+                      gap: 4,
+                      transition: `box-shadow ${theme.durations.regular}`,
+                    }}
+                    onClick={(event) => {
+                      if (tool.disabled) event.preventDefault();
                     }}
                   >
                     <span
@@ -60,7 +76,7 @@ export default function Page() {
                         fontSize: 16,
                       }}
                     >
-                      {tool.description}
+                      {tool.disabled ? 'Coming soon!' : tool.description}
                     </span>
                   </Link>
                 ),
@@ -68,7 +84,7 @@ export default function Page() {
               }) satisfies SearchItem,
           )}
         />
-      </div>
+      </Flex>
     </PageWrapper>
   );
 }

src/constants/tools.ts

@@ -1,29 +1,40 @@
-export const TOOLS = [
+interface Tool {
+  id: string;
+  title: string;
+  description: string;
+  disabled?: boolean;
+}
+
+export const TOOLS: Tool[] = [
   {
     id: 'session',
     title: 'Session tracker',
     description: 'Track your performance in a session',
   },
-  // {
-  //   id: 'ratings',
-  //   title: 'Ratings',
-  //   description: 'Current and old season leader boards',
-  // },
-  // {
-  //   id: 'tankopedia',
-  //   title: 'Tankopedia',
-  //   description: 'Full Blitz tank encyclopedia',
-  // },
-  // {
-  //   id: 'inactive',
-  //   title: 'Inactivity tracker',
-  //   description: 'Find inactive members of a clan',
-  // },
-  // {
-  //   id: 'profile',
-  //   title: 'Player profile',
-  //   description: "A player's basic non-statistical info",
-  // },
+  {
+    id: 'ratings',
+    title: 'Ratings',
+    description: 'Current and old season leader boards',
+    disabled: true,
+  },
+  {
+    id: 'tankopedia',
+    title: 'Tankopedia',
+    description: 'Full Blitz tank encyclopedia',
+    disabled: true,
+  },
+  {
+    id: 'inactive',
+    title: 'Inactivity tracker',
+    description: 'Find inactive members of a clan',
+    disabled: true,
+  },
+  {
+    id: 'profile',
+    title: 'Player profile',
+    description: "A player's basic non-statistical info",
+    disabled: true,
+  },
   // {
   //   title: 'More coming soon',
   //   description: 'New tools are added often',