From 44bac43b1c24d62e331348ad846ce08e81046a2e Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 20 Jan 2023 19:55:35 +0000
Subject: [PATCH] Add the pricing example

---
 src/components/Button.astro |  16 +++--
 src/pages/album.astro       |   2 +-
 src/pages/index.astro       |   3 +-
 src/pages/pricing.astro     | 114 ++++++++++++++++++++++++++++++++++++
 4 files changed, 129 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/pricing.astro

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 7ebaa78..30a41d9 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,21 +1,29 @@
 ---
 interface Props {
+  inverted: boolean;
   shape: "square" | "rounded";
+  size?: "large";
   text: string;
   type: "primary" | "secondary";
 }
 
-const { shape, text, type } = Astro.props as Props;
+const { inverted, shape, size, text, type } = Astro.props as Props;
 ---
 
 <a
   class:list={[
-    "text-lg py-2 px-5 transition-colors ease-in-out duration-200",
+    "block border transition-colors ease-in-out duration-200",
     {
-      "bg-blue-500 text-white hocus:bg-blue-600": type == "primary",
-      "bg-gray-500 text-white hocus:bg-gray-600": type == "secondary",
+      "bg-blue-500 border-blue-500 text-white hocus:bg-blue-600 hocus:text-white":
+        type == "primary" && !inverted,
+      "bg-white border-blue-500 text-blue-600 hocus:bg-blue-600 hocus:text-white":
+        type == "primary" && inverted,
+      "bg-gray-500 text-white hocus:bg-gray-600 hocus:text-white":
+        type == "secondary",
       "rounded-md": shape == "rounded",
       "rounded-none": shape == "square",
+      "py-3 px-5 text-xl": size == "large",
+      "py-2 px-5 text-lg": size !== "large",
     },
   ]}
   href="#0"
diff --git a/src/pages/album.astro b/src/pages/album.astro
index d40171b..312c19d 100644
--- a/src/pages/album.astro
+++ b/src/pages/album.astro
@@ -10,7 +10,7 @@ export const name = 'Album';
 ---
 
 <BaseLayout title={name}>
-  <Navbar title="Album" />
+  <Navbar title={name} />
 
   <Jumbotron title="Album example">
     <p class="text-base leading-relaxed text-gray-500 sm:text-lg">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index c62948f..bfaa7cf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -4,7 +4,8 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 const title = "Bootstrap examples with Tailwind CSS"
 
 const examples = [
-  { title: "Album", url: "/album" }
+  { title: "Album", url: "/album" },
+  { title: "Pricing", url: "/pricing" },
 ]
 ---
 
diff --git a/src/pages/pricing.astro b/src/pages/pricing.astro
new file mode 100644
index 0000000..e0ed15d
--- /dev/null
+++ b/src/pages/pricing.astro
@@ -0,0 +1,114 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import Button from "../components/Button.astro";
+
+interface Price {
+  button: {
+    text: string;
+  };
+  features: string[];
+  name: string;
+  price: number;
+}
+
+export const name = "Pricing";
+export const prices: Price[] = [
+  {
+    name: "Full",
+    price: 0,
+    features: [
+      "10 users included",
+      "2 GB of storage",
+      "Email support",
+      "Help center access",
+    ],
+    button: {
+      text: "Sign up for free",
+    },
+  },
+  {
+    name: "Pro",
+    price: 15,
+    features: [
+      "20 users included",
+      "10 GB of storage",
+      "Priority email support",
+      "Help center access",
+    ],
+    button: {
+      text: "Get started",
+    },
+  },
+  {
+    name: "Enterprise",
+    price: 29,
+    features: [
+      "30 users included",
+      "15 GB of storage",
+      "Phone and email support",
+      "Help center access",
+    ],
+    button: {
+      text: "Contact us",
+    },
+  },
+];
+---
+
+<BaseLayout title={name}>
+  <!-- <Navbar title={name} /> -->
+
+  <section class="mt-16">
+    <div class="max-w-2xl mx-auto px-4 text-center">
+      <h1 class="text-5xl">{name}</h1>
+      <p class="mt-4 text-xl leading-relaxed">
+        Quickly build an effective pricing table for your potential customers
+        with this Bootstrap example. It's built with default Bootstrap
+        components and utilities with little customization.
+      </p>
+    </div>
+  </section>
+
+  <section
+    class="max-w-5xl px-6 mt-8 mx-auto grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3"
+  >
+    {
+      prices.map((price, i) => (
+        <div class="max-w-sm w-full mx-auto border border-gray-300 overflow-hidden rounded-md shadow-md shadow-gray-200 text-center md:max-w-full">
+          <h2 class="px-4 py-3 text-2xl border-b border-gray-300 bg-gray-100">
+            {price.name}
+          </h2>
+
+          <div class="p-6">
+            <p>
+              <span class="text-4xl">${price.price}</span>
+              <span class="ml-1 text-3xl text-gray-600">
+                / mo<span class="sr-only">nth</span>
+              </span>
+            </p>
+
+            <div class="mt-5">
+              <h3 class="sr-only">Features</h3>
+
+              <ul class="space-y-1">
+                {price.features.map((feature) => (
+                  <li>{feature}</li>
+                ))}
+              </ul>
+            </div>
+
+            <div class="mt-7">
+              <Button
+                inverted={i === 0}
+                shape="rounded"
+                size="large"
+                text={price.button.text}
+                type="primary"
+              />
+            </div>
+          </div>
+        </div>
+      ))
+    }
+  </section>
+</BaseLayout>