docs: added tabs to swtich app router and pages router tutorial (#1900)

t3-oss · May 26, 2024 · abb120b · abb120b
1 parent cf7465a
commit abb120b
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 3 deletions.
diff --git a/www/src/components/docs/introductionTab.tsx b/www/src/components/docs/introductionTab.tsx
@@ -0,0 +1,37 @@
+import { useState } from "react";
+
+export function IntroductionTab() {
+  const [isAppRouterSelected, setIsAppRouterSelected] = useState(true);
+  return (
+    <>
+      <div className="flex w-full justify-center gap-10  py-5">
+        <button
+          className={`${isAppRouterSelected ? "bg-primary text-white" : "bg-transparent"}  inline-flex cursor-pointer items-center rounded-lg px-4 py-2 text-sm font-semibold transition-colors duration-500 hover:no-underline md:px-5  md:text-base lg:px-4 lg:py-3 `}
+          onClick={() => setIsAppRouterSelected(true)}
+        >
+          App Router
+        </button>
+        <button
+          className={`${!isAppRouterSelected ? "bg-primary text-white" : "bg-transparent"} inline-flex cursor-pointer items-center rounded-lg px-4 py-2 text-sm font-semibold  transition-colors duration-500 hover:no-underline  md:px-5 md:text-base lg:px-4 lg:py-3  `}
+          onClick={() => setIsAppRouterSelected(false)}
+        >
+          {" "}
+          Pages Router
+        </button>
+      </div>
+      <div className="embed">
+        <iframe
+          width="560"
+          height="315"
+          src={
+            isAppRouterSelected
+              ? "https://www.youtube.com/embed/d5x0JCZbAJs"
+              : "https://www.youtube.com/embed/YkOSUVzOAA4"
+          }
+          title="The best stack for your next project"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        ></iframe>
+      </div>
+    </>
+  );
+}
diff --git a/www/src/pages/en/introduction.md → www/src/pages/en/introduction.mdx b/www/src/pages/en/introduction.md → www/src/pages/en/introduction.mdx
@@ -5,10 +5,9 @@ layout: ../../layouts/docs.astro
 lang: en
 ---
 
-<div class="embed">
-<iframe width="560" height="315" src="https://www.youtube.com/embed/YkOSUVzOAA4" title="The best stack for your next project" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
-</div>
+import { IntroductionTab } from "../../components/docs/introductionTab";
 
+<IntroductionTab client:load />
 ## The T3 Stack
 
 The _"T3 Stack"_ is a web development stack made by [Theo](https://twitter.com/t3dotgg) focused on simplicity, modularity, and full-stack typesafety.