feat: added membersLiveView for testing Primer components

lib/mv_web/components/layouts.ex

@@ -9,6 +9,7 @@ defmodule MvWeb.Layouts do
   `use MvWeb, :live_view`.
   """
   use MvWeb, :html
+  alias PrimerLive.Component, as: Primer
 
-  embed_templates "layouts/*"
+  embed_templates("layouts/*")
 end

lib/mv_web/components/layouts/app.html.heex

@@ -1,29 +1,23 @@
-<header class="px-4 sm:px-6 lg:px-8">
-  <div class="flex items-center justify-between border-b border-zinc-100 py-3 text-sm">
-    <div class="flex items-center gap-4">
-      <a href="/">
-        <img src={~p"/images/logo.svg"} width="36" />
-      </a>
-      <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v{Application.spec(:phoenix, :vsn)}
-      </p>
-    </div>
-    <div class="flex items-center gap-4 font-semibold leading-6 text-zinc-900">
-      <a href="https://twitter.com/elixirphoenix" class="hover:text-zinc-700">
-        @elixirphoenix
-      </a>
-      <a href="https://github.com/phoenixframework/phoenix" class="hover:text-zinc-700">
-        GitHub
-      </a>
-      <a
-        href="https://hexdocs.pm/phoenix/overview.html"
-        class="rounded-lg bg-zinc-100 px-2 py-1 hover:bg-zinc-200/80"
-      >
-        Get Started <span aria-hidden="true">&rarr;</span>
-      </a>
-    </div>
-  </div>
-</header>
+<Primer.header>
+  <:item>
+    <Primer.avatar
+      width="128"
+      src={~p"/images/local_it.png"}
+    />
+  </:item>
+  <:item>
+    <Primer.select_menu>
+      <:toggle>Menu</:toggle>
+      <:item navigate="/">
+        Phoenix Standard Startseite
+      </:item>
+    </Primer.select_menu>
+  </:item>
+  <:item is_full_width />
+  <:item class="mr-0">
+    <Primer.octicon name="person-24" />
+  </:item>
+</Primer.header>
 <main class="px-4 py-20 sm:px-6 lg:px-8">
   <div class="mx-auto max-w-2xl">
     <.flash_group flash={@flash} />

lib/mv_web/live/members_live.ex

@@ -0,0 +1,39 @@
+defmodule MvWeb.MembersLive do
+  use MvWeb, :live_view
+  alias PrimerLive.Component, as: Primer
+
+  def mount(_params, _session, socket) do
+    # Initialize any state you need here
+    {:ok,
+     assign(
+       socket,
+       :title,
+       "Willkommen zur test Live View für PrimerLive bis hier members gezeigt werden..."
+     )}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <div>
+      <h1 class="h1"><%= @title %></h1>
+      <Primer.state_label is_draft>Entwurf</Primer.state_label>
+      <Primer.subhead>
+        <span class="h2">Heading</span>
+        <:actions>
+        <Primer.button is_primary>Action</Primer.button>
+        </:actions>
+    <:description>
+    Description
+    </:description>
+    </Primer.subhead>
+      <Primer.button is_danger phx-click="click_me">Click Me!</Primer.button>
+    </div>
+    """
+  end
+
+  def handle_event("click_me", _value, socket) do
+    # Handle the button click event
+    new_title = "You clicked the button!"
+    {:noreply, assign(socket, :title, new_title)}
+  end
+end

lib/mv_web/router.ex

@@ -2,22 +2,23 @@ defmodule MvWeb.Router do
   use MvWeb, :router
 
   pipeline :browser do
-    plug :accepts, ["html"]
-    plug :fetch_session
-    plug :fetch_live_flash
-    plug :put_root_layout, html: {MvWeb.Layouts, :root}
-    plug :protect_from_forgery
-    plug :put_secure_browser_headers
+    plug(:accepts, ["html"])
+    plug(:fetch_session)
+    plug(:fetch_live_flash)
+    plug(:put_root_layout, html: {MvWeb.Layouts, :root})
+    plug(:protect_from_forgery)
+    plug(:put_secure_browser_headers)
   end
 
   pipeline :api do
-    plug :accepts, ["json"]
+    plug(:accepts, ["json"])
   end
 
   scope "/", MvWeb do
-    pipe_through :browser
+    pipe_through(:browser)
 
-    get "/", PageController, :home
+    get("/", PageController, :home)
+    live("/members", MembersLive, :index)
   end
 
   # Other scopes may use custom stacks.
@@ -35,10 +36,10 @@ defmodule MvWeb.Router do
     import Phoenix.LiveDashboard.Router
 
     scope "/dev" do
-      pipe_through :browser
+      pipe_through(:browser)
 
-      live_dashboard "/dashboard", metrics: MvWeb.Telemetry
-      forward "/mailbox", Plug.Swoosh.MailboxPreview
+      live_dashboard("/dashboard", metrics: MvWeb.Telemetry)
+      forward("/mailbox", Plug.Swoosh.MailboxPreview)
     end
   end
 
@@ -46,9 +47,9 @@ defmodule MvWeb.Router do
     import AshAdmin.Router
 
     scope "/admin" do
-      pipe_through :browser
+      pipe_through(:browser)
 
-      ash_admin "/"
+      ash_admin("/")
     end
   end
 end