Icon component

Author: crbelaus

lib/error_tracker/web/components/core_components.ex

@@ -130,4 +130,41 @@ defmodule ErrorTracker.Web.CoreComponents do
     </div>
     """
   end
+
+  attr :name, :string, values: ~w[bell bell-slash]
+
+  def icon(assigns = %{name: "bell"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M12 5a4 4 0 0 0-8 0v2.379a1.5 1.5 0 0 1-.44 1.06L2.294 9.707a1 1 0 0 0-.293.707V11a1 1 0 0 0 1 1h2a3 3 0 1 0 6 0h2a1 1 0 0 0 1-1v-.586a1 1 0 0 0-.293-.707L12.44 8.44A1.5 1.5 0 0 1 12 7.38V5Zm-5.5 7a1.5 1.5 0 0 0 3 0h-3Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+    """
+  end
+
+  def icon(assigns = %{name: "bell-slash"}) do
+    ~H"""
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 16 16"
+      fill="currentColor"
+      class="!h-4 !w-4 inline-block"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M4 7.379v-.904l6.743 6.742A3 3 0 0 1 5 12H3a1 1 0 0 1-1-1v-.586a1 1 0 0 1 .293-.707L3.56 8.44A1.5 1.5 0 0 0 4 7.38ZM6.5 12a1.5 1.5 0 0 0 3 0h-3Z"
+        clip-rule="evenodd"
+      />
+      <path d="M14 11a.997.997 0 0 1-.096.429L4.92 2.446A4 4 0 0 1 12 5v2.379c0 .398.158.779.44 1.06l1.267 1.268a1 1 0 0 1 .293.707V11ZM2.22 2.22a.75.75 0 0 1 1.06 0l10.5 10.5a.75.75 0 1 1-1.06 1.06L2.22 3.28a.75.75 0 0 1 0-1.06Z" />
+    </svg>
+    """
+  end
 end

priv/static/app.css

@@ -873,6 +873,10 @@ select {
   display: none;
 }
 
+.\!h-4 {
+  height: 1rem !important;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -881,6 +885,10 @@ select {
   height: 1.25rem;
 }
 
+.\!w-4 {
+  width: 1rem !important;
+}
+
 .w-10 {
   width: 2.5rem;
 }
@@ -945,6 +953,10 @@ select {
   gap: 0.5rem;
 }
 
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
 .space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));