@redneckz/wildless-cms-uni-blocks 0.2.44 → 0.2.47

package/src/Icons/SignDocsIcon.tsx

@@ -0,0 +1,295 @@
+export const SignDocsIcon = (props?: Record<string, any>) => (
+  <svg
+    width={70}
+    height={70}
+    viewBox="0 0 70 70"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M48.68 62.735c0-.164-.13-.328-.379-.484-2.303-1.028-9.625-1.771-18.3-1.771-10.528 0-19.067 1.106-19.067 2.463 0 .164.13.328.379.484 2.312 1.028 9.626 1.771 18.3 1.771 10.529 0 19.067-1.106 19.067-2.463z"
+      fill="#44384D"
+    />
+    <path
+      d="M48.68 62.735c0-.164-.13-.328-.379-.484-2.303-1.028-9.625-1.771-18.3-1.771-10.528 0-19.067 1.106-19.067 2.463 0 .164.13.328.379.484 2.312 1.028 9.626 1.771 18.3 1.771 10.529 0 19.067-1.106 19.067-2.463z"
+      fill="url(#paint0_linear_2530_3536)"
+    />
+    <path
+      d="M48.68 62.735c0-.164-.13-.328-.379-.484-2.303-1.028-9.625-1.771-18.3-1.771-10.528 0-19.067 1.106-19.067 2.463 0 .164.13.328.379.484 2.312 1.028 9.626 1.771 18.3 1.771 10.529 0 19.067-1.106 19.067-2.463z"
+      fill="#050304"
+    />
+    <path
+      d="M48.68 62.735c0-.164-.13-.328-.379-.484-2.303-1.028-9.625-1.771-18.3-1.771-10.528 0-19.067 1.106-19.067 2.463 0 .164.13.328.379.484 2.312 1.028 9.626 1.771 18.3 1.771 10.529 0 19.067-1.106 19.067-2.463z"
+      fill="url(#paint1_linear_2530_3536)"
+    />
+    <mask
+      id="mask0_2530_3536"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={11}
+      y={6}
+      width={44}
+      height={53}
+    >
+      <path d="M48.472 6.517l-36.92 4.995 6.413 47.389 36.92-4.996-6.413-47.388z" fill="#898989" />
+    </mask>
+    <g mask="url(#mask0_2530_3536)">
+      <path d="M48.472 6.517l-36.92 4.995 6.413 47.389 36.92-4.996-6.413-47.388z" fill="#B5E2FF" />
+      <path
+        d="M48.472 6.517l-36.92 4.995 6.413 47.389 36.92-4.996-6.413-47.388z"
+        fill="url(#paint2_linear_2530_3536)"
+      />
+      <path
+        d="M44.856 6.054l-37.94 8.913 11.462 48.788 37.94-8.913L44.856 6.054z"
+        fill="url(#paint3_linear_2530_3536)"
+      />
+    </g>
+    <mask
+      id="mask1_2530_3536"
+      style={{
+        maskType: 'alpha',
+      }}
+      maskUnits="userSpaceOnUse"
+      x={4}
+      y={6}
+      width={49}
+      height={56}
+    >
+      <path d="M40.93 6.178L4.854 15.481l11.94 46.303L52.87 52.48 40.93 6.178z" fill="#898989" />
+    </mask>
+    <g mask="url(#mask1_2530_3536)">
+      <path d="M40.93 6.178L4.854 15.48l11.94 46.303 36.075-9.302L40.93 6.178z" fill="#FFCA42" />
+      <path
+        d="M40.93 6.178L4.854 15.48l11.94 46.303 36.075-9.302L40.93 6.178z"
+        fill="url(#paint4_linear_2530_3536)"
+      />
+      <path
+        d="M54.89 57.13l-19.557 2.647 13.47-25.865 19.557-2.647L54.89 57.13zM7.798 35.507l-19.557 2.647L1.716 12.288l19.557-2.646L7.798 35.507zM30.94 63.24l-2.057.279 20.826-39.973 2.052-.278L30.94 63.24z"
+        fill="#fff"
+      />
+      <path
+        d="M36.521 14.436a.951.951 0 01-.552-.18 1.023 1.023 0 01-.382-.58l-1.863-7.228a.957.957 0 01.684-1.165l.91-.236a.995.995 0 01.651.037.952.952 0 01.552.642l.387 1.41-.453.119-.386-1.411a.487.487 0 00-.59-.35l-.953.246a.485.485 0 00-.35.59l1.878 7.27a.479.479 0 00.59.35l.217-.057a.479.479 0 00.35-.59L36.19 9.36a.235.235 0 01.17-.288.235.235 0 01.288.17l1.005 3.907a.993.993 0 01-.038.65.952.952 0 01-.642.553l-.217.056a.977.977 0 01-.236.029z"
+        fill="#44384D"
+      />
+      <path
+        d="M32.426 54.517s1.825-5.736 5.259-9.012c2.659-2.544-1.594 7.435.53 6.917 2.31-.565 7.318-8.608 3.844-6.457-3.075 1.904-1.273 5.236 3.238 3.903 4.942-1.458 7.74-3.03 9.264-3.961"
+        stroke="url(#paint5_linear_2530_3536)"
+        strokeWidth={0.9069}
+        strokeMiterlimit={10}
+        strokeLinecap="round"
+      />
+    </g>
+    <path
+      d="M38.593 19.345L13.34 25.856a.94.94 0 01-1.142-.674.94.94 0 01.675-1.142l25.247-6.511a.94.94 0 011.142.674.936.936 0 01-.67 1.142zm-8.172 6.97l-15.905 4.1a.94.94 0 01-1.142-.675.94.94 0 01.675-1.142l15.905-4.1a.94.94 0 011.141.674.942.942 0 01-.674 1.142zm9.346-2.412l-5.874 1.515a.94.94 0 01-1.142-.675.94.94 0 01.675-1.142l5.87-1.514a.94.94 0 011.141.674.936.936 0 01-.67 1.142zm1.175 4.558l-25.247 6.511a.94.94 0 01-1.142-.675.94.94 0 01.675-1.141l25.247-6.512a.94.94 0 011.142.675.942.942 0 01-.675 1.142zm-13.088 8.233L16.87 39.525a.94.94 0 01-1.142-.675.94.94 0 01.675-1.142l10.984-2.83a.938.938 0 01.467 1.816zm6.134-1.58l-2.661.688a.94.94 0 01-1.142-.674.94.94 0 01.675-1.142l2.66-.689a.94.94 0 011.142.675.933.933 0 01-.674 1.142zm8.13-2.095l-4.658 1.198a.94.94 0 01-1.142-.675.94.94 0 01.675-1.141l4.657-1.199a.94.94 0 011.142.675.942.942 0 01-.675 1.142zm-9.65 7.35l-14.423 3.718a.94.94 0 01-1.142-.674.94.94 0 01.675-1.142L32 38.553a.94.94 0 011.142.675.942.942 0 01-.675 1.142z"
+      fill="#44384D"
+    />
+    <path
+      d="M38.593 19.345L13.34 25.856a.94.94 0 01-1.142-.674.94.94 0 01.675-1.142l25.247-6.511a.94.94 0 011.142.674.936.936 0 01-.67 1.142zm-8.172 6.97l-15.905 4.1a.94.94 0 01-1.142-.675.94.94 0 01.675-1.142l15.905-4.1a.94.94 0 011.141.674.942.942 0 01-.674 1.142zm9.346-2.412l-5.874 1.515a.94.94 0 01-1.142-.675.94.94 0 01.675-1.142l5.87-1.514a.94.94 0 011.141.674.936.936 0 01-.67 1.142zm1.175 4.558l-25.247 6.511a.94.94 0 01-1.142-.675.94.94 0 01.675-1.141l25.247-6.512a.94.94 0 011.142.675.942.942 0 01-.675 1.142zm-13.088 8.233L16.87 39.525a.94.94 0 01-1.142-.675.94.94 0 01.675-1.142l10.984-2.83a.938.938 0 01.467 1.816zm6.134-1.58l-2.661.688a.94.94 0 01-1.142-.674.94.94 0 01.675-1.142l2.66-.689a.94.94 0 011.142.675.933.933 0 01-.674 1.142zm8.13-2.095l-4.658 1.198a.94.94 0 01-1.142-.675.94.94 0 01.675-1.141l4.657-1.199a.94.94 0 011.142.675.942.942 0 01-.675 1.142zm-9.65 7.35l-14.423 3.718a.94.94 0 01-1.142-.674.94.94 0 01.675-1.142L32 38.553a.94.94 0 011.142.675.942.942 0 01-.675 1.142z"
+      fill="#42AB44"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M11.803 19.924l7.549-1.949a.934.934 0 00.67-1.142.94.94 0 00-1.142-.674l-7.544 1.948a.94.94 0 00-.675 1.142.94.94 0 001.142.675zM21.14 56.1l4.303-1.108a.942.942 0 00.675-1.142.94.94 0 00-1.142-.675l-4.303 1.109a.94.94 0 00-.675 1.142.94.94 0 001.142.674zm-1.17-4.558l7.544-1.948a.934.934 0 00.67-1.142.94.94 0 00-1.141-.675l-7.545 1.949a.94.94 0 00-.675 1.142c.133.5.642.802 1.147.674z"
+      fill="#44384D"
+    />
+    <path
+      d="M32.426 54.518s1.57-6.798 5.228-10.905c2.833-3.188-1.143 8.74 1.264 7.941 2.614-.87 7.645-10.631 3.833-7.82-3.374 2.488-.979 6.169 4.107 4.205 5.573-2.149 8.657-4.227 10.33-5.447"
+      stroke="#44384D"
+      strokeWidth={0.9069}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+    />
+    <path
+      d="M32.426 54.518s1.57-6.798 5.228-10.905c2.833-3.188-1.143 8.74 1.264 7.941 2.614-.87 7.645-10.631 3.833-7.82-3.374 2.488-.979 6.169 4.107 4.205 5.573-2.149 8.657-4.227 10.33-5.447"
+      stroke="url(#paint6_linear_2530_3536)"
+      strokeWidth={0.9069}
+      strokeMiterlimit={10}
+      strokeLinecap="round"
+    />
+    <path
+      d="M53.932 42.192l.707.189s-.632 1.864-.863 1.802c-.231-.061.156-1.99.156-1.99z"
+      fill="#0057D6"
+    />
+    <path
+      d="M57.65 23.55l3.109.835c.09.024.141.114.118.203-2.157 7.998-5.082 15.745-5.823 17.675a.548.548 0 01-.65.33l-.369-.1a.546.546 0 01-.4-.608c.32-2.038 1.674-10.21 3.812-18.212a.167.167 0 01.203-.123z"
+      fill="#44384D"
+    />
+    <path
+      d="M57.65 23.55l3.109.835c.09.024.141.114.118.203-2.157 7.998-5.082 15.745-5.823 17.675a.548.548 0 01-.65.33l-.369-.1a.546.546 0 01-.4-.608c.32-2.038 1.674-10.21 3.812-18.212a.167.167 0 01.203-.123z"
+      fill="url(#paint7_linear_2530_3536)"
+    />
+    <path
+      d="M53.931 42.192c.368.103.86-1.661 1.472-3.563 1.142-3.538 3.067-11.54 3.265-12.323.232-.906.208-1.18-.236-1.322a8.32 8.32 0 00-.91-.245c-.26-.057-.406.175-.453.377-.028.123-1.194 3.945-2.156 8.583-.481 2.326-1.015 5.459-1.123 7.228-.156.953-.16 1.18.141 1.265z"
+      fill="#B5E2FF"
+    />
+    <path
+      d="M53.931 42.192c.368.103.86-1.661 1.472-3.563 1.142-3.538 3.067-11.54 3.265-12.323.232-.906.208-1.18-.236-1.322a8.32 8.32 0 00-.91-.245c-.26-.057-.406.175-.453.377-.028.123-1.194 3.945-2.156 8.583-.481 2.326-1.015 5.459-1.123 7.228-.156.953-.16 1.18.141 1.265z"
+      fill="url(#paint8_linear_2530_3536)"
+    />
+    <path
+      d="M63.23 7.108l.925.25a.178.178 0 01.128.222l-.09.335-1.274-.34.09-.335a.186.186 0 01.222-.132z"
+      fill="#7DC15D"
+    />
+    <path
+      d="M62.938 7.301l1.378.368c.278.076.453.35.396.633-.377 1.85-1.77 8.549-3.543 15.188a.165.165 0 01-.203.117l-3.11-.835a.165.165 0 01-.117-.203c1.788-6.633 3.935-13.13 4.539-14.923a.55.55 0 01.66-.345z"
+      fill="#44384D"
+    />
+    <path
+      d="M62.938 7.301l1.378.368c.278.076.453.35.396.633-.377 1.85-1.77 8.549-3.543 15.188a.165.165 0 01-.203.117l-3.11-.835a.165.165 0 01-.117-.203c1.788-6.633 3.935-13.13 4.539-14.923a.55.55 0 01.66-.345z"
+      fill="url(#paint9_linear_2530_3536)"
+    />
+    <path
+      d="M62.405 8.198c.146-.41.269-.585.477-.538l.302.08c.198.07.23.236.108.731-.075.302-3.293 12.791-3.416 13.178-.222.717-.533.982-.92.897l-.264-.076c-.27-.085-.444-.377-.27-1.118.161-.67 3.804-12.65 3.983-13.154z"
+      fill="#B5E2FF"
+    />
+    <path
+      d="M62.405 8.198c.146-.41.269-.585.477-.538l.302.08c.198.07.23.236.108.731-.075.302-3.293 12.791-3.416 13.178-.222.717-.533.982-.92.897l-.264-.076c-.27-.085-.444-.377-.27-1.118.161-.67 3.804-12.65 3.983-13.154z"
+      fill="url(#paint10_linear_2530_3536)"
+    />
+    <path d="M60.894 23.597l-2.967-.796-.208.774 2.967.797.208-.775z" fill="#7DC15D" />
+    <path d="M60.89 23.594l-1.298-.348-.208.774 1.299.349.208-.775z" fill="#44384D" />
+    <path
+      d="M60.05 21.724c.34.09 2.086-6.133 2.799-8.785.712-2.647 1.005-3.75.599-3.86-.41-.108-.609.638-1.416 3.643-.811 3.006-2.326 8.913-1.981 9.002z"
+      fill="#fff"
+    />
+    <path
+      d="M55.007 37.493c-.212-.052-.09-1.288.269-2.755.363-1.468.825-2.619 1.043-2.567.212.052.09 1.288-.27 2.755-.363 1.468-.83 2.619-1.042 2.567zm1.972-6.738c.1-.405.052-.764-.113-.806-.165-.043-.373.254-.472.66-.099.406-.052.764.113.807.165.042.368-.26.472-.66z"
+      fill="#FEFFCF"
+    />
+    <path
+      d="M36.163 14.232a.95.95 0 01-.552-.179 1.023 1.023 0 01-.382-.58L33.36 6.24a.957.957 0 01.684-1.166l.91-.235a.995.995 0 01.651.037.952.952 0 01.552.642l.458 1.765-.453.118-.457-1.765a.487.487 0 00-.59-.35l-.949.246a.484.484 0 00-.349.59l1.878 7.27a.479.479 0 00.59.35l.217-.057a.48.48 0 00.35-.59l-1.02-3.944a.235.235 0 01.17-.288.235.235 0 01.288.17l1.005 3.907c.056.217.051.448-.033.65a.952.952 0 01-.642.553l-.217.056a1.06 1.06 0 01-.24.034z"
+      fill="#fff"
+    />
+    <defs>
+      <linearGradient
+        id="paint0_linear_2530_3536"
+        x1={10.9343}
+        y1={62.839}
+        x2={48.6798}
+        y2={62.839}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#7DC15D" />
+        <stop offset={0.310237} stopColor="#7DC15D" stopOpacity={0} />
+        <stop offset={0.666057} stopColor="#0057D6" stopOpacity={0} />
+        <stop offset={1} stopColor="#0057D6" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear_2530_3536"
+        x1={48.6798}
+        y1={65.1981}
+        x2={10.9749}
+        y2={65.1981}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#04D600" />
+        <stop offset={0.296875} stopColor="#00D63C" stopOpacity={0} />
+        <stop offset={0.832638} stopColor="#FA552D" stopOpacity={0} />
+        <stop offset={1} stopColor="#FA552D" />
+      </linearGradient>
+      <linearGradient
+        id="paint2_linear_2530_3536"
+        x1={30.012}
+        y1={9.01452}
+        x2={33.2182}
+        y2={32.7086}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#7DC15D" />
+        <stop offset={1} stopColor="#7DC15D" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint3_linear_2530_3536"
+        x1={27.9995}
+        y1={-51.7159}
+        x2={11.6386}
+        y2={-45.8937}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#42AB44" />
+        <stop offset={1} stopColor="#201B37" />
+      </linearGradient>
+      <linearGradient
+        id="paint4_linear_2530_3536"
+        x1={11.8784}
+        y1={21.7912}
+        x2={52.9266}
+        y2={52.6953}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FEFFCF" />
+        <stop offset={1} stopColor="#FEFFCF" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint5_linear_2530_3536"
+        x1={32.4264}
+        y1={54.6306}
+        x2={51.4241}
+        y2={47.5083}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0057D6" />
+        <stop offset={1} stopColor="#0057D6" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint6_linear_2530_3536"
+        x1={51.1952}
+        y1={45.1167}
+        x2={38.8905}
+        y2={51.6792}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#FA552D" />
+        <stop offset={1} stopColor="#FA552D" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint7_linear_2530_3536"
+        x1={54.766}
+        y1={42.6112}
+        x2={58.176}
+        y2={30.8556}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0057D6" />
+        <stop offset={1} stopColor="#0057D6" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint8_linear_2530_3536"
+        x1={58.3815}
+        y1={24.9812}
+        x2={55.6617}
+        y2={37.2894}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#7DC15D" />
+        <stop offset={1} stopColor="#7DC15D" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint9_linear_2530_3536"
+        x1={60.4212}
+        y1={23.4514}
+        x2={60.8915}
+        y2={21.6372}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#0057D6" />
+        <stop offset={1} stopColor="#0057D6" stopOpacity={0} />
+      </linearGradient>
+      <linearGradient
+        id="paint10_linear_2530_3536"
+        x1={58.6819}
+        y1={22.3036}
+        x2={62.2279}
+        y2={10.5717}
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#7DC15D" />
+        <stop offset={1} stopColor="#7DC15D" stopOpacity={0} />
+      </linearGradient>
+    </defs>
+  </svg>
+);

