feat: better homepage

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

@@ -1,20 +1,68 @@
 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 (
+    <App.Provider>
+      <Content />
+    </App.Provider>
+  );
+}
+
+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 data={extractEmbedConfigDefaults(config)}>
+          <EmbedState.Provider
+            key={embed}
+            data={extractEmbedConfigDefaults(config)}
+          >
             <Link
               href={`/tools/embed/${embed}`}
               color="gray"
@@ -58,6 +106,7 @@ export function Page() {
             </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>