scales_cms

defmodule ScalesCmsWeb.SvgComponents do
  @moduledoc """
  Provides custom made UI components.
  """
  use Phoenix.Component

  attr :width, :string, default: "100"
  attr :height, :string, default: "100"

  attr :class, :any, default: nil
  attr :style, :string, default: ""

  attr :type, :string, values: ~w(
      drag_handle toggle_up cms_rich_text
    )

  def svg(%{type: "drag_handle"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 24 24"
      fill="currentcolor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M4.47059 15.2941C4.73054 15.2941 4.94118 15.0835 4.94118 14.8235V4.94118H14.8235C15.0835 4.94118 15.2941 4.73054 15.2941 4.47059C15.2941 4.21064 15.0835 4 14.8235 4H4.47059C4.21064 4 4 4.21064 4 4.47059V14.8235C4 15.0835 4.21064 15.2941 4.47059 15.2941ZM6.35283 5.88235H16.7058C16.9657 5.88235 17.1764 6.09299 17.1764 6.35294C17.1764 6.61289 16.9657 6.82353 16.7058 6.82353H6.82341V16.7059C6.82341 16.9658 6.61278 17.1765 6.35283 17.1765C6.09287 17.1765 5.88224 16.9658 5.88224 16.7059V6.35294C5.88224 6.09299 6.09287 5.88235 6.35283 5.88235ZM7.76471 19.5294V8.23532C7.76471 7.97537 7.97534 7.76473 8.23529 7.76473H19.5294C19.7894 7.76473 20 7.97537 20 8.23532V19.5294C20 19.7894 19.7894 20 19.5294 20H8.23529C7.97534 20 7.76471 19.7894 7.76471 19.5294ZM19.0588 8.70591H8.70588V19.0589H19.0588V8.70591ZM16.3734 12.6084C16.5569 12.4245 16.8551 12.4245 17.0388 12.6084L17.98 13.5498C18.1639 13.7335 18.1639 14.0315 17.98 14.2152L17.0388 15.1564C16.947 15.2482 16.8265 15.2942 16.706 15.2942C16.5856 15.2942 16.4651 15.2482 16.3734 15.1562C16.1895 14.9725 16.1895 14.6745 16.3734 14.4908L16.5112 14.353H14.3531V16.5111L14.4911 16.3733C14.6746 16.1894 14.9728 16.1894 15.1565 16.3733C15.3404 16.557 15.3404 16.855 15.1565 17.0387L14.2153 17.9799C14.1234 18.0718 14.003 18.1177 13.8825 18.1177C13.762 18.1177 13.6416 18.0718 13.5499 17.9799L12.6087 17.0387C12.4248 16.855 12.4248 16.557 12.6087 16.3733C12.7922 16.1894 13.0904 16.1894 13.2741 16.3733L13.4119 16.5111V14.353H11.2538L11.3918 14.491C11.5757 14.6747 11.5757 14.9727 11.3918 15.1564C11.2999 15.2482 11.1794 15.2942 11.059 15.2942C10.9385 15.2942 10.818 15.2482 10.7262 15.1564L9.78499 14.2152C9.60108 14.0315 9.60108 13.7335 9.78499 13.5498L10.7262 12.6086C10.9097 12.4247 11.2079 12.4247 11.3916 12.6086C11.5755 12.7923 11.5755 13.0903 11.3916 13.274L11.2538 13.4118H13.4119V11.2537L13.2741 11.3917C13.0906 11.5756 12.7924 11.5756 12.6087 11.3917C12.4248 11.2079 12.4248 10.91 12.6087 10.7263L13.5499 9.78507C13.7334 9.60117 14.0316 9.60117 14.2153 9.78507L15.1565 10.7263C15.3404 10.91 15.3404 11.2079 15.1565 11.3917C15.0646 11.4835 14.9441 11.5295 14.8237 11.5295C14.7032 11.5295 14.5827 11.4835 14.4909 11.3915L14.3531 11.2537V13.4118H16.5112L16.3734 13.2738C16.1895 13.0901 16.1895 12.7921 16.3734 12.6084Z"
        fill="#151519"
      />
    </svg>
    """
  end

  def svg(%{type: "toggle_up"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 13 8"
      fill="currentcolor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M0.246658 6.99547C-0.0822196 6.66659 -0.082219 6.13338 0.246658 5.8045L5.80452 0.24664C5.86618 0.184975 5.93503 0.134873 6.00837 0.0963325C6.02141 0.0894809 6.03458 0.0829949 6.04789 0.0768743C6.35895 -0.0662651 6.73932 -0.00969696 6.9956 0.246585L12.5535 5.80444C12.8823 6.13332 12.8823 6.66654 12.5535 6.99541C12.2246 7.32429 11.6914 7.32429 11.3625 6.99541L6.40009 2.03301L1.43763 6.99547C1.10875 7.32435 0.575535 7.32435 0.246658 6.99547Z"
        fill="#151519"
      />
    </svg>
    """
  end

  def svg(%{type: "cms_rich_text"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 24 24"
      fill="currentcolor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <rect
        x="0.5"
        y="0.5"
        width="23"
        height="23"
        rx="3.5"
        fill="#36A1FF"
        fill-opacity="0.22"
        stroke="#36A1FF"
      />
      <rect x="6" y="8" width="7" height="1.5" rx="0.75" fill="#36A1FF" />
      <rect x="6" y="11.5" width="12" height="1.5" rx="0.75" fill="#36A1FF" />
      <rect x="6" y="15" width="9" height="1.5" rx="0.75" fill="#36A1FF" />
    </svg>
    """
  end
end