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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.2.46",
+  "version": "0.2.47",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -60,7 +60,8 @@
   "files": [
     "lib",
     "dist",
-    "fonts"
+    "fonts",
+    "src"
   ],
   "author": {
     "name": "redneckz",

package/src/BenefitsBlock.fixture.tsx

@@ -0,0 +1,34 @@
+import { context } from './setup-fixture';
+
+import { BenefitsBlock } from './BenefitsBlock';
+
+export default (
+  <BenefitsBlock
+    context={context}
+    title="Преимущества кредита"
+    benefits={[
+      {
+        label: 'Без комиссии',
+        description:
+          'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
+        icon: 'ClockIcon',
+      },
+      {
+        label: 'Оформление по паспорту',
+        description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
+        icon: 'SignDocsIcon',
+      },
+      {
+        label: 'Без залога и поручительства',
+        description:
+          'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
+        icon: 'ComfortableCompIcon',
+      },
+      {
+        label: 'Деньги за 3 дня',
+        description: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
+        icon: 'ActualBalanceIcon',
+      },
+    ]}
+  />
+);

package/src/BenefitsBlock.tsx

@@ -0,0 +1,45 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ClockIcon, SignDocsIcon, ComfortableCompIcon, ActualBalanceIcon } from './Icons/index';
+import type { UniBlockProps, Benefit } from './types';
+
+const ICONS = { ClockIcon, SignDocsIcon, ComfortableCompIcon, ActualBalanceIcon };
+
+export interface BenefitsBlockContent {
+  title?: string;
+  benefits?: Benefit[];
+}
+
+export interface BenefitsBlockProps extends BenefitsBlockContent, UniBlockProps {}
+
+export const BenefitsBlock = JSX<BenefitsBlockProps>(({ className, title, benefits }) => {
+  return (
+    <section
+      className={`font-sans text-primary-text bg-white p-12 pb-2 flex flex-col items-center ${
+        className || ''
+      }`}
+    >
+      <h2 className="font-medium text-title m-0 max-w-[47rem] text-center">{title}</h2>
+      {benefits?.length ? (
+        <div className="grid grid-cols-2 gap-5 mt-9">{benefits.map(renderStep)}</div>
+      ) : null}
+    </section>
+  );
+});
+
+const renderStep = (benefit: Benefit, i: number) => {
+  return (
+    <div key={String(i)} className="flex items-center p-10 gap-5 max-w-[580px]">
+      {benefit.icon && (
+        <div className="h-[70px] w-[70px] min-w-[70px] min-h-[70px]">
+          {ICONS[benefit.icon as keyof typeof ICONS]?.()}
+        </div>
+      )}
+      <div>
+        <h3 className="font-medium text-xl m-0">{benefit.label}</h3>
+        {benefit.description && (
+          <div className="font-normal text-sm mt-2">{benefit.description}</div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/Blocks.ts

@@ -0,0 +1,23 @@
+import { BenefitsBlock } from './BenefitsBlock';
+import { ExchangeRateTile } from './ExchangeRateTile';
+import { Footer } from './Footer/index';
+import { Header } from './Header/index';
+import { MobileAppTile } from './MobileAppTile';
+import { Placeholder } from './Placeholder';
+import { ProductBlock } from './ProductBlock';
+import { ProductGallery } from './ProductGallery';
+import { StepsBlock } from './StepsBlock';
+import { Tile } from './Tile';
+
+export const Blocks = {
+  Header,
+  Footer,
+  Placeholder,
+  Tile,
+  ProductBlock,
+  StepsBlock,
+  BenefitsBlock,
+  ProductGallery,
+  ExchangeRateTile,
+  MobileAppTile,
+};

package/src/ContentPage.fixture.tsx

@@ -0,0 +1,38 @@
+import { context } from './setup-fixture';
+
+import { BlockDecorator, ContentPage } from './ContentPage';
+
+const blockDecorator: BlockDecorator = ({ blockClassName, block, render }, i) => (
+  <div
+    key={i}
+    className={`relative flex items-stretch ${blockClassName}`}
+    onClick={() => console.log('Edit', block)}
+  >
+    {render({ block, blockClassName: `${blockClassName} w-full` })}
+    <button
+      className="absolute w-8 h-8 top-4 right-4 border rounded-full"
+      onClick={(e) => {
+        console.log('Delete', block);
+        e.stopPropagation();
+      }}
+    >
+      ╳
+    </button>
+  </div>
+);
+
+export default {
+  default: (
+    <ContentPage context={context} className="bg-main" data={require('./ContentPage.page.json')} />
+  ),
+  editor: (
+    <div style={{ background: "url('grid.svg')", height: '100%' }}>
+      <ContentPage
+        context={context}
+        className="bg-transparent"
+        data={require('./ContentPage.page.json')}
+        blockDecorator={blockDecorator}
+      />
+    </div>
+  ),
+};