feat: Add Dropdown for Installation Commands on Homepage

cli/README.md

@@ -102,7 +102,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 For more advanced usage, check out the [CLI docs](https://create.t3.gg/en/installation).

www/src/components/landingPage/ClipboardSelect.tsx

@@ -0,0 +1,121 @@
+import { Menu, Transition } from "@headlessui/react";
+import clsx from "clsx";
+import { Fragment, useState } from "react";
+
+const commands = [
+  {
+    command: "create t3-app@latest",
+    manager: "npm",
+  },
+  {
+    command: "create t3-app",
+    manager: "yarn",
+  },
+  {
+    command: "create t3-app@latest",
+    manager: "pnpm",
+  },
+  {
+    command: "create t3-app@latest",
+    manager: "bun",
+  },
+];
+
+export default function ClipboardSelect() {
+  const [coolDown, setCoolDown] = useState(false);
+
+  const handleCopyToClipboard = async (manager: string, command: string) => {
+    const nextClipboard = `${manager} ${command}`;
+    try {
+      await navigator.clipboard.writeText(nextClipboard);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  const checkStyles = {
+    strokeDasharray: 450,
+    strokeDashoffset: -30,
+  };
+
+  return (
+    <div className="flex items-center gap-2">
+      <Menu as="div">
+        <div className="relative">
+          <Menu.Button className="relative flex cursor-pointer items-center justify-center rounded-lg border bg-t3-purple-200/50 p-2 text-left focus:outline-none hover:bg-t3-purple-200/75 dark:border-t3-purple-200/20 dark:bg-t3-purple-200/10 dark:hover:border-t3-purple-200/50 sm:text-sm">
+            <svg
+              className={`h-[1em] w-[1em] ${coolDown && "hidden"}`}
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+            <svg
+              className={`h-[1em] w-[1em] animate-draw ${
+                !coolDown && "hidden"
+              }`}
+              style={checkStyles}
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <polyline points="20 6 9 17 4 12"></polyline>
+            </svg>
+          </Menu.Button>
+          <Transition
+            as={Fragment}
+            enter={"transition ease-out duration-100"}
+            enterFrom={"transform opacity-0 -translate-y-1"}
+            enterTo={"transform opacity-100 -translate-y-0"}
+          >
+            <Menu.Items
+              className={clsx(
+                "focus-none shadow-l t3-scrollbar absolute right-0 mt-1 max-h-60 w-fit min-w-[6em] overflow-auto rounded-lg border bg-default text-base focus:outline-none focus-visible:outline-none dark:border-t3-purple-200/20 sm:text-sm",
+              )}
+            >
+              {commands.map(({ manager, command }) => (
+                <Menu.Item key={manager}>
+                  {({ active }) => {
+                    return (
+                      <button
+                        className={`${
+                          active && "bg-t3-purple-200/20"
+                        } group flex w-full items-center bg-t3-purple-200/10 px-4 py-2 text-sm font-medium hover:bg-t3-purple-200/20`}
+                        onClick={() => {
+                          handleCopyToClipboard(manager, command)
+                            .then(() => {
+                              setCoolDown(true);
+                              setTimeout(() => {
+                                setCoolDown(false);
+                              }, 1000);
+                            })
+                            .catch((err) => console.log(err));
+                        }}
+                      >
+                        {manager}
+                      </button>
+                    );
+                  }}
+                </Menu.Item>
+              ))}
+            </Menu.Items>
+          </Transition>
+        </div>
+      </Menu>
+    </div>
+  );
+}

www/src/components/landingPage/banner.astro

@@ -1,5 +1,6 @@
 ---
 import Button from "./button.astro";
+import ClipboardSelect from "./ClipboardSelect";
 ---
 
 <div class="py-12 sm:py-8 md:py-12 lg:py-14 xl:py-12 2xl:py-28">
@@ -69,88 +70,18 @@ import Button from "./button.astro";
 
               <div class="flex w-full flex-col items-center">
                 <div class="relative mt-4 flex h-full xl:mt-8">
-                  <button
-                    class="relative flex cursor-pointer flex-row items-center gap-2 rounded-md border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm transition-colors duration-300 hover:border-t3-purple-300/50 hover:bg-t3-purple-100/20 md:px-3 md:py-3 md:text-lg lg:px-5 lg:py-4 lg:text-xl"
-                    title="Copy the command to get started"
-                    id="command"
+                  <div
+                    class="relative flex items-center rounded-lg border border-t3-purple-200/20 bg-t3-purple-100/10 px-2 py-2 text-sm md:px-3 md:py-3 md:text-lg lg:px-5 lg:py-4 lg:text-xl"
                   >
-                    <code id="command-text">npm create t3-app@latest</code>
-                    <svg
-                      id="copy-icon"
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"
-                      ></rect><path
-                        d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"
-                      ></path>
-                    </svg>
-                    <svg
-                      id="check-icon"
-                      class="hidden"
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      stroke-width="2"
-                      stroke-linecap="round"
-                      stroke-linejoin="round"
-                      ><polyline points="20 6 9 17 4 12"></polyline>
-                    </svg>
-                  </button>
+                    <code class="mr-12">npx create t3-app@latest</code>
+                    <ClipboardSelect client:load />
+                  </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <script is:inline>
-      const command = document.querySelector("#command");
-      const commandText = document.querySelector("#command-text");
-      const copyIcon = document.querySelector("#copy-icon");
-      const checkIcon = document.querySelector("#check-icon");
-      let cooldown = false;
-
-      function toggleIcons() {
-        copyIcon.classList.toggle("hidden");
-        checkIcon.classList.toggle("hidden");
-      }
-
-      command.addEventListener("click", () => {
-        if (cooldown === false) {
-          cooldown = true;
-          navigator.clipboard.writeText(commandText.innerText);
-          toggleIcons();
-
-          setTimeout(() => {
-            toggleIcons();
-            cooldown = false;
-          }, 2000);
-        }
-      });
-    </script>
   </div>
-
-  <style>
-    #check-icon {
-      stroke-dasharray: 450;
-      stroke-dashoffset: -30;
-      animation: draw 2s linear normal;
-    }
-
-    @keyframes draw {
-      to {
-        stroke-dashoffset: 200;
-      }
-    }
-  </style>
 </div>

www/src/pages/ar/installation.mdx

@@ -32,7 +32,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 بعد أن تَنتهي عَملية إنشاء التطبيق، اَلق نَظرة عَلي [الخطوات الأولى](/ar/usage/first-steps) للبدء في تطبيقك الجديد.

www/src/pages/en/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 After your app has been scaffolded, check out the [first steps](/en/usage/first-steps) to get started on your new application.

www/src/pages/es/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 Después de que tu aplicación haya sido creada, consulta los [primeros pasos](/es/usage/first-steps) para comenzar con tu nueva aplicación.

www/src/pages/fr/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 Une fois votre application configurée, consultez les [premières étapes](/fr/usage/first-steps) pour démarrer sur votre nouvelle application.

www/src/pages/ja/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 アプリケーションの初期構成が生成されたら、[ファーストステップ](/ja/usage/first-steps) をチェックして、新しいアプリケーションを開始しましょう。

www/src/pages/no/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 Etter at applikasjonen din har blitt opprettet, sjekk ut [første steg](/no/usage/first-steps) for å begynne å utvikle den nye applikasjonen.

www/src/pages/pl/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 Po tym, jak szablon aplikacji zostanie utworzony, sprawdź [pierwsze kroki](/pl/usage/first-steps) aby zacząć budować swoją nową aplikację.

www/src/pages/pt/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 Após sua aplicação ter sido estruturada, verifique os [Primeiros Passos](/pt/usage/first-steps) para começar a usar sua nova aplicação.

www/src/pages/ru/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 После того, как приложение будет создано, ознакомьтесь с [первыми шагами](/ru/usage/first-steps), чтобы начать работу над вашим новым приложением.

www/src/pages/zh-hans/installation.mdx

@@ -31,7 +31,7 @@ pnpm create t3-app@latest
 ### bun
 
 ```bash
-bunx create-t3-app@latest
+bun create t3-app@latest
 ```
 
 在你的应用程序被创建后，请查看 [第一步](/zh-hans/usage/first-steps) 以开始你的新应用。

www/tailwind.config.ts

@@ -28,6 +28,14 @@ export default {
         "t3-purple-900": "#231ed3",
         "t3-purple-1000": "#1613cb",
       },
+      animation: {
+        draw: "draw 2s linear normal",
+      },
+    },
+    keyframes: {
+      draw: {
+        to: { strokeDashoffset: "200" },
+      },
     },
     fontFamily: {
       sans: [