blocks-dusted 0.1.12 → 0.1.13

package/templates/blocks/DD-MasonaryMedia/config.ts

@@ -1,389 +1,389 @@
-import type { Block } from 'payload'
-
-export const DDMasonaryMedia: Block = {
-  slug: 'DD-MasonaryMedia',
-  dbName: 'studio_masonry',
-  interfaceName: 'DDMasonaryMedia',
-  labels: {
-    singular: 'Studio Masonary Media',
-    plural: 'Studio Masonary Media'
-  },
-  fields: [
-    {
-      type: 'tabs',
-      tabs: [
-        {
-          label: 'Header',
-          fields: [
-            {
-              name: 'eyebrow',
-              type: 'text',
-              label: 'Eyebrow Label',
-              defaultValue: 'Featured systems'
-            },
-            {
-              name: 'headlineMain',
-              type: 'text',
-              label: 'Headline Main',
-              defaultValue: 'Components, blocks, and templates'
-            },
-            {
-              name: 'headlineAccent',
-              type: 'text',
-              label: 'Headline Accent',
-              defaultValue: 'built to feel alive'
-            },
-            {
-              name: 'subtext',
-              type: 'textarea',
-              label: 'Subtext',
-              defaultValue:
-                'A curated showcase of production-ready interface pieces, with static previews and motion demos on hover.'
-            }
-          ]
-        },
-        {
-          label: 'Cards',
-          fields: [
-            {
-              name: 'items',
-              type: 'array',
-              label: 'Showcase Cards',
-              minRows: 1,
-              defaultValue: [
-                {
-                  title: 'Premium UI Blocks',
-                  category: 'Components',
-                  framework: 'Next.js / Payload',
-                  description:
-                    'Reusable interface sections for modern product, agency, and commerce experiences.',
-                  href: '/products/components',
-                  linkLabel: 'Browse components',
-                  free: false,
-                  priceLabel: 'From AUD $29',
-                  aspectRatio: '16/9'
-                },
-                {
-                  title: 'Website Templates',
-                  category: 'Templates',
-                  framework: 'Next.js / Payload',
-                  description:
-                    'Full-page systems and starter kits designed to ship faster without looking templated.',
-                  href: '/products/templates',
-                  linkLabel: 'View templates',
-                  free: false,
-                  priceLabel: 'From AUD $89',
-                  aspectRatio: '16/9'
-                }
-              ],
-              fields: [
-                {
-                  name: 'title',
-                  type: 'text',
-                  label: 'Title',
-                  required: true
-                },
-                {
-                  name: 'category',
-                  type: 'text',
-                  label: 'Category',
-                  defaultValue: 'Component'
-                },
-                {
-                  name: 'framework',
-                  type: 'text',
-                  label: 'Framework / Stack',
-                  defaultValue: 'Next.js / Payload'
-                },
-                {
-                  name: 'description',
-                  type: 'textarea',
-                  label: 'Description'
-                },
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'href',
-                      type: 'text',
-                      label: 'Link URL',
-                      defaultValue: '/products/components',
-                      admin: { width: '50%' }
-                    },
-                    {
-                      name: 'linkLabel',
-                      type: 'text',
-                      label: 'Link Label',
-                      defaultValue: 'View item',
-                      admin: { width: '50%' }
-                    }
-                  ]
-                },
-                {
-                  type: 'row',
-                  fields: [
-                    {
-                      name: 'free',
-                      type: 'checkbox',
-                      label: 'Free Item',
-                      defaultValue: false,
-                      admin: { width: '33.33%' }
-                    },
-                    {
-                      name: 'priceLabel',
-                      type: 'text',
-                      label: 'Price Label',
-                      defaultValue: 'From AUD $29',
-                      admin: { width: '33.33%' }
-                    },
-                    {
-                      name: 'aspectRatio',
-                      type: 'select',
-                      label: 'Media Aspect Ratio',
-                      defaultValue: '16/9',
-                      admin: { width: '33.33%' },
-                      options: [
-                        { label: 'Wide (16:9)', value: '16/9' },
-                        { label: 'Landscape (3:2)', value: '3/2' },
-                        { label: 'Square (1:1)', value: '1/1' },
-                        { label: 'Portrait (2:3)', value: '2/3' }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  name: 'image',
-                  type: 'upload',
-                  relationTo: 'media',
-                  label: 'Static Preview Image',
-                  required: false,
-                  admin: {
-                    description: 'Static image shown by default before hover.'
-                  }
-                },
-                {
-                  name: 'hoverVideo',
-                  type: 'upload',
-                  relationTo: 'media',
-                  label: 'Hover Video',
-                  required: false,
-                  admin: {
-                    description:
-                      'Muted video that plays on hover. Recommended: small .webm or .mp4.'
-                  }
-                },
-                {
-                  name: 'posterFallbackUrl',
-                  type: 'text',
-                  label: 'Image Fallback URL',
-                  admin: {
-                    placeholder: '/assets/placeholder/preview.webp',
-                    description: 'Used if the uploaded static image has no URL.'
-                  }
-                },
-                {
-                  name: 'videoFallbackUrl',
-                  type: 'text',
-                  label: 'Video Fallback URL',
-                  admin: {
-                    placeholder: '/assets/video/preview.webm',
-                    description: 'Used if the uploaded hover video has no URL.'
-                  }
-                }
-              ]
-            }
-          ]
-        },
-        {
-          label: 'Layout',
-          fields: [
-            {
-              type: 'row',
-              fields: [
-                {
-                  name: 'columnsDesktop',
-                  type: 'number',
-                  label: 'Desktop Columns',
-                  defaultValue: 3,
-                  min: 1,
-                  max: 12,
-                  admin: { width: '25%', description: 'min:1, max:12' }
-                },
-                {
-                  name: 'columnsTablet',
-                  type: 'number',
-                  label: 'Tablet Columns',
-                  defaultValue: 2,
-                  min: 1,
-                  max: 3,
-                  admin: { width: '25%', description: 'min:1, max:6' }
-                },
-                {
-                  name: 'gapClass',
-                  type: 'text',
-                  label: 'Grid Gap Class',
-                  defaultValue: 'gap-5',
-                  admin: { width: '25%' }
-                },
-                {
-                  name: 'containerClassName',
-                  type: 'text',
-                  label: 'Container Class',
-                  defaultValue: 'max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6',
-                  admin: { width: '25%' }
-                }
-              ]
-            },
-            {
-              name: 'sectionClassName',
-              type: 'text',
-              label: 'Section Class',
-              defaultValue: 'py-24'
-            }
-          ]
-        },
-        {
-          label: 'Settings',
-          fields: [
-            {
-              name: 'sectionId',
-              type: 'text',
-              label: 'Section ID',
-              defaultValue: 'studio-masonary-media'
-            },
-            {
-              name: 'customCSS',
-              type: 'code',
-              label: 'Custom CSS',
-              admin: { language: 'css' }
-            }
-          ]
-        },
-        {
-          label: 'CTA Button',
-          fields: [
-            {
-              type: 'row',
-              fields: [
-                {
-                  name: 'showCta',
-                  type: 'checkbox',
-                  label: 'Show Button',
-                  defaultValue: false
-                },
-                {
-                  name: 'ctaAlign',
-                  type: 'select',
-                  label: 'Button Alignment',
-                  defaultValue: 'center',
-                  admin: {
-                    width: '50%',
-                    condition: (_, siblingData) => siblingData?.showCta
-                  },
-                  options: [
-                    { label: 'Left', value: 'left' },
-                    { label: 'Center', value: 'center' },
-                    { label: 'Right', value: 'right' }
-                  ]
-                }
-              ]
-            },
-            {
-              type: 'row',
-              admin: { condition: (_, siblingData) => siblingData?.showCta },
-              fields: [
-                {
-                  name: 'ctaDisplayMode',
-                  type: 'select',
-                  label: 'Display Mode',
-                  defaultValue: 'iconWithLabel',
-                  admin: { width: '50%' },
-                  options: [
-                    { label: 'Icon with Label', value: 'iconWithLabel' },
-                    { label: 'Icon Only', value: 'iconOnly' },
-                    { label: 'Label Only', value: 'labelOnly' }
-                  ]
-                },
-                {
-                  name: 'ctaIconPosition',
-                  type: 'select',
-                  label: 'Icon Position',
-                  defaultValue: 'before',
-                  admin: {
-                    width: '50%',
-                    condition: (_, siblingData) => siblingData?.ctaDisplayMode === 'iconWithLabel'
-                  },
-                  options: [
-                    { label: 'Before Label', value: 'before' },
-                    { label: 'After Label', value: 'after' }
-                  ]
-                }
-              ]
-            },
-            {
-              name: 'ctaButtonText',
-              type: 'text',
-              label: 'Button Text',
-
-              admin: {
-                condition: (_, siblingData) =>
-                  siblingData?.showCta && siblingData?.ctaDisplayMode !== 'iconOnly'
-              }
-            },
-            {
-              type: 'row',
-              admin: { condition: (_, siblingData) => siblingData?.showCta },
-              fields: [
-                {
-                  name: 'ctaButtonStyle',
-                  type: 'select',
-                  label: 'Button Style',
-                  defaultValue: 'primary',
-
-                  admin: { width: '50%' },
-                  options: [
-                    { label: 'Primary', value: 'primary' },
-                    { label: 'Secondary', value: 'secondary' },
-                    { label: 'Outline', value: 'outline' },
-                    { label: 'Text', value: 'ghost' },
-                    { label: 'Call-to-Action', value: 'destructive' },
-                    { label: 'Retro Border', value: 'v1' },
-                    { label: 'Gradient Shine', value: 'v2' },
-                    { label: 'Ring Hover', value: 'v3' },
-                    { label: '3D Press', value: 'v4' },
-                    { label: 'Invert Slide', value: 'v5' },
-                    { label: 'Scale Morph', value: 'v6' },
-                    { label: 'Underline', value: 'v7' },
-                    { label: 'Embossed', value: 'v8' }
-                  ]
-                },
-                {
-                  name: 'ctaSize',
-                  type: 'select',
-                  label: 'Button Size',
-                  defaultValue: 'medium',
-
-                  admin: { width: '50%' },
-                  options: [
-                    { label: 'Small', value: 'small' },
-                    { label: 'Medium', value: 'medium' },
-                    { label: 'Large', value: 'large' }
-                  ]
-                }
-              ]
-            },
-            {
-              name: 'ctaContainerClass',
-              type: 'text',
-              label: 'Extra Container Class',
-              admin: {
-                condition: (_, siblingData) => siblingData?.showCta,
-                description: 'Additional classes on the button wrapper (e.g. mt-4)'
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
+import type { Block } from 'payload'
+
+export const DDMasonaryMedia: Block = {
+  slug: 'DD-MasonaryMedia',
+  dbName: 'studio_masonry',
+  interfaceName: 'DDMasonaryMedia',
+  labels: {
+    singular: 'Studio Masonary Media',
+    plural: 'Studio Masonary Media',
+  },
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        {
+          label: 'Header',
+          fields: [
+            {
+              name: 'eyebrow',
+              type: 'text',
+              label: 'Eyebrow Label',
+              defaultValue: 'Featured systems',
+            },
+            {
+              name: 'headlineMain',
+              type: 'text',
+              label: 'Headline Main',
+              defaultValue: 'Components, blocks, and templates',
+            },
+            {
+              name: 'headlineAccent',
+              type: 'text',
+              label: 'Headline Accent',
+              defaultValue: 'built to feel alive',
+            },
+            {
+              name: 'subtext',
+              type: 'textarea',
+              label: 'Subtext',
+              defaultValue:
+                'A curated showcase of production-ready interface pieces, with static previews and motion demos on hover.',
+            },
+          ],
+        },
+        {
+          label: 'Cards',
+          fields: [
+            {
+              name: 'items',
+              type: 'array',
+              label: 'Showcase Cards',
+              minRows: 1,
+              defaultValue: [
+                {
+                  title: 'Premium UI Blocks',
+                  category: 'Components',
+                  framework: 'Next.js / Payload',
+                  description:
+                    'Reusable interface sections for modern product, agency, and commerce experiences.',
+                  href: '/products/components',
+                  linkLabel: 'Browse components',
+                  free: false,
+                  priceLabel: 'From AUD $29',
+                  aspectRatio: '16/9',
+                },
+                {
+                  title: 'Website Templates',
+                  category: 'Templates',
+                  framework: 'Next.js / Payload',
+                  description:
+                    'Full-page systems and starter kits designed to ship faster without looking templated.',
+                  href: '/products/templates',
+                  linkLabel: 'View templates',
+                  free: false,
+                  priceLabel: 'From AUD $89',
+                  aspectRatio: '16/9',
+                },
+              ],
+              fields: [
+                {
+                  name: 'title',
+                  type: 'text',
+                  label: 'Title',
+                  required: true,
+                },
+                {
+                  name: 'category',
+                  type: 'text',
+                  label: 'Category',
+                  defaultValue: 'Component',
+                },
+                {
+                  name: 'framework',
+                  type: 'text',
+                  label: 'Framework / Stack',
+                  defaultValue: 'Next.js / Payload',
+                },
+                {
+                  name: 'description',
+                  type: 'textarea',
+                  label: 'Description',
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'href',
+                      type: 'text',
+                      label: 'Link URL',
+                      defaultValue: '/products/components',
+                      admin: { width: '50%' },
+                    },
+                    {
+                      name: 'linkLabel',
+                      type: 'text',
+                      label: 'Link Label',
+                      defaultValue: 'View item',
+                      admin: { width: '50%' },
+                    },
+                  ],
+                },
+                {
+                  type: 'row',
+                  fields: [
+                    {
+                      name: 'free',
+                      type: 'checkbox',
+                      label: 'Free Item',
+                      defaultValue: false,
+                      admin: { width: '33.33%' },
+                    },
+                    {
+                      name: 'priceLabel',
+                      type: 'text',
+                      label: 'Price Label',
+                      defaultValue: 'From AUD $29',
+                      admin: { width: '33.33%' },
+                    },
+                    {
+                      name: 'aspectRatio',
+                      type: 'select',
+                      label: 'Media Aspect Ratio',
+                      defaultValue: '16/9',
+                      admin: { width: '33.33%' },
+                      options: [
+                        { label: 'Wide (16:9)', value: '16/9' },
+                        { label: 'Landscape (3:2)', value: '3/2' },
+                        { label: 'Square (1:1)', value: '1/1' },
+                        { label: 'Portrait (2:3)', value: '2/3' },
+                      ],
+                    },
+                  ],
+                },
+                {
+                  name: 'image',
+                  type: 'upload',
+                  relationTo: 'media',
+                  label: 'Static Preview Image',
+                  required: false,
+                  admin: {
+                    description: 'Static image shown by default before hover.',
+                  },
+                },
+                {
+                  name: 'hoverVideo',
+                  type: 'upload',
+                  relationTo: 'media',
+                  label: 'Hover Video',
+                  required: false,
+                  admin: {
+                    description:
+                      'Muted video that plays on hover. Recommended: small .webm or .mp4.',
+                  },
+                },
+                {
+                  name: 'posterFallbackUrl',
+                  type: 'text',
+                  label: 'Image Fallback URL',
+                  admin: {
+                    placeholder: '/assets/placeholder/preview.webp',
+                    description: 'Used if the uploaded static image has no URL.',
+                  },
+                },
+                {
+                  name: 'videoFallbackUrl',
+                  type: 'text',
+                  label: 'Video Fallback URL',
+                  admin: {
+                    placeholder: '/assets/video/preview.webm',
+                    description: 'Used if the uploaded hover video has no URL.',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          label: 'Layout',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'columnsDesktop',
+                  type: 'number',
+                  label: 'Desktop Columns',
+                  defaultValue: 3,
+                  min: 1,
+                  max: 12,
+                  admin: { width: '25%', description: 'min:1, max:12' },
+                },
+                {
+                  name: 'columnsTablet',
+                  type: 'number',
+                  label: 'Tablet Columns',
+                  defaultValue: 2,
+                  min: 1,
+                  max: 3,
+                  admin: { width: '25%', description: 'min:1, max:6' },
+                },
+                {
+                  name: 'gapClass',
+                  type: 'text',
+                  label: 'Grid Gap Class',
+                  defaultValue: 'gap-5',
+                  admin: { width: '25%' },
+                },
+                {
+                  name: 'containerClassName',
+                  type: 'text',
+                  label: 'Container Class',
+                  defaultValue: 'max-w-6xl lg:max-w-7xl mx-auto px-4 md:px-6',
+                  admin: { width: '25%' },
+                },
+              ],
+            },
+            {
+              name: 'sectionClassName',
+              type: 'text',
+              label: 'Section Class',
+              defaultValue: 'py-4',
+            },
+          ],
+        },
+        {
+          label: 'Settings',
+          fields: [
+            {
+              name: 'sectionId',
+              type: 'text',
+              label: 'Section ID',
+              defaultValue: 'studio-masonary-media',
+            },
+            {
+              name: 'customCSS',
+              type: 'code',
+              label: 'Custom CSS',
+              admin: { language: 'css' },
+            },
+          ],
+        },
+        {
+          label: 'CTA Button',
+          fields: [
+            {
+              type: 'row',
+              fields: [
+                {
+                  name: 'showCta',
+                  type: 'checkbox',
+                  label: 'Show Button',
+                  defaultValue: false,
+                },
+                {
+                  name: 'ctaAlign',
+                  type: 'select',
+                  label: 'Button Alignment',
+                  defaultValue: 'center',
+                  admin: {
+                    width: '50%',
+                    condition: (_, siblingData) => siblingData?.showCta,
+                  },
+                  options: [
+                    { label: 'Left', value: 'left' },
+                    { label: 'Center', value: 'center' },
+                    { label: 'Right', value: 'right' },
+                  ],
+                },
+              ],
+            },
+            {
+              type: 'row',
+              admin: { condition: (_, siblingData) => siblingData?.showCta },
+              fields: [
+                {
+                  name: 'ctaDisplayMode',
+                  type: 'select',
+                  label: 'Display Mode',
+                  defaultValue: 'iconWithLabel',
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Icon with Label', value: 'iconWithLabel' },
+                    { label: 'Icon Only', value: 'iconOnly' },
+                    { label: 'Label Only', value: 'labelOnly' },
+                  ],
+                },
+                {
+                  name: 'ctaIconPosition',
+                  type: 'select',
+                  label: 'Icon Position',
+                  defaultValue: 'before',
+                  admin: {
+                    width: '50%',
+                    condition: (_, siblingData) => siblingData?.ctaDisplayMode === 'iconWithLabel',
+                  },
+                  options: [
+                    { label: 'Before Label', value: 'before' },
+                    { label: 'After Label', value: 'after' },
+                  ],
+                },
+              ],
+            },
+            {
+              name: 'ctaButtonText',
+              type: 'text',
+              label: 'Button Text',
+
+              admin: {
+                condition: (_, siblingData) =>
+                  siblingData?.showCta && siblingData?.ctaDisplayMode !== 'iconOnly',
+              },
+            },
+            {
+              type: 'row',
+              admin: { condition: (_, siblingData) => siblingData?.showCta },
+              fields: [
+                {
+                  name: 'ctaButtonStyle',
+                  type: 'select',
+                  label: 'Button Style',
+                  defaultValue: 'primary',
+
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Primary', value: 'primary' },
+                    { label: 'Secondary', value: 'secondary' },
+                    { label: 'Outline', value: 'outline' },
+                    { label: 'Text', value: 'ghost' },
+                    { label: 'Call-to-Action', value: 'destructive' },
+                    { label: 'Retro Border', value: 'v1' },
+                    { label: 'Gradient Shine', value: 'v2' },
+                    { label: 'Ring Hover', value: 'v3' },
+                    { label: '3D Press', value: 'v4' },
+                    { label: 'Invert Slide', value: 'v5' },
+                    { label: 'Scale Morph', value: 'v6' },
+                    { label: 'Underline', value: 'v7' },
+                    { label: 'Embossed', value: 'v8' },
+                  ],
+                },
+                {
+                  name: 'ctaSize',
+                  type: 'select',
+                  label: 'Button Size',
+                  defaultValue: 'medium',
+
+                  admin: { width: '50%' },
+                  options: [
+                    { label: 'Small', value: 'small' },
+                    { label: 'Medium', value: 'medium' },
+                    { label: 'Large', value: 'large' },
+                  ],
+                },
+              ],
+            },
+            {
+              name: 'ctaContainerClass',
+              type: 'text',
+              label: 'Extra Container Class',
+              admin: {
+                condition: (_, siblingData) => siblingData?.showCta,
+                description: 'Additional classes on the button wrapper (e.g. mt-4)',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+}