feat: opentest plug

src/app/components/PatreonPlug.tsx

@@ -1,53 +0,0 @@
-'use client';
-
-import { CheckIcon } from '@radix-ui/react-icons';
-import { Button, Flex, Link, Text } from '@radix-ui/themes';
-import { useLayoutEffect, useState } from 'react';
-import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
-import { useAdExempt } from '../../hooks/useAdExempt';
-import { PatreonIcon } from '../../icons/Patreon';
-import * as App from '../../stores/app';
-
-export function PatreonPlug() {
-  const [hasPatreon, setHasPatreon] = useState(false);
-  const exempt = useAdExempt();
-  const patreon = App.use((state) => state.logins.patreon);
-
-  useLayoutEffect(() => {
-    setHasPatreon(patreon !== undefined);
-  }, [patreon]);
-
-  return (
-    <Flex
-      gap="2"
-      align="center"
-      direction="column"
-      justify="center"
-      p="4"
-      py="8"
-    >
-      <Flex gap="1" align="center">
-        <Text size="4" align="center">
-          {exempt
-            ? 'You are supporting BlitzKit, thank you!'
-            : 'Active Patreon supports go ad-free'}
-        </Text>
-        {!exempt && <CheckIcon width="1em" height="1em" />}
-      </Flex>
-
-      <Flex gap="2" wrap="wrap" justify="center">
-        <Link href="https://www.patreon.com/tresabhi" target="_blank">
-          <Button>
-            <PatreonIcon width={15} height={15} />{' '}
-            {exempt ? 'Manage membership' : 'Support on Patreon'}
-          </Button>
-        </Link>
-        {!hasPatreon && !exempt && (
-          <Link href={patreonLoginUrl()}>
-            <Button variant="outline">Log in with Patreon</Button>
-          </Link>
-        )}
-      </Flex>
-    </Flex>
-  );
-}

src/app/components/Plugs.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { ArrowRightIcon } from '@radix-ui/react-icons';
+import {
+  Badge,
+  Button,
+  Code,
+  Flex,
+  Link,
+  Separator,
+  Text,
+} from '@radix-ui/themes';
+import { useLayoutEffect, useState } from 'react';
+import { patreonLoginUrl } from '../../core/blitzkit/patreonLoginUrl';
+import { assertSecret } from '../../core/blitzkit/secret';
+import { useAdExempt } from '../../hooks/useAdExempt';
+import { PatreonIcon } from '../../icons/Patreon';
+import * as App from '../../stores/app';
+
+export function Plugs() {
+  const [hasPatreon, setHasPatreon] = useState(false);
+  const exempt = useAdExempt();
+  const patreon = App.use((state) => state.logins.patreon);
+
+  useLayoutEffect(() => {
+    setHasPatreon(patreon !== undefined);
+  }, [patreon]);
+
+  return (
+    <Flex
+      align="center"
+      direction="column"
+      justify="center"
+      px="4"
+      py="8"
+      gap="6"
+    >
+      {assertSecret(process.env.NEXT_PUBLIC_PROMOTE_OPENTEST) === 'true' && (
+        <>
+          <Flex direction="column" gap="3" align="center">
+            <Flex align="center" gap="2">
+              <Badge color="green">NEW</Badge>
+              <Text size="5">
+                BlitzKit{' '}
+                <Code variant="outline" size="4" color="gray" highContrast>
+                  opentest
+                </Code>{' '}
+                is available now{' '}
+              </Text>
+            </Flex>
+
+            <Link href="https://opentest.blitzkit.app/" target="_blank">
+              <Button color="green">
+                BlitzKit opentest <ArrowRightIcon />
+              </Button>
+            </Link>
+          </Flex>
+
+          <Separator size="3" />
+        </>
+      )}
+
+      <Flex direction="column" gap="3" align="center">
+        <Flex gap="1" align="center">
+          <Text size="4" align="center">
+            {exempt
+              ? 'You are supporting BlitzKit, thank you!'
+              : 'Active Patreon supports go ad-free'}
+          </Text>
+        </Flex>
+
+        <Flex gap="2" wrap="wrap" justify="center">
+          <Link href="https://www.patreon.com/tresabhi" target="_blank">
+            <Button>
+              <PatreonIcon width={15} height={15} />{' '}
+              {exempt ? 'Manage membership' : 'Support on Patreon'}
+            </Button>
+          </Link>
+          {!hasPatreon && !exempt && (
+            <Link href={patreonLoginUrl()}>
+              <Button variant="outline">Log in with Patreon</Button>
+            </Link>
+          )}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}

src/app/page.tsx

@@ -13,7 +13,7 @@ import {
 } from '../constants/tools';
 import { useAdExempt } from '../hooks/useAdExempt';
 import { Hero } from './components/Hero';
-import { PatreonPlug } from './components/PatreonPlug';
+import { Plugs } from './components/Plugs';
 import { ToolCard } from './components/ToolCard';
 
 export default function Page() {
@@ -23,7 +23,7 @@ export default function Page() {
     <>
       <Hero />
 
-      <PatreonPlug />
+      <Plugs />
 
       <Flex p="4" justify="center" gap="4">
         <Flex maxWidth="1024px" flexGrow="1" gap="4" direction="column">