package/src/Icons/TelegramIcon.tsx

@@ -0,0 +1,8 @@
+export const TelegramIcon = (props?: Record<string, any>) => (
+  <svg width="20" height="16" fill="none" {...props}>
+    <path
+      d="M1.226 6.968s8.846-3.512 11.913-4.749c1.177-.495 5.165-2.078 5.165-2.078s1.84-.692 1.687.99c-.051.692-.46 3.116-.87 5.738-.613 3.71-1.278 7.767-1.278 7.767s-.102 1.138-.971 1.336c-.87.197-2.3-.693-2.556-.891-.205-.148-3.835-2.374-5.165-3.463-.358-.297-.767-.89.051-1.583 1.841-1.632 4.04-3.66 5.37-4.947.613-.593 1.226-1.979-1.33-.297-3.63 2.424-7.21 4.7-7.21 4.7s-.818.495-2.352.05C2.146 9.094.357 8.5.357 8.5s-1.227-.741.87-1.533Z"
+      fill="#1C1C1C"
+    />
+  </svg>
+);

package/src/Icons/VKIcon.tsx

@@ -0,0 +1,10 @@
+export const VKIcon = (props?: Record<string, any>) => (
+  <svg width="24" height="12" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M23.45.813c.166-.468 0-.813-.796-.813H20.03c-.668 0-.976.297-1.143.626 0 0-1.335 2.74-3.226 4.519-.612.516-.89.68-1.224.68-.167 0-.418-.164-.418-.633V.812c0-.562-.184-.812-.74-.812H9.15c-.417 0-.668.26-.668.508 0 .533.946.656 1.043 2.154v3.256c0 .714-.153.843-.487.843-.89 0-3.055-2.752-4.34-5.901C4.449.247 4.198 0 3.527 0H.9C.15 0 0 .297 0 .626c0 .584.89 3.488 4.145 7.33C6.315 10.577 9.37 12 12.153 12c1.669 0 1.875-.315 1.875-.86V9.158c0-.632.158-.758.687-.758.39 0 1.057.165 2.615 1.429C19.11 11.328 19.403 12 20.405 12h2.624c.75 0 1.127-.315.91-.94-.238-.62-1.087-1.52-2.215-2.59-.611-.608-1.53-1.264-1.808-1.592-.39-.421-.278-.609 0-.983 0 0 3.2-3.794 3.532-5.082h.002Z"
+      fill="#1C1C1C"
+    />
+  </svg>
+);

