Enhance landing page (#4)

Author: mhdcodes

src/components/PresetsCodeBlock.astro

@@ -3,17 +3,13 @@ import { Code } from "astro:components";
 
 import CopyCodeButton from "./CopyCodeButton.astro";
 
-type Preset = {
-  id: string;
-  preset: string;
-  code: string;
-};
-
-type Props = {
-  presets: Array<Preset>;
-};
-
-const { presets = [] } = Astro.props;
+const presets = [
+  {
+    id: "laravel",
+    preset: "Laravel",
+    code: "curl -fsSL https://tryphp.dev/presets/laravel | bash",
+  },
+];
 ---
 
 <section>
@@ -33,7 +29,7 @@ const { presets = [] } = Astro.props;
   <div>
     {
       presets.map((preset) => (
-        <div class={`relative ${"preset"}`} id={preset.id}>
+        <div class="relative preset" id={preset.id}>
           <Code
             class="p-4 rounded"
             code={preset.code}
@@ -58,8 +54,8 @@ const { presets = [] } = Astro.props;
 
   buttons.forEach((button) => {
     button.addEventListener("click", () => {
-      const presetId = button.getAttribute("data-id")!;
-      const preset = document.getElementById(presetId)!;
+      const id = button.getAttribute("data-id")!;
+      const preset = document.getElementById(id)!;
       presets.forEach((preset) => preset.classList.add("hidden"));
       preset.classList.toggle("hidden");
     });

src/components/VersionsCodeBlock.astro

@@ -0,0 +1,78 @@
+---
+import { Code } from "astro:components";
+
+import CopyCodeButton from "./CopyCodeButton.astro";
+
+const versions = [
+  {
+    id: "php74",
+    preset: "PHP7.4",
+    code: "curl -fsSL https://tryphp.dev/7.4/install.sh | bash",
+  },
+  {
+    id: "php81",
+    preset: "PHP8.1",
+    code: "curl -fsSL https://tryphp.dev/8.1/install.sh | bash",
+  },
+  {
+    id: "php82",
+    preset: "PHP8.2",
+    code: "curl -fsSL https://tryphp.dev/8.2/install.sh | bash",
+  },
+  {
+    id: "php83",
+    preset: "PHP8.3",
+    code: "curl -fsSL https://tryphp.dev/8.3/install.sh | bash",
+  },
+];
+---
+
+<section>
+  <div class="flex flex-row gap-2 mb-2">
+    {
+      versions.map((preset) => (
+        <button
+          class="bg-[#1e1e2e] hover:bg-[#1e1e2e]/90 px-2 py-1 rounded font-bold text-white text-xs version-selector"
+          data-id={preset.id}
+        >
+          {preset.preset}
+        </button>
+      ))
+    }
+  </div>
+
+  <div>
+    {
+      versions.map((version) => (
+        <div class="relative version" id={version.id}>
+          <Code
+            class="p-4 rounded"
+            code={version.code}
+            lang="bash"
+            theme="catppuccin-mocha"
+          />
+          <CopyCodeButton code={version.code} />
+        </div>
+      ))
+    }
+  </div>
+</section>
+
+<script>
+  // Hide all code snippets except for first one
+  const versions = document.querySelectorAll<HTMLDivElement>(".version");
+  versions.forEach((preset) => preset.classList.add("hidden"));
+  versions[0]?.classList.remove("hidden");
+
+  const buttons =
+    document.querySelectorAll<HTMLButtonElement>(".version-selector");
+
+  buttons.forEach((button) => {
+    button.addEventListener("click", () => {
+      const id = button.getAttribute("data-id")!;
+      const version = document.getElementById(id)!;
+      versions.forEach((preset) => preset.classList.add("hidden"));
+      version.classList.toggle("hidden");
+    });
+  });
+</script>

src/pages/index.astro

@@ -6,6 +6,7 @@ import Layout from "../layouts/Layout.astro";
 import CopyCodeButton from "../components/CopyCodeButton.astro";
 import PresetsCodeBlock from "../components/PresetsCodeBlock.astro";
 import ThemeToggle from "../components/ThemeToggle.astro";
+import VersionsCodeBlock from "../components/VersionsCodeBlock.astro";
 
 const code = "curl -fsSL https://tryphp.dev/install.sh | bash";
 ---
@@ -113,41 +114,23 @@ const code = "curl -fsSL https://tryphp.dev/install.sh | bash";
     </section>
 
     <section>
-      <h2 class="mb-4 font-semibold text-2xl">Custom Install</h2>
+      <h2 class="mb-4 font-semibold text-2xl">Custom PHP Versions</h2>
       <p class="mb-4 text-lg">
-        You can install custom php versions or tailored presets for various
-        frameworks and applications. for example, the laravel preset installs
-        php with all the extensions needed to run a laravel application.
+        You can install custom PHP versions tailored to your needs. This allows
+        flexibility for various projects and environments, ensuring you’re
+        running the right version for your application.
       </p>
-      <PresetsCodeBlock
-        presets={[
-          {
-            id: "php74",
-            preset: "PHP7.4",
-            code: "curl -fsSL https://tryphp.dev/7.4/install.sh | bash",
-          },
-          {
-            id: "php81",
-            preset: "PHP8.1",
-            code: "curl -fsSL https://tryphp.dev/8.1/install.sh | bash",
-          },
-          {
-            id: "php82",
-            preset: "PHP8.2",
-            code: "curl -fsSL https://tryphp.dev/8.2/install.sh | bash",
-          },
-          {
-            id: "php83",
-            preset: "PHP8.3",
-            code: "curl -fsSL https://tryphp.dev/8.3/install.sh | bash",
-          },
-          {
-            id: "laravel",
-            preset: "Laravel",
-            code: "curl -fsSL https://tryphp.dev/presets/laravel | bash",
-          },
-        ]}
-      />
+      <VersionsCodeBlock />
+    </section>
+
+    <section>
+      <h2 class="mb-4 font-semibold text-2xl">Tailored Presets</h2>
+      <p class="mb-4 text-lg">
+        We also support tailored presets for popular frameworks and
+        applications. For example, the Laravel preset installs PHP with all the
+        necessary extensions to run a Laravel application smoothly.
+      </p>
+      <PresetsCodeBlock />
     </section>
 
     <section>