feat: better homepage

packages/website/src/pages/tools/embed/_index.tsx

@@ -1,63 +1,112 @@
 import { imgur, ImgurSize } from '@blitzkit/core';
-import { Box, Flex, Link, Text } from '@radix-ui/themes';
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+import { Box, Callout, Flex, Link, Text } from '@radix-ui/themes';
 import { capitalize } from 'lodash-es';
 import { PreviewWrapper } from '../../../components/Embeds/PreviewWrapper';
 import { PageWrapper } from '../../../components/PageWrapper';
+import { WargamingLoginButton } from '../../../components/WargamingLoginButton';
 import {
   embedConfigurations,
   extractEmbedConfigDefaults,
 } from '../../../constants/embeds';
 import { Var } from '../../../core/radix/var';
+import { App } from '../../../stores/app';
 import { EmbedState } from '../../../stores/embedState';
 
 export function Page() {
   return (
-    <PageWrapper color="red">
-      {Object.entries(embedConfigurations).map(([embed, config]) => (
-        <EmbedState.Provider data={extractEmbedConfigDefaults(config)}>
-          <Link
-            href={`/tools/embed/${embed}`}
-            color="gray"
-            highContrast
-            style={{
-              width: 'fit-content',
-              height: 'fit-content',
-            }}
-            underline="hover"
-          >
-            <Flex
-              direction="column"
-              overflow="hidden"
-              style={{
-                borderRadius: Var('radius-4'),
-                backgroundColor: Var('color-panel-solid'),
-                boxShadow: Var('shadow-3'),
-              }}
-            >
-              <Flex justify="center" p="2">
-                <Text>{capitalize(embed)}</Text>
-              </Flex>
+    <App.Provider>
+      <Content />
+    </App.Provider>
+  );
+}
 
-              <Box
-                width="20rem"
-                height="20rem"
+function Content() {
+  const wargaming = App.useDeferred((state) => state.logins.wargaming, {
+    token: '',
+    id: 0,
+    expires: 0,
+  });
+
+  return (
+    <PageWrapper color="red">
+      {!wargaming && (
+        <Flex direction="column" align="center" gap="2">
+          <Callout.Root>
+            <Callout.Icon>
+              <ExclamationTriangleIcon />
+            </Callout.Icon>
+            <Callout.Text>
+              <Flex align="center">You must log in to generate embeds.</Flex>
+            </Callout.Text>
+          </Callout.Root>
+
+          <WargamingLoginButton>Log in with Wargaming</WargamingLoginButton>
+        </Flex>
+      )}
+
+      <Text align="center" mt="3">
+        More embeds coming soon.{' '}
+        <Link
+          underline="always"
+          href="https://discord.gg/nDt7AjGJQH"
+          target="_blank"
+        >
+          Suggest ideas
+        </Link>
+        .
+      </Text>
+
+      <Flex justify="center">
+        {Object.entries(embedConfigurations).map(([embed, config]) => (
+          <EmbedState.Provider
+            key={embed}
+            data={extractEmbedConfigDefaults(config)}
+          >
+            <Link
+              href={`/tools/embed/${embed}`}
+              color="gray"
+              highContrast
+              style={{
+                width: 'fit-content',
+                height: 'fit-content',
+              }}
+              underline="hover"
+            >
+              <Flex
+                direction="column"
                 overflow="hidden"
-                position="relative"
                 style={{
-                  backgroundImage: `url(${imgur('SO13zur', { format: 'jpeg', size: ImgurSize.SmallThumbnail })})`,
-                  backgroundSize: 'cover',
-                  backgroundPosition: 'center',
+                  borderRadius: Var('radius-4'),
+                  backgroundColor: Var('color-panel-solid'),
+                  boxShadow: Var('shadow-3'),
                 }}
               >
-                <PreviewWrapper
-                  naked
-                  name={embed as keyof typeof embedConfigurations}
-                />
-              </Box>
-            </Flex>
-          </Link>
-        </EmbedState.Provider>
-      ))}
+                <Flex justify="center" p="2">
+                  <Text>{capitalize(embed)}</Text>
+                </Flex>
+
+                <Box
+                  width="20rem"
+                  height="20rem"
+                  overflow="hidden"
+                  position="relative"
+                  style={{
+                    backgroundImage: `url(${imgur('SO13zur', { format: 'jpeg', size: ImgurSize.SmallThumbnail })})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                  }}
+                >
+                  <PreviewWrapper
+                    naked
+                    name={embed as keyof typeof embedConfigurations}
+                  />
+                </Box>
+              </Flex>
+            </Link>
+          </EmbedState.Provider>
+        ))}
+      </Flex>
     </PageWrapper>
   );
 }

packages/website/src/pages/tools/embed/index.astro

@@ -5,5 +5,5 @@ import { Page } from './_index';
 ---
 
 <ToolLayout tool={embedTool}>
-  <Page />
+  <Page client:load />
 </ToolLayout>