package/src/Icons/index.ts

@@ -0,0 +1,17 @@
+export { ActualBalanceIcon } from './ActualBalanceIcon';
+export { CalendarIcon } from './CalendarIcon';
+export { ClockIcon } from './ClockIcon';
+export { ComfortableCompIcon } from './ComfortableCompIcon';
+export { DollarIcon } from './DollarIcon';
+export { EmptyWalletIcon } from './EmptyWalletIcon';
+export { EuroIcon } from './EuroIcon';
+export { GridIcon } from './GridIcon';
+export { LoupeIcon } from './LoupeIcon';
+export { NewDocIcon } from './NewDocIcon';
+export { OkIcon } from './OkIcon';
+export { PassSendIcon } from './PassSendIcon';
+export { PercentageSquareIcon } from './PercentageSquareIcon';
+export { ProfileIcon } from './ProfileIcon';
+export { SignDocsIcon } from './SignDocsIcon';
+export { TelegramIcon } from './TelegramIcon';
+export { VKIcon } from './VKIcon';

package/src/Img.tsx

@@ -0,0 +1,22 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { Picture, ImgSource } from './types';
+
+export interface TextWithImageProps {
+  className?: string;
+  image: Picture;
+}
+
+export const Img = JSX<TextWithImageProps>(({ className, image }) => (
+  <picture className={`${className || ''}`}>
+    {image.sources?.length
+      ? image.sources.map(({ src, format }, index) => (
+          <source key={`${index}_${src}`} srcSet={src} type={formatToMimeType(format)} />
+        ))
+      : null}
+    <img src={image.src} alt={image.alt || image.title} title={image.title} {...image?.size} />
+  </picture>
+));
+
+export function formatToMimeType(format: ImgSource['format']): string | undefined {
+  return format ? `image/${String(format)}` : undefined;
+}

