blocks-dusted 0.1.11 → 0.1.13

package/templates/blocks/DD-ProjHeader/Component.tsx

@@ -1,91 +1,93 @@
-'use client'
-import React from 'react'
-import { DDProjSlider } from '../DD-ProjSlider/Component'
-
-export interface Project2HeaderInfo {
-  label: string
-  value: string
-}
-
-export interface Project2HeaderImage {
-  image: string | { url: string; alt?: string }
-  alt?: string
-  id?: string
-}
-
-export interface Project2HeaderBlockProps {
-  title?: string
-  description?: string
-  projectInfo?: Project2HeaderInfo[]
-  images?: Project2HeaderImage[]
-  slidesPerView?: number
-  spaceBetween?: number
-  loop?: boolean
-  centeredSlides?: boolean
-  showSlider?: boolean
-}
-
-function Project2HeaderBlock({
-  title = 'Media Agency',
-  description = 'We provide digital experience services to startups and small businesses. We help our clients succeed by creating brand identities.',
-  projectInfo = [
-    { label: 'Category', value: 'Marketing' },
-    { label: 'Client', value: 'DustedClient' },
-    { label: 'Start Date', value: '4 July 2021' },
-    { label: 'Designer', value: 'DustedUi' }
-  ],
-  images = [
-    {
-      id: '1',
-      image:
-        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
-    },
-    {
-      id: '2',
-      image:
-        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
-    },
-    {
-      id: '3',
-      image:
-        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E'
-    }
-  ],
-  slidesPerView = 2,
-  spaceBetween = 30,
-  loop = true,
-  centeredSlides = true,
-  showSlider = true
-}: Project2HeaderBlockProps) {
-  return (
-    <>
-      <section className="container py-12">
-        <h1 className="text-3xl md:text-5xl font-semibold mb-4">{title}</h1>
-        <p className="text-stone-400 mb-8 max-w-3xl">{description}</p>
-        {projectInfo?.length ? (
-          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
-            {projectInfo.map((info, index) => (
-              <div key={`${info.label}-${index}`} className="rounded border border-stone-800 p-3">
-                <p className="text-xs uppercase text-stone-400">{info.label}</p>
-                <p className="text-sm text-stone-200">{info.value}</p>
-              </div>
-            ))}
-          </div>
-        ) : null}
-      </section>
-      {showSlider && (
-        <DDProjSlider
-          images={images}
-          slidesPerView={slidesPerView}
-          spaceBetween={spaceBetween}
-          loop={loop}
-          centeredSlides={centeredSlides}
-        />
-      )}
-    </>
-  )
-}
-
-export const DDProjHeader = Project2HeaderBlock
-export default DDProjHeader
-
+'use client'
+import React from 'react'
+import { DDProjSlider } from '../DD-ProjSlider/Component'
+
+export interface Project2HeaderInfo {
+  label: string
+  value: string
+}
+
+export interface Project2HeaderImage {
+  image: string | { url: string; alt?: string }
+  alt?: string
+  id?: string
+}
+
+export interface Project2HeaderBlockProps {
+  title?: string
+  description?: string
+  projectInfo?: Project2HeaderInfo[]
+  images?: Project2HeaderImage[]
+  slidesPerView?: number
+  spaceBetween?: number
+  loop?: boolean
+  centeredSlides?: boolean
+  showSlider?: boolean
+}
+
+function Project2HeaderBlock({
+  title = 'Media Agency',
+  description = 'We provide digital experience services to startups and small businesses. We help our clients succeed by creating brand identities.',
+  projectInfo = [
+    { label: 'Category', value: 'Marketing' },
+    { label: 'Client', value: 'DustedClient' },
+    { label: 'Start Date', value: '4 July 2021' },
+    { label: 'Designer', value: 'DustedUi' },
+  ],
+  images = [
+    {
+      id: '1',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E',
+    },
+    {
+      id: '2',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E',
+    },
+    {
+      id: '3',
+      image:
+        'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080"%3E%3Crect width="1920" height="1080" fill="%23ddd"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" font-size="64" fill="%23999"%3E1920x1080%3C/text%3E%3C/svg%3E',
+    },
+  ],
+  slidesPerView = 2,
+  spaceBetween = 30,
+  loop = true,
+  centeredSlides = true,
+  showSlider = true,
+}: Project2HeaderBlockProps) {
+  return (
+    <>
+      <section className="container py-12">
+        <h1 className="text-3xl md:text-5xl font-semibold mb-4">{title}</h1>
+        <p className="text-stone-600 dark:text-stone-400 mb-8 max-w-3xl">{description}</p>
+        {projectInfo?.length ? (
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+            {projectInfo.map((info, index) => (
+              <div
+                key={`${info.label}-${index}`}
+                className="rounded border border-stone-300 dark:border-stone-800 p-3"
+              >
+                <p className="text-xs uppercase text-stone-600 dark:text-stone-400">{info.label}</p>
+                <p className="text-sm text-stone-900 dark:text-stone-200">{info.value}</p>
+              </div>
+            ))}
+          </div>
+        ) : null}
+      </section>
+      {showSlider && (
+        <DDProjSlider
+          images={images}
+          slidesPerView={slidesPerView}
+          spaceBetween={spaceBetween}
+          loop={loop}
+          centeredSlides={centeredSlides}
+        />
+      )}
+    </>
+  )
+}
+
+export const DDProjHeader = Project2HeaderBlock
+export default DDProjHeader

package/templates/blocks/DD-ProjSlider/Component.tsx

@@ -98,7 +98,7 @@ export const DDProjSlider: React.FC<ProjectSliderBlockProps> = ({
   if (!images.length) return null
 
   return (
-    <section className="project-slider-block w-full overflow-hidden py-10">
+    <section className="project-slider-block relative left-0 mx-auto w-screen max-w-none overflow-hidden py-10">
       <div ref={swiperRef} className="swiper w-full overflow-visible">
         <div className="swiper-wrapper items-center">
           {images.map((image, index) => (

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

@@ -15,9 +15,9 @@ export const DDProjSlider: Block = {
       minRows: 1,
       fields: [
         {
-          name: 'imageId',
+          name: 'itemKey',
           type: 'text',
-          label: 'Image ID',
+          label: 'Image Key',
           required: true
         },
         {