From 0ae43fde727f2c15a1e04ce99f814ba163f8d336 Mon Sep 17 00:00:00 2001
From: James Ritchie <james@jamesritchie.co.uk>
Date: Thu, 29 Jun 2023 11:50:17 +0100
Subject: [PATCH] Added pnpm and yarn CLI install options

---
 .../helpContent/HelpContentText.tsx           | 38 ++++++++++++++++---
 1 file changed, 32 insertions(+), 6 deletions(-)

diff --git a/apps/webapp/app/components/helpContent/HelpContentText.tsx b/apps/webapp/app/components/helpContent/HelpContentText.tsx
index dfe62c5f4..a0936035a 100644
--- a/apps/webapp/app/components/helpContent/HelpContentText.tsx
+++ b/apps/webapp/app/components/helpContent/HelpContentText.tsx
@@ -91,12 +91,38 @@ export function HowToSetupYourProject() {
         <Paragraph spacing>
           Copy this CLI command into a new terminal window.{" "}
         </Paragraph>
-        <ClipboardField
-          variant="primary/medium"
-          className="mb-4"
-          secure="npx @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u <ngrok_forwarding_url>"
-          value={`npx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u <ngrok_forwarding_url>`}
-        />
+
+        <ClientTabs defaultValue="npm">
+          <ClientTabsList>
+            <ClientTabsTrigger value={"npm"}>npm</ClientTabsTrigger>
+            <ClientTabsTrigger value={"pnpm"}>pnpm</ClientTabsTrigger>
+            <ClientTabsTrigger value={"yarn"}>yarn</ClientTabsTrigger>
+          </ClientTabsList>
+          <ClientTabsContent value={"npm"}>
+            <ClipboardField
+              variant="primary/medium"
+              className="mb-4"
+              secure="npx @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u <ngrok_forwarding_url>"
+              value={`npx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u <ngrok_forwarding_url>`}
+            />
+          </ClientTabsContent>
+          <ClientTabsContent value={"pnpm"}>
+            <ClipboardField
+              variant="primary/medium"
+              className="mb-4"
+              secure="pnpm dlx @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u <ngrok_forwarding_url>"
+              value={`pnpm dlx @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u <ngrok_forwarding_url>`}
+            />
+          </ClientTabsContent>
+          <ClientTabsContent value={"yarn"}>
+            <ClipboardField
+              variant="primary/medium"
+              className="mb-4"
+              secure="yarn @trigger.dev/init@latest -k ••••••••• -t https://cloud.trigger.dev -u <ngrok_forwarding_url>"
+              value={`yarn @trigger.dev/init@latest -k ${devEnvironment?.apiKey} -t https://cloud.trigger.dev -u <ngrok_forwarding_url>`}
+            />
+          </ClientTabsContent>
+        </ClientTabs>
         <Paragraph spacing>
           Use the public URL from step 2d above to replace the -u placeholder
           text.