package/src/LikeControl.fixture.tsx

@@ -0,0 +1,5 @@
+import { context } from './setup-fixture';
+
+import { LikeControl } from './LikeControl';
+
+export default <LikeControl context={context} />;

package/src/LikeControl.tsx

@@ -0,0 +1,23 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { LikeButton } from './ui-kit/LikeButton';
+import type { UniBlockProps } from './types';
+
+export const LikeControl = JSX<UniBlockProps>(({ className, context }) => {
+  const likeService = context.useLikeService();
+
+  return (
+    <div
+      className={`border-main border-2 border-solid bg-white flex w-[125px] items-center justify-center gap-3 p-2 font-sans ${
+        className || ''
+      }`}
+    >
+      <LikeButton onClick={likeService.like} ariaLabel="Поставить отметку «лайк»" />
+      <LikeButton
+        onClick={likeService.dislike}
+        className="rotate-180"
+        ariaLabel="Поставить отметку «дизлайк»"
+      />
+      <span className="select-none">{likeService.likeCount}</span>
+    </div>
+  );
+});

package/src/MobileAppTile.fixture.tsx

@@ -0,0 +1,15 @@
+import { context } from './setup-fixture';
+
+import { MobileAppTile } from './MobileAppTile';
+
+export default {
+  default: (
+    <div className="grid grid-cols-12">
+      <MobileAppTile
+        context={context}
+        className="col-span-4"
+        qr="data:image/jpeg;base64,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"
+      />
+    </div>
+  ),
+};

