Initial Commit

lib/river_connect_web/components/ui/scroll_area.ex

@@ -0,0 +1,46 @@
+defmodule RiverConnectWeb.Components.UI.ScrollArea do
+  @moduledoc """
+  Implementation of a scroll area component with custom styling.
+
+  The scroll area provides a consistent scrolling experience across different browsers
+  and platforms, with customizable styling for the scrollbar.
+
+  ## Examples:
+
+      <.scroll_area class="h-[200px]">
+        <div class="p-4">
+          <h4 class="mb-4 text-sm font-medium leading-none">Tags</h4>
+          <%= for tag <- 1..50 do %>
+            <div class="text-sm">
+              v1.2.0-beta.<%= tag %>
+            </div>
+            <.separator class="my-2" />
+          <% end %>
+        </div>
+      </.scroll_area>
+  """
+  use RiverConnectWeb.Components.UI, :component
+
+  @doc """
+  Renders a custom scrollable area.
+
+  ## Options
+
+  * `:class` - Additional CSS classes to apply to the scroll area container
+  """
+  attr :class, :string, default: nil
+  attr :rest, :global
+  slot :inner_block
+
+  def scroll_area(assigns) do
+    ~H"""
+    <div class={classes(["relative overflow-hidden", @class])} {@rest}>
+      <div class="salad-scroll-area rounded-[inherit] h-full w-full overflow-y-auto overflow-x-hidden">
+        <div class="-mr-3" style="min-width: 100%;">
+          {render_slot(@inner_block)}
+        </div>
+      </div>
+    </div>
+    """
+  end
+end