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 :id, :any, default: nil
  attr :style, :string, default: ""

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

  def svg(%{type: "scales_logo"} = assigns) do
    ~H"""
    <svg
      style={@style}
      xmlns="http://www.w3.org/2000/svg"
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 526 147"
      fill="none"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M258.927 132.594C252.854 132.481 246.107 131.807 242.058 130.57C238.122 129.332 234.973 127.589 232.611 125.34C230.249 122.978 228.562 120.11 227.55 116.737C226.65 113.25 226.201 109.314 226.201 104.928V3.37389L246.613 0V101.048C246.613 103.522 246.781 105.603 247.119 107.29C247.569 108.977 248.3 110.439 249.312 111.676C250.324 112.8 251.673 113.7 253.36 114.375C254.985 114.883 258.353 115.299 260.979 115.623L260.979 115.623C261.261 115.658 261.534 115.692 261.795 115.724L258.927 132.594ZM266.667 66.803C264.417 72.6511 263.293 79.4551 263.293 87.2151C263.293 93.8504 264.192 99.9796 265.992 105.603C267.791 111.113 270.547 115.949 274.258 120.11C277.969 124.159 282.693 127.364 288.428 129.726C294.164 131.975 300.912 133.1 308.672 133.1C311.708 133.1 314.688 132.931 317.612 132.594C320.536 132.257 323.236 131.807 325.71 131.244C328.296 130.794 330.546 130.288 332.458 129.726C334.482 129.051 336.056 128.433 337.181 127.87L334.482 111.17C332.12 112.182 328.859 113.138 324.698 114.037C320.649 114.937 316.15 115.387 311.202 115.387C302.767 115.387 296.301 113.475 291.802 109.651C287.416 105.715 284.942 100.205 284.38 93.1194H342.579C342.692 91.9947 342.748 90.7577 342.748 89.4081C342.86 87.9461 342.917 86.6527 342.917 85.5281C342.917 70.5705 339.486 59.3242 332.626 51.7892C325.878 44.2542 316.432 40.4867 304.286 40.4867C299.112 40.4867 294.051 41.4989 289.103 43.5232C284.155 45.4351 279.769 48.3591 275.945 52.2953C272.121 56.119 269.028 60.9549 266.667 66.803ZM321.324 70.1769C322.111 72.6511 322.505 75.294 322.505 78.1056H284.548C284.886 75.5189 285.504 72.9885 286.404 70.5143C287.304 68.0401 288.541 65.8471 290.115 63.9352C291.802 62.0233 293.827 60.5051 296.188 59.3805C298.55 58.1434 301.305 57.5248 304.454 57.5248C307.491 57.5248 310.077 58.0871 312.214 59.2118C314.463 60.2239 316.319 61.686 317.781 63.5978C319.356 65.3972 320.536 67.5903 321.324 70.1769ZM390.031 114.375C387.557 115.612 383.621 116.231 378.222 116.231C372.824 116.231 367.988 115.668 363.715 114.544C359.553 113.419 355.955 112.238 352.918 111.001L349.376 128.039C351.287 128.826 354.605 129.839 359.329 131.076C364.052 132.425 370.294 133.1 378.054 133.1C389.637 133.1 398.522 130.963 404.707 126.69C411.005 122.304 414.154 115.893 414.154 107.458C414.154 103.522 413.648 100.148 412.636 97.3367C411.624 94.5252 409.993 92.051 407.744 89.9142C405.607 87.6649 402.852 85.6968 399.478 84.0099C396.104 82.2105 391.999 80.4111 387.163 78.6116C384.239 77.5995 381.765 76.6435 379.741 75.7438C377.716 74.7317 376.086 73.7757 374.848 72.876C373.611 71.8639 372.712 70.7955 372.149 69.6708C371.699 68.5462 371.475 67.2529 371.475 65.7909C371.475 62.8668 372.768 60.73 375.355 59.3805C377.941 57.9185 381.315 57.1874 385.476 57.1874C390.087 57.1874 394.136 57.6373 397.622 58.537C401.109 59.3242 403.976 60.2239 406.226 61.2361L409.937 44.704C407.575 43.8043 404.033 42.9046 399.309 42.0049C394.586 40.9928 389.637 40.4867 384.464 40.4867C374.23 40.4867 366.133 42.8484 360.172 47.5719C354.212 52.1828 351.231 58.537 351.231 66.6343C351.231 70.7955 351.85 74.338 353.087 77.2621C354.436 80.0737 356.236 82.4916 358.485 84.516C360.734 86.5403 363.377 88.3397 366.414 89.9142C369.563 91.3762 372.993 92.782 376.704 94.1315C382.777 96.3808 387.107 98.4614 389.694 100.373C392.393 102.285 393.742 104.703 393.742 107.627C393.742 110.776 392.505 113.025 390.031 114.375ZM195.299 115.556C192.038 116.231 187.258 116.568 180.96 116.568C175.787 116.568 171.682 115.668 168.645 113.869C165.609 111.957 164.091 108.583 164.091 103.747C164.091 101.273 164.653 99.2486 165.778 97.6741C166.902 95.9872 168.364 94.6939 170.164 93.7942C172.076 92.8944 174.156 92.2759 176.405 91.9385C178.767 91.6011 181.073 91.4324 183.322 91.4324C185.908 91.4324 188.27 91.6011 190.407 91.9385C192.544 92.2759 194.175 92.6133 195.299 92.9507V115.556ZM196.311 43.0171C191.7 41.3302 186.021 40.4867 179.273 40.4867C173.65 40.4867 168.364 40.9365 163.416 41.8362C158.468 42.7359 154.7 43.6356 152.113 44.5354L154.644 61.0674C157.118 60.1677 160.323 59.3805 164.259 58.7057C168.196 58.0309 172.525 57.6935 177.249 57.6935C180.735 57.6935 183.603 58.1434 185.852 59.0431C188.214 59.9428 190.07 61.2361 191.419 62.9231C192.881 64.4975 193.893 66.3532 194.456 68.49C195.018 70.6268 195.299 72.876 195.299 75.2378V78.6116C192.488 77.9369 189.845 77.487 187.371 77.2621C184.896 76.9247 182.535 76.756 180.285 76.756C175.449 76.756 170.782 77.2621 166.284 78.2743C161.898 79.174 158.018 80.7484 154.644 82.9977C151.27 85.1345 148.571 87.9461 146.546 91.4324C144.635 94.9188 143.679 99.1924 143.679 104.253C143.679 109.539 144.522 113.981 146.209 117.58C148.008 121.179 150.426 124.103 153.463 126.352C156.612 128.601 160.379 130.232 164.765 131.244C169.152 132.257 173.987 132.763 179.273 132.763C187.258 132.763 194.399 132.257 200.697 131.244C207.108 130.345 211.887 129.557 215.036 128.883V75.4064C215.036 70.2332 214.418 65.5097 213.181 61.2361C212.056 56.85 210.088 53.1388 207.276 50.1023C204.577 47.0658 200.922 44.704 196.311 43.0171ZM70.5197 86.8777C70.5197 80.3548 71.5319 74.2818 73.5562 68.6587C75.5806 62.9231 78.4484 57.9747 82.1597 53.8136C85.9834 49.6524 90.5944 46.391 95.9926 44.0293C101.391 41.6675 107.464 40.4867 114.212 40.4867C122.534 40.4867 130.406 42.0049 137.829 45.0414L133.443 61.7422C131.081 60.73 128.382 59.8866 125.345 59.2118C122.421 58.537 119.272 58.1996 115.899 58.1996C107.914 58.1996 101.841 60.73 97.6796 65.7909C93.5184 70.7392 91.4379 77.7682 91.4379 86.8777C91.4379 95.6498 93.406 102.622 97.3422 107.796C101.278 112.857 107.914 115.387 117.248 115.387C120.734 115.387 124.165 115.05 127.538 114.375C130.912 113.7 133.836 112.857 136.311 111.844L139.178 128.714C136.929 129.839 133.499 130.851 128.888 131.75C124.39 132.65 119.722 133.1 114.886 133.1C107.351 133.1 100.772 131.975 95.1491 129.726C89.6385 127.364 85.0275 124.159 81.3162 120.11C77.7174 115.949 75.0183 111.057 73.2189 105.434C71.4194 99.6985 70.5197 93.513 70.5197 86.8777ZM40.6554 114.375C38.1812 115.612 34.245 116.231 28.8468 116.231C23.4485 116.231 18.6126 115.668 14.339 114.544C10.1779 113.419 6.57909 112.238 3.54258 111.001L0 128.039C1.91187 128.826 5.22953 129.839 9.95298 131.076C14.6764 132.425 20.9181 133.1 28.6781 133.1C40.2618 133.1 49.1463 130.963 55.3318 126.69C61.6297 122.304 64.7787 115.893 64.7787 107.458C64.7787 103.522 64.2726 100.148 63.2604 97.3367C62.2483 94.5252 60.6176 92.051 58.3683 89.9142C56.2315 87.6649 53.4762 85.6968 50.1023 84.0099C46.7284 82.2105 42.6235 80.4111 37.7876 78.6116C34.8635 77.5995 32.3893 76.6435 30.365 75.7438C28.3407 74.7317 26.71 73.7757 25.4729 72.876C24.2358 71.8639 23.3361 70.7955 22.7738 69.6708C22.3239 68.5462 22.099 67.2529 22.099 65.7909C22.099 62.8668 23.3923 60.73 25.979 59.3805C28.5656 57.9185 31.9395 57.1874 36.1006 57.1874C40.7116 57.1874 44.7603 57.6373 48.2466 58.537C51.733 59.3242 54.6008 60.2239 56.8501 61.2361L60.5613 44.704C58.1996 43.8043 54.657 42.9046 49.9336 42.0049C45.2101 40.9928 40.2618 40.4867 35.0885 40.4867C24.8543 40.4867 16.757 42.8484 10.7964 47.5719C4.83591 52.1828 1.85564 58.537 1.85564 66.6343C1.85564 70.7955 2.47419 74.338 3.71128 77.2621C5.06084 80.0737 6.86024 82.4916 9.1095 84.516C11.3588 86.5403 14.0016 88.3397 17.0381 89.9142C20.1871 91.3762 23.6172 92.782 27.3285 94.1315C33.4015 96.3808 37.7313 98.4614 40.318 100.373C43.0171 102.285 44.3667 104.703 44.3667 107.627C44.3667 110.776 43.1296 113.025 40.6554 114.375Z"
        fill="url(#paint0_linear_362_1738)"
      />
      <g filter="url(#filter0_d_362_1738)">
        <path
          opacity="0.7"
          d="M468.148 129.247C466.148 131.247 462.922 131.265 460.943 129.286L444.817 113.161C439.87 108.213 439.913 100.148 444.915 95.1464L461.215 78.8462C463.215 76.8457 466.441 76.8282 468.42 78.8073L489.921 100.308C491.9 102.287 491.882 105.513 489.882 107.513L468.148 129.247Z"
          fill="url(#paint1_linear_362_1738)"
        />
        <path
          opacity="0.7"
          d="M467.816 92.3456C465.849 94.3121 462.633 94.2845 460.633 92.284L444.332 75.9837C439.331 70.9824 439.262 62.9426 444.178 58.0263L460.201 42.0033C462.168 40.0368 465.384 40.0643 467.384 42.0649L489.118 63.7985C491.119 65.799 491.146 69.0149 489.18 70.9815L467.816 92.3456Z"
          fill="url(#paint2_linear_362_1738)"
        />
        <path
          d="M486.294 111.433C484.293 113.434 481.05 113.434 479.049 111.433L462.749 95.1332C457.748 90.1318 457.748 82.0231 462.749 77.0218L479.049 60.7215C481.05 58.721 484.293 58.721 486.294 60.7215L508.027 82.4552C510.028 84.4557 510.028 87.6992 508.027 89.6997L486.294 111.433Z"
          fill="url(#paint3_linear_362_1738)"
        />
      </g>
      <defs>
        <filter
          id="filter0_d_362_1738"
          x="424.536"
          y="24.5464"
          width="100.992"
          height="122.212"
          filterUnits="userSpaceOnUse"
          color-interpolation-filters="sRGB"
        >
          <feFlood flood-opacity="0" result="BackgroundImageFix" />
          <feColorMatrix
            in="SourceAlpha"
            type="matrix"
            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
            result="hardAlpha"
          />
          <feOffset />
          <feGaussianBlur stdDeviation="8" />
          <feComposite in2="hardAlpha" operator="out" />
          <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
          <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_362_1738" />
          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_362_1738" result="shape" />
        </filter>
        <linearGradient
          id="paint0_linear_362_1738"
          x1="-190.119"
          y1="-207.325"
          x2="518.355"
          y2="184.821"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
        <linearGradient
          id="paint1_linear_362_1738"
          x1="452.293"
          y1="171.756"
          x2="405.121"
          y2="113.775"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
        <linearGradient
          id="paint2_linear_362_1738"
          x1="452.601"
          y1="134.503"
          x2="405.101"
          y2="75.7736"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
        <linearGradient
          id="paint3_linear_362_1738"
          x1="470.583"
          y1="154.087"
          x2="422.969"
          y2="95.4312"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#1E4F84" />
          <stop offset="1" stop-color="#A3C0DF" />
        </linearGradient>
      </defs>
    </svg>
    """
  end

  def svg(%{type: "scales_logo_small"} = assigns) do
    ~H"""
    <svg
      style={@style}
      xmlns="http://www.w3.org/2000/svg"
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      viewBox="0 0 24 24"
      fill="none"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M11.0769 11.0769C11.0769 4.95931 6.11495 0 0 0V11.0769H11.0769ZM11.0769 24C11.0769 17.8824 6.11495 12.9231 0 12.9231V24H11.0769ZM12.9231 0C19.038 0 24 4.95931 24 11.0769H12.9231V0ZM24 24C24 17.8824 19.038 12.9231 12.9231 12.9231V24H24Z"
        fill="#21C39D"
      />
    </svg>
    """
  end

  def svg(%{type: "chevron"} = assigns) do
    ~H"""
    <svg
      style={@style}
      class={[@class]}
      width={[@width, "px"]}
      height={[@height, "px"]}
      id={@id}
      viewBox="0 0 6 10"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M5.78033 0.21967C6.07322 0.512563 6.07322 0.987437 5.78033 1.28033L2.06066 5L5.78033 8.71967C6.07322 9.01256 6.07322 9.48744 5.78033 9.78033C5.48744 10.0732 5.01256 10.0732 4.71967 9.78033L0.46967 5.53033C0.176777 5.23744 0.176777 4.76256 0.46967 4.46967L4.71967 0.21967C5.01256 -0.0732233 5.48744 -0.0732233 5.78033 0.21967Z"
        fill="#21C39D"
      />
    </svg>
    """
  end

  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"
      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="#0F172A80"
      />
    </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