package/src/MobileAppTile.tsx

@@ -0,0 +1,34 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Tile } from './Tile';
+import type { UniBlockProps } from './types';
+
+export interface MobileAppTileContent {
+  title?: string;
+  qr?: string;
+}
+
+export interface MobileAppTileProps extends MobileAppTileContent, UniBlockProps {}
+
+export const MobileAppTile = JSX<MobileAppTileProps>(
+  ({ className, context, title = 'Мобильное приложение', qr }) => {
+    return (
+      <Tile className={className} context={context} title={title}>
+        <div className="flex items-center">
+          {qr && (
+            <img
+              src={qr}
+              alt={title}
+              title={title}
+              width="90"
+              height="90"
+              className="w-[90px] h-[90px] bg-secondary-light"
+            />
+          )}
+          <span className="font-normal text-sm text-secondary-text ml-4">
+            Наведите камеру телефона на QR-код и скачайте приложение
+          </span>
+        </div>
+      </Tile>
+    );
+  },
+);

package/src/Placeholder.fixture.tsx

@@ -0,0 +1,5 @@
+import { context } from './setup-fixture';
+
+import { Placeholder } from './Placeholder';
+
+export default <Placeholder context={context} title="Неизвестный блок" />;

package/src/Placeholder.tsx

@@ -0,0 +1,33 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { Tile } from './Tile';
+import type { UniBlockProps } from './types';
+
+export interface PlaceholderContent {
+  title?: string;
+}
+
+export interface PlaceholderProps extends PlaceholderContent, UniBlockProps {
+  className?: string;
+}
+
+const GOLDEN_RATIO = 1.618;
+
+export const Placeholder = JSX<PlaceholderProps>(({ className, context, title }) => {
+  return (
+    <Tile className={className} context={context} title={title}>
+      <figure className="m-0 min-w-[600px]">{renderShimmer()}</figure>
+    </Tile>
+  );
+});
+
+const renderShimmer = (size: number = 3) =>
+  goldenSequence(100, size)
+    .map((_) => Math.floor(_))
+    .map(renderShimmerItem);
+
+const renderShimmerItem = (width: number = 100, index: number) => (
+  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+);
+
+const goldenSequence = (first: number, size: number): number[] =>
+  [first].concat(size > 0 ? goldenSequence(first / GOLDEN_RATIO, size - 1) : []);

