book review form

lib/wild_web/components/core_components.ex

@@ -673,4 +673,39 @@ defmodule WildWeb.CoreComponents do
   def translate_errors(errors, field) when is_list(errors) do
     for {^field, {msg, opts}} <- errors, do: translate_error({msg, opts})
   end
+
+  defp a_rating_star(assigns) do
+    ~H"""
+    <input
+      type="radio"
+      class="peer -ms-5 size-5 bg-transparent border-0 text-transparent cursor-pointer appearance-none checked:bg-none focus:bg-none focus:ring-0 focus:ring-offset-0"
+      name="hs-ratings-readonly"
+      value={Phoenix.HTML.Form.normalize_value("radio", @value)}
+    />
+    <label
+      for="hs-ratings-readonly-1"
+      class="peer-checked:text-yellow-400 text-gray-300 pointer-events-none dark:peer-checked:text-yellow-600 dark:text-neutral-600"
+    >
+      <svg
+        class="shrink-0 size-6"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="currentColor"
+        viewBox="0 0 16 16"
+      >
+        <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
+        </path>
+      </svg>
+    </label>
+    """
+  end
+
+  def rating_stars(assigns) do
+    ~H"""
+    <div class="flex flex-row-reverse justify-center gap-1">
+      <.a_rating_star :for={i <- 1..10} value={i} />
+    </div>
+    """
+  end
 end

lib/wild_web/live/book_thoughts.ex

@@ -3,39 +3,33 @@ defmodule WildWeb.BookThoughts do
 
   def render(assigns) do
     ~H"""
-    <div class="mx-auto">
+    <div class="text-center">
-      <.header class="text-center">
+      <.header>
-        Write your thoughts for a book or a series of books
+        Let the forest hear your thoughts on this book
-        <:subtitle>
+        <:subtitle>The wind will carry your howl</:subtitle>
-        Share your thoughts and suggestion on the book that you just read
-        </:subtitle>
       </.header>
-
-      <.simple_form for={@form} id="login_form" action={~p"/account/log_in"} phx-update="ignore">
-        <.input field={@form[:email]} type="text" label="Book Title" required />
-        <.input field={@form[:password]} type="number" label="Publication Year" required />
-        <.input field={@form[:password]} type="range" label="Rating" required />
-
-        <:actions>
-          <.input field={@form[:remember_me]} type="checkbox" label="Keep me logged in" />
-          <.link href={~p"/account/reset_password"} class="text-sm font-semibold">
-            Forgot your password?
-          </.link>
-        </:actions>
-        <:actions>
-          <.button phx-disable-with="Logging in..." class="w-full">
-            Log in <span aria-hidden="true">→</span>
-          </.button>
-        </:actions>
-      </.simple_form>
     </div>
+    <.simple_form for={@form} phx-changed="validate" phx-submit="save">
+      <.input field={@form[:book_title]} type="text" label="Book Title" required />
+      <.input field={@form[:author]} type="text" label="Author" required />
+      <.rating_stars />
+      <.input field={@form[:book_review]} type="textarea" label="Your Wild Thoughts" required />
+      <.input field={@form[:start_date]} type="date" label="Reading Start Date" required />
+      <.input field={@form[:finish_date]} type="date" label="Reading Finish Date" required />
+    </.simple_form>
     """
   end
 
   def mount(_params, _session, socket) do
-    email = Phoenix.Flash.get(socket.assigns.flash, :email)
+    form =
-    form = to_form(%{"email" => email}, as: "user")
+      to_form(%{
+        "book_title" => "",
+        "author" => "",
+        "book_review" => "",
+        "start_date" => "",
+        "finish_date" => ""
+      })
+
     {:ok, assign(socket, form: form), temporary_assigns: [form: form]}
   end
-
 end