Product mobile nav is now working

upmaru · Dec 25, 2024 · 60b8da6 · 60b8da6
1 parent 9fd431c
commit 60b8da6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/assets/components/products.jsx b/assets/components/products.jsx
@@ -6,11 +6,11 @@ import {
   ChevronUpDownIcon,
 } from '@heroicons/react/16/solid'
 
-function Products({ products, selected }) {
+function Products({ products, interval, selected }) {
   return (
     <Menu>
       <MenuButton className="flex items-center justify-between gap-2 font-medium">
-        {products.find(({ slug }) => slug === selected)?.name || products[0].name}
+        {products.find(({ reference }) => reference === selected)?.name || products[0].name}
         <ChevronUpDownIcon className="size-4 fill-slate-900" />
       </MenuButton>
       <MenuItems
@@ -20,7 +20,7 @@ function Products({ products, selected }) {
         {products.map((product) => (
           <MenuItem key={`product-${product.index}`}>
             <a 
-              href={`/our-product/pricing?product=${product.reference}`}
+              href={`/our-product/pricing?interval=${interval}&product=${product.reference}`}
               data-phx-link="patch"
               data-phx-link-state="push"
               data-selected={product.reference === selected ? true : undefined}
@@ -39,9 +39,9 @@ function Products({ products, selected }) {
 export function mountProducts() {
   const domNode = this.el;
   const root = createRoot(domNode);
-  let { products, selected } = this.el.dataset;
+  let { products, interval, selected } = this.el.dataset;
 
   products = JSON.parse(products);
 
-  root.render(<Products products={products} selected={selected} />)
+  root.render(<Products products={products} interval={interval} selected={selected} />)
 }
diff --git a/lib/opsmaru_web/components/pricing_components.ex b/lib/opsmaru_web/components/pricing_components.ex
@@ -111,6 +111,7 @@ defmodule OpsmaruWeb.PricingComponents do
   attr :products, :list, required: true
   attr :features, :list, required: true
   attr :product_features, :list, required: true
+  attr :focus_product, :string, default: nil
 
   def matrix(assigns) do
     ~H"""
@@ -120,19 +121,26 @@ defmodule OpsmaruWeb.PricingComponents do
       </th>
       <.display
         :for={product <- @products}
+        product={product}
         feature={feature}
+        focus_product={@focus_product}
         product_feature={match_product_feature(@product_features, product, feature)}
       />
     </tr>
     """
   end
 
   attr :feature, Content.Feature, required: true
+  attr :product, Content.Product, required: true
   attr :product_feature, Products.Feature, default: nil
+  attr :focus_product, :string, default: nil
 
   def display(assigns) do
     ~H"""
-    <td class="p-4 data-[selected]:table-cell max-sm:hidden">
+    <td
+      data-selected={"#{@focus_product == @product.reference}"}
+      class="p-4 data-[selected='true']:table-cell max-sm:hidden"
+    >
       <div :if={@feature.display == "remark" && @product_feature} class="text-sm/6">
         {@product_feature.remark}
       </div>

diff --git a/lib/opsmaru_web/live/pricing_live.ex b/lib/opsmaru_web/live/pricing_live.ex
@@ -171,6 +171,7 @@ defmodule OpsmaruWeb.PricingLive do
               </tr>
               <PricingComponents.matrix
                 products={@products}
+                focus_product={@focus_product}
                 features={category.features}
                 product_features={@product_features}
               />