package/src/ProductBlock.fixture.tsx

@@ -0,0 +1,95 @@
+import { context } from './setup-fixture';
+
+import { ProductBlock } from './ProductBlock';
+import { Picture } from './types';
+
+const image: Picture = {
+  src: 'money-1.png',
+  format: 'webp',
+  size: {
+    width: 300,
+    height: 300,
+  },
+};
+
+export default {
+  default: (
+    <ProductBlock
+      context={context}
+      title={'Потребительский кредит наличными'}
+      description="Кредит наличными без залога и поручительства. Потребительский кредит на любые цели. Нужен только паспорт."
+      breadcrumbs={[
+        {
+          text: 'Главная',
+          href: '/',
+        },
+        {
+          text: 'Кредитные карты',
+          href: '/credit',
+        },
+        {
+          text: 'Кредитная карта Своя Union Pay',
+        },
+      ]}
+      benefits={[
+        {
+          label: 'До 5 млн ₽',
+          description: 'Кредитный лимит',
+          icon: 'EmptyWalletIcon',
+        },
+        {
+          label: 'От 16,9%',
+          description: 'Ставка по кредиту',
+          icon: 'PercentageSquareIcon',
+        },
+        {
+          label: 'До 5 лет',
+          description: 'Срок кредитования',
+          icon: 'CalendarIcon',
+        },
+      ]}
+      buttons={[
+        {
+          href: 'https://rshb.ru',
+          text: 'Оформить карту',
+          target: '_blank',
+          version: 'primary',
+        },
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        },
+      ]}
+      image={image}
+    />
+  ),
+  'with items': (
+    <ProductBlock
+      context={context}
+      title={'Оплата проходит \nв 180 странах мира'}
+      breadcrumbs={[]}
+      items={[
+        'Совершайте любые личные покупки',
+        'Используйте корпоративную карту как обычную дебетовую, если вы ИП',
+        'Расходы для бизнеса на УСН 15% позволят снизить налоговую базу',
+      ]}
+      buttons={[
+        {
+          href: 'https://rshb.ru',
+          text: 'Оформить карту',
+          target: '_blank',
+          version: 'primary',
+        },
+        {
+          href: 'https://rshb.ru',
+          text: 'Подробнее',
+          target: '_blank',
+          version: 'secondary',
+        },
+      ]}
+      image={image}
+    />
+  ),
+};

package/src/ProductBlock.tsx

@@ -0,0 +1,15 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ProductBlockInner } from './ProductBlockInner';
+import type { ProductBlockInnerContent } from './ProductBlockInner';
+import type { UniBlockProps } from './types';
+
+export interface ProductBlockProps extends ProductBlockInnerContent, UniBlockProps {}
+
+export const ProductBlock = JSX<ProductBlockProps>((props) => {
+  const className = props.className;
+  return (
+    <section className={`bg-white p-11 pr-[7.5rem] ${className || ''}`}>
+      <ProductBlockInner {...props} />
+    </section>
+  );
+});