import { defineBlock } from "@wabbit/tome-blocks-core/defineBlock";
import { logoSliderMeta } from "./meta";
import { logoSliderVariants } from "./variants";
const logoSliderBlock = defineBlock(
  logoSliderMeta,
  (config) => {
    const mediaCollection = config?.mediaCollection ?? "media";
    return {
      slug: "logoSlider",
      interfaceName: "LogoSliderBlock",
      labels: { singular: "Logo Slider", plural: "Logo Sliders" },
      fields: [
        {
          name: "heading",
          label: "Heading",
          type: "text",
          admin: {
            description: 'Optional heading above the logo slider (e.g., "Our Clients").'
          }
        },
        {
          name: "logos",
          label: "Client Logos",
          type: "array",
          required: true,
          minRows: 1,
          labels: { singular: "Logo", plural: "Logos" },
          admin: {
            description: "Add client logos to display in the slider."
          },
          fields: [
            {
              name: "image",
              label: "Logo Image",
              type: "upload",
              relationTo: mediaCollection,
              required: true
            },
            {
              name: "alt",
              label: "Company Name (Alt Text)",
              type: "text",
              required: true,
              admin: {
                description: "The company name (used for accessibility)."
              }
            },
            {
              name: "url",
              label: "Website URL",
              type: "text",
              admin: {
                description: "Optional link to the client website."
              }
            }
          ]
        },
        {
          name: "speed",
          label: "Scroll Speed",
          type: "number",
          defaultValue: 0.7,
          min: 0.1,
          max: 3,
          admin: {
            description: "Speed of the logo slider (lower is slower).",
            step: 0.1
          }
        },
        {
          name: "size",
          label: "Logo Size",
          type: "select",
          defaultValue: "medium",
          options: [
            { label: "Small", value: "small" },
            { label: "Medium", value: "medium" },
            { label: "Large", value: "large" }
          ],
          admin: {
            description: "Size of the logos in the slider."
          }
        },
        {
          name: "spacing",
          label: "Logo Spacing",
          type: "number",
          defaultValue: 80,
          min: 20,
          max: 200,
          admin: {
            description: "Space between logos in pixels."
          }
        },
        {
          name: "background",
          label: "Background Style",
          type: "select",
          defaultValue: "light",
          options: [
            { label: "Light", value: "light" },
            { label: "Dark", value: "dark" },
            { label: "Brand", value: "brand" },
            { label: "Transparent", value: "transparent" }
          ],
          admin: {
            description: "Background style for the logo slider."
          }
        },
        {
          name: "padding",
          label: "Vertical Padding",
          type: "select",
          defaultValue: "medium",
          options: [
            { label: "Small", value: "small" },
            { label: "Medium", value: "medium" },
            { label: "Large", value: "large" }
          ],
          admin: {
            description: "Amount of vertical padding around the logo slider."
          }
        }
      ]
    };
  },
  logoSliderVariants
);
export {
  logoSliderBlock
};
//# sourceMappingURL=index.js.map
Trusted by the best

Install
